1

首先，我对 Windows 8 和开发 Windows 商店应用程序非常陌生。

我正在尝试将 GridView 控件添加到我当前的应用程序中，但它的外观存在一些问题：

在此处输入图像描述

如您所见，我的小组不平衡。理想情况下，我希望所有组看起来都像第一组。这是我一直遵循的教程：http: //www.wintellect.com/blogs/sloscialo/windows-8-gridview-and-variable-sized-items在某些时候我想做每组的第一块比其他块大。

这是我使用的代码：

.xaml 文件：

    <GridView
        x:Name="itemGridView"
        Grid.RowSpan="2"
        Padding="120, 130, 0, 0"
        ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
        ItemContainerStyleSelector="{StaticResource VariableSizedStyleSelector}"
        SelectionMode="None"
        IsSwipeEnabled="False"
        IsItemClickEnabled="True">

        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="5, 0, 0, 0">
                            <Button
                                AutomationProperties.Name="Group Title"
                                Style="{StaticResource TextPrimaryButtonStyle}" >
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Title}" Margin="0, 0, 0, 0" Style="{StaticResource GroupHeaderTextStyle}" Opacity=".25" />
                                </StackPanel>
                            </Button>
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Margin="0, 10, 50, 0" />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
    </GridView>

和项目风格：

<Style x:Key="DefaultGridViewItemStyle"
   TargetType="GridViewItem">
    <Setter Property="VariableSizedWrapGrid.RowSpan" Value="4" />
    <Setter Property="VariableSizedWrapGrid.ColumnSpan" Value="2" />
    <Setter Property="Background" Value="#E5E5E5" />
</Style>

请帮忙！

谢谢

4

1 回答 1

1

GridView 分组可以使用CollectionViewSource完成。在您的 Xaml 中，在页面的资源部分添加一个CollectionViewSource 。确保IsSourceGrouped设置为 true：

<Page.Resources>
    <CollectionViewSource x:Name="FruitsCollectionViewSource" IsSourceGrouped="True"/>
</Page.Resources>

我们可以稍后从代码隐藏中设置CollectionViewSource的Source，

然后CollectionViewSource (FruitsCollectionViewSource) 应该设置为您的GridView的ItemsSource

 <GridView
        ItemsSource="{Binding Source={StaticResource FruitsCollectionViewSource}}"
        x:Name="FruitGridView"
        Padding="330,20,40,0"
        SelectionMode="None"
        IsSwipeEnabled="false"
        IsItemClickEnabled="True"
        ItemClick="FruitGridView_ItemClick">

          //// GridView ItemTemplate

            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Left" Width="250" Height="250">
                        <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
                            <Image Source="{Binding Path=FruitImageSource}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                        </Border>
                        <StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Fruit Name" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/>
                                <TextBlock Text="{Binding Path=FruitName}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Fruit Rate" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,87,10"/>
                                <TextBlock Text="{Binding Path=FruitRate}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
                            </StackPanel>                          
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>

            ////Group Style

            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="30" FontFamily="Segoe UI Light" />
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>

             //// Item panel Style

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid GroupPadding="0,0,70,0" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>                     
        </GridView>

现在您可以从代码隐藏将项目添加到您的FruitList

创建一个ObservableCollection FruitList

public ObservableCollection<Fruit> FruitList { get; set; }

创建一个模型类 Fruit

    public class Fruit
    {
        public string FruitName { get; set; }
        public string FruitImageSource { get; set; }
        public string FruitRate { get; set; }
    }

然后将项目添加到FruitList

    FruitList.Add(new Fruit { FruitName = "Blackberry", FruitImageSource = "../Assets/blackberry.jpg", FruitRate = "150" });
    FruitList.Add(new Fruit { FruitName = "Apple", FruitImageSource = "../Assets/apple.jpg", FruitRate = "150" });
    FruitList.Add(new Fruit { FruitName = "Orange", FruitImageSource = "../Assets/orange.jpg", FruitRate = "250" });
    FruitList.Add(new Fruit { FruitName = "Bilberry", FruitImageSource = "../Assets/bilberry.jpg", FruitRate = "250" });
    FruitList.Add(new Fruit { FruitName = "Banana", FruitImageSource = "../Assets/banana.jpg", FruitRate = "50" });
    FruitList.Add(new Fruit { FruitName = "Amla", FruitImageSource = "../Assets/amla.jpg", FruitRate = "120" });

现在你可以设置你CollectionViewSource的 Source 首先我们需要对FruitList进行排序。然后使用此GetGroupsByLetter()方法按升序或降序对水果名称进行分组。

        FruitList = new ObservableCollection<Fruit>(FruitList .OrderBy(c => c.FruitName));
        FruitsCollectionViewSource.Source = GetGroupsByLetter();

GetGroupsByLetter ()对FruitList中的项目进行分组。

    internal List<GroupInfoList<object>> GetGroupsByLetter()
    {
        var groups = new List<GroupInfoList<object>>();

        var query = from item in FruitList
                    orderby ((Fruit)item).FruitName
                    group item by ((Fruit)item).FruitName[0] into g
                    select new { GroupName = g.Key, Items = g };
        foreach (var g in query)
        {
            var info = new GroupInfoList<object>();
            info.Key = g.GroupName;
            foreach (var item in g.Items)
            {
                info.Add(item);
            }

            groups.Add(info);
        }

        return groups;
    }

组信息列表：

    public class GroupInfoList<T> : List<object>
    {
        public object Key { get; set; }

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

现在你完成了。

您的输出将如下所示

在此处输入图像描述

于 2014-05-06T12:46:14.543 回答