不同於Win8.1到Win10的GridView佈局

Question

我正在將Windows 8.1應用程序遷移到Windows 10通用應用程序，並且我在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。但Windows 8.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應用程序或一個空白的Windows 8.1應用程序中測試它。

只是測試兩個應用程序代碼，使用VariableSizedWrapGrid爲ItemPanel，GridView控制佈局從Win8.1不同至Win10，因爲它們在你的照片時。

所以我想你可能申請使用VariableSizedWrapGrid樣式爲您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">