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

然而，这会产生这样的输出（矩形项，而不是正方形）：

Ouput

如果有人比我更了解XAML和WinRT（地铁）开发，我会很感激，可以为我解释一下，也许可以给我一个有效的例子。

感谢名单！

修改

我得到了一个提示，将我的边框包装在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>

这会产生此输出：

output2

现在它似乎伸展到了一个平方，但它在屏幕外突然出现。我还在几个resoultions和屏幕尺寸中运行了这个例子，它显示了相同的输出，这意味着它可以正确缩放。

帮助将不胜感激。

感谢名单！

Answer 1

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

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

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

Gridview项目作为WinRT（metro）中的正方形

1 个答案: