与Win8.1到Win10不同的Win10布局

Question

我正在努力将Windows8.1应用程序迁移到Windows10通用应用程序，并且在我的GridView中得到了不同的外观。

在Windows 8.1中，它的行为正确，并显示两行(或更多与高度有关)：

​

但是，在Windows 10中，不管高度如何，我只得到一行：

​

显然，GridView有足够的空间包装成两行，但是不管高度如何，它仍然是一行。两者都使用相同的XAML定义：

<GridView Name="MyGridView"
          Margin="0,50,0,0"
          IsItemClickEnabled="True"
          ItemsSource="{Binding AppPages}">
    ....
</GridView>

我在Windows 10应用程序中尝试过不同的ItemsPanel变体，但我要么得到1行水平布局，要么得到1列垂直布局。在Windows 10中是否有新的属性或我需要设置的东西，以便允许GridView在高度允许的情况下显示多行？

编辑

所描述的行为只是使用默认的GridView设置。我也尝试了以下几点：

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid Orientation="Vertical" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

同时具有Vertical方向和Horizontal。但是Windows8.1应用程序和Windows 10应用程序的布局并没有指定任何内容，只有GridView和它的ItemTemplate。下面是GridView的整个XAML

        <GridView x:Name="MainGridView"
                  IsItemClickEnabled="True"
                  ItemsSource="{Binding AppPages}"
                  SelectionMode="None">
            <interactivity:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="ItemClick">
                    <core:CallMethodAction MethodName="GridViewItemClick" TargetObject="{Binding Mode=OneWay}" />
                </core:EventTriggerBehavior>
            </interactivity:Interaction.Behaviors>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Border Width="200"
                            Height="200"
                            BorderBrush="White"
                            BorderThickness="2">
                        <Grid>
                            <Image Width="150"
                                   Height="150"
                                   VerticalAlignment="Bottom"
                                   Source="{Binding Path=ImageSource}" />
                            <TextBlock HorizontalAlignment="Center"
                                       FontSize="12"
                                       FontWeight="Bold"
                                       Foreground="White"
                                       Text="{Binding Path=PageName}" />
                        </Grid>
                    </Border>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="Margin" Value="10" />
                </Style>
            </GridView.ItemContainerStyle>
        </GridView>

Answer 1

我可以看到您尝试的是使用VariableSizedWrapGrid作为ItemPanel，正如我所说的，默认情况下，它在UWP应用程序和Win8.1应用程序中都使用ItemsWrapGrid作为ItemPanel，您可以在空白的uwp应用程序或空白的Windows8.1应用程序中测试它。

只是在这两个应用程序中测试了您的代码，当使用VariableSizedWrapGrid作为ItemPanel时，GridView控件的布局与Win10 8.1到Win10的布局不同，因为它们在您的图片中。

因此，我想您可能会在代码中的某个地方为您的GridView应用使用GridView的样式，例如，当没有定义样式的x:Key属性时，可以将该样式应用于页面中的所有目标类型控件。

通常，如果每个瓷砖/单元格是基于内容的可变大小，则使用VariableSizedWrapGrid。但是从你的照片上看，我认为你的GridView的每一项都有相同的尺寸。

因此，在本例中，您只需修改样式如下：

<Page.Resources>
    <Style x:Key="GridViewStyle1" TargetType="GridView">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

并特别将这种样式应用于您的GridView：

<GridView x:Name="MainGridView"
          Style="{StaticResource GridViewStyle1}"
          ItemsSource="{Binding AppPages}"
          IsItemClickEnabled="True"
          SelectionMode="None">