如何创建可变大小的组面板以适合Windows 8 XAML中的项目

Question

我遇到的问题是分组网格视图将其所有组的大小调整为第一组的大小，如下面的屏幕截图所示：

我需要这些团体有不同的宽度来容纳他们的孩子。 在这种情况下，第二组应该更宽，第三组应该更窄。

我写的测试应用程序的代码如下：

XAML（MainPage.xaml）

<Page x:Class="GroupingBugTest.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:local="using:GroupingBugTest"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
<Page.Resources>
    <CollectionViewSource x:Name="GroupedCollectionViewSource" IsSourceGrouped="True" />
</Page.Resources>

<Grid Margin="100" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <GridView x:Name="GroupingGridView"
              ItemsSource="{Binding Source={StaticResource GroupedCollectionViewSource}}"
              SelectionMode="None">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Margin="20"
                                       Background="MidnightBlue"
                                       Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock FontSize="24"
                                   Foreground="White"
                                   Text="{Binding Key}" />
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>

                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Margin="20"
                                               Background="CornflowerBlue"
                                               Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>
</Grid>

代码背后（MainPage.xaml.cs）

using System.Collections.Generic;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace GroupingBugTest
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.  The Parameter
    /// property is typically used to configure the page.</param>
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        PopulateGroupedCollectionViewSource();
    }

    private void PopulateGroupedCollectionViewSource()
    {
        List<GroupInfoList<string>> groupedCollection = new List<GroupInfoList<string>>();

        var firstGroup = new GroupInfoList<string>() { Key = "FIRST GROUP (5 items)" };
        var secondGroup = new GroupInfoList<string>() { Key = "SECOND GROUP (10 items)" };
        var thirdGroup = new GroupInfoList<string>() { Key = "THIRD GROUP (2 items)" };

        for (int i = 1; i <= 10; i++)
        {
            if (i <= 5) //add 5 items to first group
            {
                firstGroup.Add(i.ToString());
            }

            secondGroup.Add(i.ToString()); //add 10 items to second group

            if (i <= 2) //add 2 items to third group
            {
                thirdGroup.Add(i.ToString());
            }
        }

        groupedCollection.Add(firstGroup);
        groupedCollection.Add(secondGroup);
        groupedCollection.Add(thirdGroup);

        GroupedCollectionViewSource.Source = groupedCollection;
    }
}

//Taken from Microsoft Windows 8 code samples
public class GroupInfoList<T> : List<object>
{
    public object Key { get; set; }

    public new IEnumerator<object> GetEnumerator()
    {
        return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();
    }
}
}

Answer 1

首先，不要使用List ，使用ObservableCollection 。 这样， CollectionViewSource将在这个变化的响应Collection 。

其次，您的GridView.ItemsPanel不应该是VariableSizedWrapGrid ，但可能是某种StackPanel ，例如VirtualizingStackPanel 。

注意： GroupStyle.Panel 应该是一个VariableSizedWrapGrid ，您当前正在正确执行。