Xaml WinRT（metro）中以正方形显示的Gridview项

这件事我已经苦思冥想了好几天了，没法让它发挥作用。 也许我不是我希望的那样好的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>

X

这是我的代码：

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)
    {
    }
}

公共密封部分类空白页：第页
{
公共空白页（）
{
this.InitializeComponent（）；
添加（新的ListViewItem{Content=1}）；
添加（新的ListViewItem{Content=2}）；
添加（新的ListViewItem{Content=3}）；
}
/// 
///当此页面即将显示在框架中时调用。
/// 
///描述如何访问此页的事件数据。参数
///属性通常用于配置页面。
受保护的覆盖无效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>

X

这将产生以下输出：

现在，它似乎把自己伸展到了一个正方形，但它却在屏幕外重新定位。我还在多个资源和屏幕大小中运行了这个示例，它显示了相同的输出，这意味着它可以正确缩放

我们将不胜感激

---

塔克斯

您的已注释的绑定接近于某种程度的工作-只有您需要绑定到实际宽度：

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

---

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

谢谢您的快速回复。但是，高度的属性绑定不起作用，无论是宽度还是实际宽度（这就是它被注释掉的原因）。Windows 8将根据给定的分辨率调整元素的大小，但如果屏幕更大（分辨率相同），则不会调整它们的大小。这对我来说是合乎逻辑的，因为如果我指定我的方块应该是50x50px，那么无论屏幕大小如何，它们都将保持不变，因为像素总量是相同的。如果您在VS11中运行内置平板电脑模拟器，您将看到。。。。。。。。我可以将高度和宽度值保存在ViewModel中，并拥有一个转换器，根据屏幕大小根据需要转换这些值。但这正是我想要避免的。首先，我不喜欢在ViewModels中使用GUI逻辑（它属于视图）。其次，我应该适应多少屏幕尺寸？这将是一个混乱的转换器。我只想让我的方块尽可能地扩大。还有，有人能给我解释一下为什么它们呈长方形吗？这是GridView的内置样式吗？我想至少他们会在屏幕上伸展自己？是什么限制了它们？你不需要在vm中有转换器输入，你可以在XAML中显式地指定它们。对于不同的屏幕大小和一些需要维护的东西，它不是仍然有很多“设置”吗。我宁愿有一些没有这个功能的东西。好吧，你必须决定要么让WinRT为你扩展，要么尝试用你自己的方法覆盖它。。。您可能应该阅读以下内容：