Question

我正在尝试显示一个// This is a function declaration that associates a name with the function function donethingy(){ // thyLy.textDecoration.overline; alert("done"); } // Then the function can be referred to or invoked by name thyLy.onclick = donethingy;，它只有一个展开的项目和一个显示多个项目的行来替换一行，比方说三个。

在这两种情况下，项目都应填充页面宽度。这意味着包含多个项目的行应该将空间划分为三个相等的区域。

我的尝试是使用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);
    }
}

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

我跟着this article。

Answer 1

您需要为VariableSizedWrapGrid将Orientation设置为“Horizontal”。您必须为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>

See screenshot

在Universal Application中每行具有动态项目编号的GridView

1 个答案: