如何创建可变大小的组面板以适应 Windows 8 XAML 中的项目 [英] How to create variable sized group panels to fit the items in Windows 8 XAML

问题描述

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

The problem I'm having is the grouped grid view sizes all of its groups to the size of the first group as in the screenshot below:

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

I need the groups to have different widths to accomodate their children. In this case the second group should be wider and the third group should be narrower.

我编写的测试应用代码如下:

The code for the test app I wrote is as below:

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

推荐答案

首先，不要使用List，使用ObservableCollection.这样，CollectionViewSource 将响应 Collection 中的更改.

First of all, don't use List, use ObservableCollection. This way, the CollectionViewSource will respond to the changes in the Collection.

其次，您的 GridView.ItemsPanel 不应该是 VariableSizedWrapGrid，而应该是某种 StackPanel，例如 VirtualizingStackPanel.

Second, your GridView.ItemsPanel should not be a VariableSizedWrapGrid, but likely some kind of StackPanel, such as a VirtualizingStackPanel.

注意:GroupStyle.Panel 应该是一个 VariableSizedWrapGrid，你目前正在做的正确.

Note: The GroupStyle.Panel should be a VariableSizedWrapGrid, which you are currently doing correctly.

这篇关于如何创建可变大小的组面板以适应 Windows 8 XAML 中的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！