GridView с динамическим номером позиции в строке в универсальном приложении

Question

Я пытаюсь отобразить GridView, который чередует строку с одним расширенным элементом и строкой, которая отображает много элементов, скажем, три.

В обоих случаях элементы должны заполнять ширину страницы. Это означает, что строка, содержащая несколько элементов, должна разделить пространство на три равные области.

Моя попытка была использовать 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); 
    } 
} 

Здесь находятся два шаблона для полноты:

<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 вам необходимо установить ориентацию как «горизонтальную». И вы должны установить ширину для StackPanel, которая находится в DataTemplate. Тогда это сработает.

<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