All geek questions in one place

Grouping a GridView in a Windows 8 Metro App

Can someone give me some tips on how to group in the GridView app for Metro, as shown in the screenshot below.

zoomed out image

This screenshot is from Developer Resources for Windows Metro Apps , but unfortunately there is no description of how to do this.

I have the following code snippet:

Xaml:

... <Page.Resources> <CollectionViewSource x:Name="cvs" IsSourceGrouped="true"/> </Page.Resources> <Grid Background="{StaticResource DefaultBackground}"> <GridView x:Name="DefaultGridView" ItemsSource="{Binding Source={StaticResource cvs}}"> <GridView.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Rectangle Fill="{Binding}" Width="100" Height="100" Margin="0 0 5 0"/> </StackPanel> </DataTemplate> </GridView.ItemTemplate> <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> <GridView.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Vertical" /> </ItemsPanelTemplate> </GridView.ItemsPanel> </GridView> </Grid> ...

FROM#:

In Code-Behind, I do the following in the OnNavigateTo method:

  List<string> strList = new List<string>() { "Red", "Red", "Red", "Red", "Red", "Red", "Green", "Green","Green","Green","Green", "Blue","Blue","Blue","Blue" }; var groupedList = from s in strList group s by s into g orderby g.Key select g; cvs.Source = groupedList;

No matter what I do, I can not group the items in the continuation list, as in the Screenshot. The code leads to separate lists, grouped side by side.

+6
source share
4 answers

I may have a solution. In my project, I had to create a contact list in alphabetical order, for example, the People application.

I used GridView (with this sample ), CollectionViewSource and the wrapper I found in the WinRT XAML Toolkit (you can get the NuGet package or copy / paste the source code). This allows you to put your items in columns.

Example

enter image description here

ViewModel

 class ContactListViewModel { public ContactListViewModel() { ContactSource = new CollectionViewSource(); Contacts = new ObservableCollection<Contact>(); Contacts.Add(new Contact("Gates","Bill")); Contacts.Add(new Contact("Bush","Georges")); Contacts.Add(new Contact("Obama","Barack")); Contacts.Add(new Contact("Hollande","François")); Contacts.Add(new Contact("Affleck","Ben")); Contacts.Add(new Contact("Allen","Woody")); Contacts.Add(new Contact("Hendrix","Jimi")); Contacts.Add(new Contact("Harrison", "Georges")); Contacts = new ObservableCollection<Contact>(Contacts.OrderBy(c => c.Name)); ContactSource.Source = GetGroupsByLetter(); ContactSource.IsSourceGrouped = true; } #region Contacts public ObservableCollection<Contact> Contacts { get; protected set; } public CollectionViewSource ContactSource { get; protected set; } #endregion internal List<GroupInfoList<object>> GetGroupsByLetter() { List<GroupInfoList<object>> groups = new List<GroupInfoList<object>>(); var query = from item in Contacts orderby ((Contact)item).Name group item by ((Contact)item).Name[0] into g select new { GroupName = g.Key, Items = g }; foreach (var g in query) { GroupInfoList<object> 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(); } } }

View

  <DataTemplate x:Key="contactTemplate"> <Grid Width="225" Height="75" Background="#55FFFFFF"> <Grid Margin="10"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="20"> <Run Text="{Binding FirstName}"/> <Run Text="{Binding Name}"/> </TextBlock> <TextBlock Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Email}" FontSize="13" Foreground="#FFDDDDDD"/> </Grid> </Grid> </DataTemplate> <DataTemplate x:Key="letterTemplate"> <Grid Margin="5,0,0,5" Width="225"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <TextBlock Text="{Binding Key}" Style="{StaticResource GroupHeaderTextStyle}" VerticalAlignment="Center"/> <Rectangle Grid.Row="1" Fill="#BBEEEEEE" Height="1" Margin="0,7,0,0"/> </Grid> </DataTemplate> </Page.Resources> <!-- This grid acts as a root panel for the page that defines two rows: * Row 0 contains the back button and page title * Row 1 contains the rest of the page layout --> <Grid Style="{StaticResource LayoutRootStyle}"> <Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!-- Back button and page title --> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="backButton" Click="GoBack" Style="{StaticResource BackButtonStyle}" Opacity="0"/> <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Manager" Style="{StaticResource PageHeaderTextStyle}"/> </Grid> <GridView Grid.Row="1" ItemsSource="{Binding Path=ContactSource.View}" SelectionMode="Multiple" IsSwipeEnabled="false" IsItemClickEnabled="True" Padding="116,10,40,46" ItemTemplate="{StaticResource contactTemplate}"> <GridView.ItemsPanel> <ItemsPanelTemplate> <local:WrapPanel Orientation="Vertical"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <GroupStyle HeaderTemplate="{StaticResource letterTemplate}"> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </GridView> </Grid>
+5
source

Cannot use default grid styles.

You may need to use one list of ungrouped elements and add special elements with a different element template ...

Unfortunately

+1
source

I would add headers as elements in gridview and use TemplateSelector to display elements correctly ...

+1
source

Source: https://habr.com/ru/post/911606/

More articles:


All Articles