ユニバーサルアプリケーション内の行ごとに動的な項目番号を持つGridView

Question

GridViewを表示すると、1つの展開された項目と多くの項目を表示する行が交互に表示されます。

どちらの場合も、項目はページ幅を埋める必要があります。これは、複数の項目を含む行が3つの等しい面積で空間を分割する必要があることを意味します。

私は、アイテムパネルとしてVariableSizedWrapGridを使用しました。

<GridView x:Name="rowGrid" IsSwipeEnabled="False" ItemsSource="{Binding AppCollection}" 
     ItemTemplateSelector="{StaticResource HomeDataTemplateSelector}" SelectionMode="None" IsItemClickEnabled="True" Margin="0,0,12,0"> 
<GridView.ItemsPanel> 
    <ItemsPanelTemplate> 
     <VariableSizedWrapGrid /> 
    </ItemsPanelTemplate> 
</GridView.ItemsPanel> 

それから私は、データテンプレートセレクタ内ColumnSpanプロパティを設定します。ここでは

public class HomeDataTemplateSelector : DataTemplateSelector 
{ 
    public DataTemplate DefaultTemplate { get; set; } 
    public DataTemplate WideItemTemplate { get; set; } 

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) 
    { 
     var lv = GetListView(container); 
     if (lv != null) 
     { 
      var i = lv.Items.IndexOf(item); 
      if (i % 4 == 0) 
      { 
       VariableSizedWrapGrid.SetColumnSpan(container as UIElement, 3); 
       return WideItemTemplate; 
      } else { 
       VariableSizedWrapGrid.SetColumnSpan(container as UIElement, 1); 
       return DefaultTemplate; 
      } 

     } 
     return DefaultTemplate; 
    } 

    public static GridView GetListView(DependencyObject element) 
    { 
     var parent = VisualTreeHelper.GetParent(element); 
     if (parent == null) 
     { 
      return null; 
     } 
     var parentListView = parent as GridView; 
     return parentListView ?? GetListView(parent); 
    } 
} 

は、完全性について2つのテンプレートは、次のとおりです。

<DataTemplate x:Key="DefaultItemDataTemplate"> 
    <StackPanel Height="170" Background="Transparent"> 
     ... 
    </StackPanel> 
</DataTemplate> 

<DataTemplate x:Key="WideItemDataTemplate"> 
    <StackPanel Height="170" Background="Transparent"> 
     ... 
    </StackPanel> 
</DataTemplate> 

これは、私は何であります取得。これは、最初のワイドアイテムがその幅を他のエレメントに伝播するようなものです。

私はthis articleを追いました。

Answer 1

VariableSizedWrapGridでは、Orientationを "Horizo​​ntal"に設定する必要があります。また、DataTemplateにあるStackPanelの幅を設定する必要があります。その後、それは動作します。

<Page.Resources> 
    <DataTemplate x:Key="DefaultItemDataTemplate"> 
     <StackPanel Height="170" Background="Transparent"> 
      <Image Source="{Binding}"></Image> 
     </StackPanel> 
    </DataTemplate> 

    <DataTemplate x:Key="WideItemDataTemplate"> 
     <StackPanel Height="170" Width="250" Background="Transparent"> 
      <Image Source="{Binding}"></Image> 
     </StackPanel> 
    </DataTemplate> 

    <local:HomeDataTemplateSelector x:Name="HomeDataTemplateSelector" DefaultTemplate="{StaticResource DefaultItemDataTemplate}" WideItemTemplate="{StaticResource WideItemDataTemplate}"></local:HomeDataTemplateSelector> 
</Page.Resources> 

<Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <GridView x:Name="rowGrid" IsSwipeEnabled="False" ItemsSource="{Binding AppCollection}" 
    ItemTemplateSelector="{StaticResource HomeDataTemplateSelector}" SelectionMode="None" IsItemClickEnabled="True" Margin="0,0,12,0"> 
     <GridView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <VariableSizedWrapGrid Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 
    </GridView> 
</Grid> 

See screenshot