通用应用程序中每行具有动态项目编号的 GridView

Question

我正在尝试显示一个 GridView，它交替显示只有一个展开项目的行和显示许多项目的行，比方说三个。

在这两种情况下，项目都应填满页面宽度。这意味着包含多个项目的行应将 space 分成三个相等的区域。

我的尝试是使用 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 的 Orientation 设置为 "Horizontal"。并且您必须为 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

通用应用程序中每行具有动态项目编号的 GridView

GridView with dynamic item number per row in Universal Application

c#

gridview

uwp

windows-10-universal