GridView のグループ化はCollectionViewSourceを使用して行うことができます。Xaml で、ページの Resources セクションに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();
}
}
これで完了です。
出力は次のようになります
