Элементы сетки в виде квадратов в WinRT (метро)

Question

Я боролся с этим несколько дней и не могу заставить его работать. Может быть, я не такой хороший программист на XAML, как я надеялся

В любом случае, моя проблема в том, что я хочу привязать несколько элементов к GridView и заставить их отображаться в виде квадратов без установки ширины и высоты. Причина этого заключается в том, что я хочу, чтобы мои элементы GridView увеличивались / уменьшались и расширялись до максимального размера при изменении разрешения или размера экрана.

Вот мой XAML:

<UserControl.Resources>

    <Style x:Key="MyItemContainerStyle" TargetType="ListViewItem">
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <!--<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Self}, Path=Width}" />-->
    </Style>

    <DataTemplate x:Key="MyItemTemplate">
        <Border CornerRadius="4" 
                BorderBrush="Black"  
                BorderThickness="1"
                Background="Blue">
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">X</TextBlock>
        </Border>
    </DataTemplate>

    <ItemsPanelTemplate x:Key="MyItemsPanelTemplate">
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" />
    </ItemsPanelTemplate>

</UserControl.Resources>

<Grid Background="White">
    <GridView x:Name="MyGrid"
              UseLayoutRounding="True"
              ItemTemplate="{StaticResource MyItemTemplate}"
              ItemsPanel="{StaticResource MyItemsPanelTemplate}"
              ItemContainerStyle="{StaticResource MyItemContainerStyle}"
              ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
    </GridView>
</Grid>

И это мой код:

public sealed partial class BlankPage : Page
{
    public BlankPage()
    {
        this.InitializeComponent();

        MyGrid.Items.Add(new ListViewItem { Content = 1 });
        MyGrid.Items.Add(new ListViewItem { Content = 2 });
        MyGrid.Items.Add(new ListViewItem { Content = 3 });
    }

    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.  The Parameter
    /// property is typically used to configure the page.</param>
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
    }
}

Это, однако, приводит к выводу, как это (прямоугольные элементы, а не квадраты)

Я был бы признателен, если бы кто-то, кто знает немного больше о разработке XAML и WinRT (metro), чем я, смог бы объяснить это для меня и, возможно, привести мне рабочий пример.

Thanx!

РЕДАКТИРОВАТЬ

Я получил подсказку, чтобы обернуть мою Границу в Viewbox, поскольку у нее, кажется, есть некоторые способности масштабирования / растяжения.

Я играл около пары часов, но не могу заставить его работать на все 100%.

Это мой XAML сейчас:

<UserControl.Resources>

<Style x:Key="MyItemContainerStyle" TargetType="ListViewItem">
    <Setter Property="FontFamily" Value="Segoe UI" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>

<DataTemplate x:Key="MyItemTemplate">
    <Viewbox>
        <Border CornerRadius="3" 
        BorderBrush="Black"  
        BorderThickness="1">
            <Grid Background="Blue" MinHeight="50" MinWidth="50">
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">X</TextBlock>
            </Grid>
        </Border>
    </Viewbox>
</DataTemplate>

<ItemsPanelTemplate x:Key="MyItemsPanelTemplate">
    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
    </StackPanel>
</ItemsPanelTemplate>

</UserControl.Resources>

<Grid Background="White">
    <GridView x:Name="MyGrid"
      UseLayoutRounding="True"
      ItemTemplate="{StaticResource MyItemTemplate}"
      ItemsPanel="{StaticResource MyItemsPanelTemplate}"
      ItemContainerStyle="{StaticResource MyItemContainerStyle}"
      ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
    </GridView>
</Grid>

Это производит этот вывод:

Теперь он, кажется, растянулся на квадрат, но вытянулся за пределы экрана. Я также запустил этот пример для нескольких результатов и размеров экрана, и он показывает тот же результат, что означает, что он масштабируется правильно.

Помощь будет оценена.

Thanx!

Answer 1

Ваша закомментированная привязка близка к чему-то, что могло бы работать - только вам нужно привязать к ActualWidth:

<Setter Property="Height" Value="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" />

В целом, я бы предложил использовать жестко запрограммированные значения - они упрощают компоновку ЦП, упрощают детерминированный дизайн и масштабируются Windows, когда этого требуют размер и разрешение экрана. Если вам нужен больший контроль над этим, вы можете привязать ширину и высоту к одному и тому же значению из модели представления, которую вы меняете в зависимости от необходимости, или написать преобразователь, который преобразует жестко запрограммированное значение ширины / высоты в фактическое значение в зависимости от обнаруженного экрана. размер / разрешение или настройки.