在Universal Application中每行具有动态项目编号的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>

这就是我得到的。 这就像第一个宽项目将其宽度传播到其他元素。

我跟着这篇文章 。

Answer 1

您需要将Directionation设置为VariableSizedWrapGrid的“Horizo​​ntal”。 您必须为DataPamplate中的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>

见截图