Windows store apps 响应网格视图

我想为我的Windows Universal应用程序创建一个响应性GridView。我基本上想要一个GridView，其中列水平地填充整个空间

XAML应该是这样的，但我不知道我必须使用ItemsPanelTemplate的哪个组合

<Page>

<Page.Resources>
    <CollectionViewSource x:Name="groupedItemsViewSource" IsSourceGrouped="true"/>
</Page.Resources>

<GridView ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- ? -->
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <!-- header -->
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <!-- ? -->
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </GridView.GroupStyle>
    <GridView.ItemTemplate>
        <DataTemplate>
            <!-- item -->
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

</Page>

---

我理解你的问题。老实说，你最终可能不会这样做。但也许你只是想学习如何去做。因此，为了学术研究，我将回答你的问题

使用此XAML：

<local:MyGridView>

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid   Background="{Binding Color}"
                Margin="10"
                Grid.RowSpan="{Binding RowSpan}" 
                Grid.ColumnSpan="{Binding ColumnSpan}"
                Grid.Row="{Binding Row}" 
                Grid.Column="{Binding Column}">
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

    <GridView.Items>
        <local:MyItem Color="Gainsboro" Row="0" RowSpan="1" Column="0" ColumnSpan="3" />
        <local:MyItem Color="Red" Row="1" RowSpan="1" Column="0" ColumnSpan="1" />
        <local:MyItem Color="Green" Row="1" RowSpan="1" Column="1" ColumnSpan="1" />
        <local:MyItem Color="Blue" Row="1" RowSpan="1" Column="2" ColumnSpan="1" />
        <local:MyItem Color="Yellow" Row="2" RowSpan="1" Column="0" ColumnSpan="1" />
        <local:MyItem Color="Orange" Row="2" RowSpan="1" Column="1" ColumnSpan="1" />
    </GridView.Items>

</local:MyGridView>

这将为您提供您在问题中所要求的内容

现在，让我们谈谈为什么您可能不希望使用这种方法。单元格的动态大小不是

WrapGrid

的功能，WrapGrid是

GridView

的本机面板。因此，我们必须切换到

网格

，它没有动态行/列。我是否可以更新此示例以创建动态行/列？当然但这不是重点

在内部，MS Design建议您根据

GridView

的宽度稍微更改边距。这本身并不是一个小壮举，因为您无法将数据绑定到边距。但最终的视觉效果实际上有了很大的改善，因为随着宽度的减小，页面上的空间会增加，而不会弄乱数据项的大小。一旦达到某个窄宽度，就可以让本机

WrapGrid

为您删除列，而不是保持固定的列数

后退一分钟，并考虑如何使用初始逻辑使用自适应逻辑编写<代码> GRIDVIEW < /代码>中的每个数据项。对于大多数应用来说，这种复杂性是不必要的。话虽如此，我对你的应用程序了解程度不如你。你是开发者，不是我。你可以决定什么最适合你的项目

你可能会问自己，微软是如何改变利润率的？答案是使用VSM我们等待一定的宽度，当它出现时，我们显式地设置边距。根据您决定使用的控件类型，您可能需要以某种方式注入边距，但一般来说，这只是一个VSM操作。这很重要，因为它不是一个滑动比例。也就是说，要么是更宽的边际，要么是更窄的边际，两者之间什么都没有

伙计，我希望这是有道理的

---

祝你好运

谢谢你的回答，杰瑞。我理解你的方法，但我不知道如何在我的应用程序中使用它，因为我想要一些我之前没有提到的东西。首先，我希望保留

GroupStyle.HeaderTemplate

，因为它的内容固定在顶部。第二，我使用组。您的

Grid

方法将每个组呈现在同一位置。我想基本上保留

GridView

逻辑，只替换呈现每组项目的面板。我不介意写我自己的

面板

。我不知道必须设置哪个模板才能更改

GridView

的这种行为。

public class MyGridView : GridView
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        var container = base.GetContainerForItemOverride() as FrameworkElement;
        if (container == null) return container;

        var content = ItemTemplate.LoadContent() as FrameworkElement;
        if (content == null) return container;

        // sync the container grid dependency properties with the content
        var binding = content.GetBindingExpression(Grid.RowProperty);
        if (binding != null)
            container.SetBinding(Grid.RowProperty, content.GetBindingExpression(Grid.RowProperty).ParentBinding);
        binding = content.GetBindingExpression(Grid.RowSpanProperty);
        if (binding != null)
            container.SetBinding(Grid.RowSpanProperty, binding.ParentBinding);
        binding = content.GetBindingExpression(Grid.ColumnProperty);
        if (binding != null)
            container.SetBinding(Grid.ColumnProperty, binding.ParentBinding);
        binding = content.GetBindingExpression(Grid.ColumnSpanProperty);
        if (binding != null)
            container.SetBinding(Grid.ColumnSpanProperty, binding.ParentBinding);

        return container;
    }
}