Gridview 项目在 WinRT (metro) 中显示为正方形

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) 开发，我将不胜感激，可以为我解释这一点，并可能给我一个工作示例。

谢谢！

编辑

我得到了将我的边框包裹在 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>

这会产生这个输出：

现在它似乎将自己拉伸成一个正方形，但它会在屏幕之外拉伸自己。我还在几个分辨率和屏幕尺寸下运行了这个示例，它显示了相同的输出，这意味着它可以正确缩放。

我们将不胜感激。

谢谢！

Answer 1

您注释掉的绑定接近可以工作的东西 - 只有您需要绑定到 ActualWidth：

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

总的来说，我建议使用硬编码值 - 它们使 CPU 上的布局更容易，更易于确定性设计，并且在屏幕尺寸和分辨率需要时由 Windows 进行缩放。如果您想对此进行更多控制 - 您可以将 Width 和 Height 绑定到视图模型中的相同值，您可以根据需要更改该值，或者编写一个转换器，根据检测到的屏幕将硬编码的 Width/Height 值转换为实际值尺寸/分辨率或设置。