3

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

在此处输入图像描述

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

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

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();
    }
}
}
4

1 回答 1

4

首先，不要使用List，使用ObservableCollection。这样，CollectionViewSource将响应Collection.

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

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

于 2013-07-29T17:26:30.577 回答