通用應用程序中每行的動態項目編號的GridView

我試圖顯示GridView，其中只有一個擴展項目和一行顯示很多項目，比如說三個。通用應用程序中每行的動態項目編號的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。

來源

2017-02-21 fillobotto

您需要爲VariableSizedWrapGrid設置方向爲「水平」。你將不得不爲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

來源

2017-02-23 02:53:19 Skyblue

通用應用程序中每行的動態項目編號的GridView

回答

相關問題