I have a list item with Key and Value pair. I have binding the Key in list box its display the correct output. But Value is not showing. I know this is very basic question. I am New for WPF. I have referred many sites and answers But I don't know where I have done mistake on my code. Please anybody help me to achieve this. My sample code is mentioned below,
MainWindow.xaml
<ListBox
Name="memberCollection"
Grid.Row="0"
MinWidth="150"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0"
ItemsSource="{Binding MainValues}">
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" FontWeight="Bold" />
<ItemsControl ItemsSource="{Binding Values}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Name}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListBox.GroupStyle>
</ListBox>
MainViewModel
public MainViewModel(TestCollection testCollection)
{
MainValues = new ObservableCollection<Details>();
TestCollections = testCollection;
foreach (var _val in TestCollection.GroupingMainCollection)
{
MainValues.Add(new Details() { Key = _val.Key, Values = _val.Value});
}
CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(MainValues);
PropertyGroupDescription groupDescription = new PropertyGroupDescription("Key");
view.GroupDescriptions.Add(groupDescription);
}
DetailsModel
public class Details
{
public string Key { get; set; }
public ObservableCollection<IValue> Values { get; set; }
}
IValue
public interface IValue
{
string Name { get; set; }
string ID { get; set; }
}
You don't want to display Values collection in group header but under group content, so move ItemsControl from under Expander header and set it as ItemTemplate.
Here is working code:
<ListBox
Name="memberCollection"
Grid.Row="0"
MinWidth="150"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0"
ItemsSource="{Binding MainValues}">
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" FontWeight="Bold" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Values}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Name}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Edit:
If I understand you correctly, you want to display collection of items and then choose only single item within collection of collection of items!
Checkout code below which uses ItemsControl instead of using ListView/ListBox:
<ScrollViewer>
<ItemsControl ItemsSource="{Binding MainValues}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="1" Padding="5" Margin="5">
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Key}" FontWeight="Bold" />
</StackPanel>
</Expander.Header>
<ListBox ItemsSource="{Binding Values}"
BorderThickness="0,1,0,0" Margin="0,5,0,0"
DisplayMemberPath="Name" SelectedValuePath="Id" />
</Expander>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Related
I am trying to display the listview group items as like in the attached screenshot, but still i have facing issue while displaying group view items
Requirement:
Group header needs to display in horizontal alignment and corresponding group items are needs to be aligned in vertical alignment
<ListView
x:Name="listview"
BorderThickness="0"
ItemsSource="{Binding Source={StaticResource cvs}}"
SelectedItem="{Binding SelectedProduct}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Product}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock
Padding="5,0,0,0"
FontSize="14"
FontWeight="Bold"
Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<StackPanel Orientation="Vertical">
<ContentPresenter/>
<ItemsPresenter/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Please suggestion a solution to achieve this.
To change the orientation you would have to set the GroupStyle.Panel. Because of your requirement to arrange the items multiline you should use a WrapPanel.
To make it behave properly you should disable the horizontal ScrollViewer of the ListView (to allow the items to wrap) and give the ListView a fixed height (in order to make the vertical ScrollViewer visible).
Since you don't modify the layout of the GroupItem and the ListView you can safely remove the GroupStyle.ContainerStyle (at least the Controltemplate override) and the ListView.ItemsPanel template override. In fact setting ItemsPanelTemplate of a ListBox or ListView explicitly to StackPanel or generally to something other than a VirtualizingPanel removes the ability to virtualize items. UI virtualization significantly improves performance, so you don't want to disable it.
<ListView ItemsSource="{Binding Source={StaticResource cvs}}"
Height="400"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock
Padding="5,0,0,0"
FontSize="14"
FontWeight="Bold"
Text="{Binding Name}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
You should define the Panel property for GroupStyle and you can remove the ItemsPanel for the ListView:
<GroupStyle.Panel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
Complete code for setting the groups for anyone interested:
<Window.Resources>
<CollectionViewSource x:Key='cvs'
Source="{Binding Path=Products}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="ProductType" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<Grid>
<ListView
x:Name="listview"
BorderThickness="0"
ItemsSource="{Binding Source={StaticResource cvs}}"
SelectedItem="{Binding SelectedProduct}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Product}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock
Padding="5,0,0,0"
FontSize="14"
FontWeight="Bold"
Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<StackPanel Orientation="Vertical">
<ContentPresenter/>
<ItemsPresenter/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</Grid>
Regarding the model used: I set up a simple ProductCvs class
public class ProductCvs
{
public string Product { get; set; }
public string ProductType { get; set; }
}
I need some advice. We noticed unusual behavior within the ScrollViewer. I have a StackPanel with whom I am more items including ListBox when the StackPanel placed in a ScrollViewer, when loading data to the listbox, a program for a brief moment freezes. When I am alone ListBox but everything works normally, no freezing of the program.
Here is my code:
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel x:Name="tStack" >
<Grid Height="300">
</Grid>
<Grid Height="300">
</Grid>
<ListBox x:Name="ListBox1" ItemsSource="{Binding AlbumsCvs.View, IsAsync=True}"
Style="{StaticResource ListBoxAlbumsTracksStyles}"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
VirtualizingStackPanel.VirtualizationMode="Recycling" >
<ListBox.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource AlbumsHeader}" />
</ListBox.GroupStyle>
</ListBox>
</StackPanel>
</ScrollViewer>
<Style x:Key="ListBoxAlbumsTracksStyles" TargetType="{x:Type ListBox}">
<Setter Property="Padding" Value="0,0,0,0" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate >
<DockPanel>
<Border Background="#00000000"
Height="36"
Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollContentPresenter}}}">
<DockPanel>
<TextBlock x:Name="TrackNumber"
DockPanel.Dock="Left" Margin="2,0,5,0"
Text="{Binding TrackNumber}"
VerticalAlignment="Center"
FontSize="13"
MinWidth="17"
Foreground="Black"/>
<DockPanel>
<TextBlock DockPanel.Dock="Left"
Text="{Binding TrackTitle}"
TextAlignment="Left"
FontSize="13"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
TextTrimming="CharacterEllipsis"
Margin="0,0,2,0"/>
<TextBlock DockPanel.Dock="Right"
Text="{Binding Duration}"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
TextTrimming="CharacterEllipsis"
Margin="0,0,10,0"
FontSize="13" TextAlignment="Right"/>
</DockPanel>
</DockPanel>
</Border>
</DockPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- GroupItem -->
<Style x:Key="AlbumsHeader" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollContentPresenter}}}" Background="#00000000">
<StackPanel Margin="0,0,0,15">
<StackPanel>
<TextBlock Text="{Binding AlbumName}"
DataContext="{Binding Items}"
Margin="0,5,0,0"
HorizontalAlignment="Stretch"
FontSize="20"
FontWeight="Light"
TextTrimming="CharacterEllipsis"
Foreground="Black"/>
<TextBlock Text="{Binding IdAlbum}"
DataContext="{Binding Items}"
Margin="0,0,0,10"
HorizontalAlignment="Stretch"
TextTrimming="CharacterEllipsis"
Foreground="Black"/>
</StackPanel>
<ItemsPresenter HorizontalAlignment="Stretch"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
code behind:
private async Task AlbumsArtistInformation()
{
if (string.IsNullOrEmpty(ArtistName))
return;
ObservableCollection<AlbumsArtistCollections> _albumsArtistCollections =
new ObservableCollection<AlbumsArtistCollections>();
try
{
var search = await spotifyDataService.GetArtists(ArtistName);
if (search == null) throw new ArgumentNullException(nameof(search));
foreach (var _artist in search.Artists.Items.Take(1))
{
this.IdArtist = _artist.Id;
}
var _artistAlbum = await spotifyDataService.GetArtistsAlbumsAsync(this.IdArtist, AlbumType.All);
if (_artistAlbum == null) throw new ArgumentNullException(nameof(_artistAlbum));
_albumsArtistCollections = _artistAlbum;
}
finally
{
// Unbind to improve UI performance
Application.Current.Dispatcher.Invoke(() =>
{
this.Albums = null;
this.AlbumsCvs = null;
});
Application.Current.Dispatcher.Invoke(() =>
{
this.Albums = _albumsArtistCollections;
});
Application.Current.Dispatcher.Invoke(() =>
{
// Populate CollectionViewSource
this.AlbumsCvs = new CollectionViewSource { Source = this.Albums };
//Group by Album if needed
this.AlbumsCvs.GroupDescriptions.Add(new PropertyGroupDescription("IdAlbum"));
});
}
}
Does anyone know how to solve this problem.
Vertically oriented StackPanel provides an unbounded available space for the the ListBox, when it calls MeasureOverride(Size availableSize) method, during layout. Therefore, the ListBox (which by default uses virtualization) should create the whole items and this is why you program freezes for a moment.
Therefore, use a DockPanel instead:
<DockPanel x:Name="tStack" LastChildFill="True" >
<Grid DockPanel.Dock="Top" Height="300">
</Grid>
<Grid DockPanel.Dock="Top" Height="300">
</Grid>
<ListBox DockPanel.Dock="Bottom" x:Name="ListBox1" ItemsSource="{Binding AlbumsCvs.View, IsAsync=True}"
Style="{StaticResource ListBoxAlbumsTracksStyles}"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
VirtualizingStackPanel.VirtualizationMode="Recycling" >
<ListBox.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource AlbumsHeader}" />
</ListBox.GroupStyle>
</ListBox>
</DockPanel>
LastChildFill is true by default. The ListBox should be the last element, in order to fill the space.
As another option, you can set the Height of the ListBox and put the DockPanel in a ScrollViewer or you can consider a Grid with splitters as another option.
I have a Grid column and I have a list view in it. I am populating it from a form which is found in a another column. The values entered in the form gets saved to a list. I want that list displayed in the list view. When the text entered in the form increases the remaining values gets disappeared. I want that column to scroll horizontally so the values don't get disappeared.
This is what I have tried so far..
<Grid Grid.Column="2" Margin="0,0,46,10" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden" Margin="0,0,-60,10">
<ListView x:Name="lsvLessons" IsItemClickEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" BorderThickness="1" SelectionMode="Multiple" ItemsSource="{Binding Source={StaticResource cvsLessons}}" Margin="7,0,62,0">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" HorizontalChildrenAlignment="left"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="-12"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal" Width="375" Height="20" Background="Transparent" HorizontalAlignment="Left">
<StackPanel Width="230" VerticalAlignment="Center" Margin="15,5,0,0">
<TextBlock Text="{Binding Name}" Foreground="white" FontSize="14" Margin="0,3,0,0" FontWeight="Normal" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</Grid>
Someone please help me do this.
Any kind of help is appreciated....
Have you tried to do that w/o the ScrollViewer Control? and Enable the horizontal scroll mode?
Try this:
<Grid Grid.Column="2" Margin="0,0,46,10" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ListView x:Name="lsvLessons" IsItemClickEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" BorderThickness="1" SelectionMode="Multiple" ItemsSource="{Binding Source={StaticResource cvsLessons}}" Margin="7,0,62,0" ScrollViewer.HorizontalScrollMode="Enabled" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" HorizontalChildrenAlignment="left"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="-12"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal" Width="375" Height="20" Background="Transparent" HorizontalAlignment="Left">
<StackPanel Width="230" VerticalAlignment="Center" Margin="15,5,0,0">
<TextBlock Text="{Binding Name}" Foreground="white" FontSize="14" Margin="0,3,0,0" FontWeight="Normal" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Adding ScrollViewer.HorizontalScrollMode="Enabled" & Removing the ScrollViewer control ..
UPDATE:
You can achieve that without using columns.. here's my try:
<Grid x:Name="rootGrid">
<ScrollViewer HorizontalScrollMode="Enabled" >
<StackPanel Orientation="Horizontal" >
<Grid x:Name="form" >
<!-- your form here.. -->
</Grid>
<Grid x:Name="list" >
<!-- your listview here.. -->
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
Good luck :)
I am trying to Group Items in a DataGrid and display the value of the Field it is grouping on in the header. For example:
Ford - 3 items
F150
Mustang
Chevy - 2 items
Every example I have looked at shows me the exact same thing which doesn't seem to work at all for me.
<DataGrid IsSynchronizedWithCurrentItem="True" SelectionUnit="FullRow" RowHeaderWidth="0" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" IsReadOnly="True" ItemsSource="{Binding View}" SelectedItem="{Binding Path=SelectedContingency, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" AutoGenerateColumns="False" >
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander>
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text=" wtf " />
<TextBlock Text="{Binding Path=Description, RelativeSource={RelativeSource AncestorType=DataGrid}}" />
<TextBlock Text="{Binding Path=ItemCount}"/>
<TextBlock Text=" Items" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
Also had this for a while but it made no difference
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Description}" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
Instead of getting a description here I just get ( wtf 3 items ) etc. I've tried different fields and nothing. I've tried every variation I can think of for the field in the exapander header.
What magic is required to make this common feature function?
The answer to this is that in the examples they bind to the field name. So when you see in the examples:
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Name"} />
<TextBlock Text="{Binding Path=ItemCount}"/>
<TextBlock Text=" Items" />
</StackPanel>
</Expander.Header>
You might assume as I did that "Name" is used because thats also the field they chose to bind to. This is not the case. "Name" is the actual property on the GroupItem that you are binding to that has the value.
So no matter what Field you are grouping on, you always display that field by binding to "Name" on the GroupItem.
I'll try and provide as much information here as possible but let me prefix it by saying I'm not confident of my knowledge of regular data sources never mind design time data in Blend. My runtime works fine and displays grouped items in the grid view. When viewing in Blend I get nothing and I would like to display some sample data that does the same as the runtime. Is it possible to achieve this? Also if I've gone wrong and over complicated the runtime data sources please feel free to suggest changes.
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="ScoreAlerts.ItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
...snip...>
<CollectionViewSource
x:Name="itemsViewSource"
IsSourceGrouped="true"
Source="{Binding Items}"/>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick" FontFamily="Global User Interface" FontWeight="Light" Margin="0,0,10,0">
<GridView.Resources>
<!-- Grid-appropriate 250 pixel square item template as seen in the GroupedItemsPage and ItemsPage -->
<DataTemplate x:Key="GridItem">
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{x:Null}">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
<!-- <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> -->
</StackPanel>
</Grid>
</DataTemplate>
</GridView.Resources>
<GridView.ItemsSource>
<Binding Source="{StaticResource itemsViewSource}"/>
</GridView.ItemsSource>
<!-- Item Template -->
<GridView.ItemTemplate>
<StaticResource ResourceKey="GridItem"/>
</GridView.ItemTemplate>
<!-- Item Panel Template -->
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid MaximumRowsOrColumns="4"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0">
<TextBlock Text="{Binding Key}"
Style="{StaticResource PageSubheaderTextStyle}"
Margin="8 4 0 10" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0 0 40 0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
in the code I have this
this.DefaultViewModel["Items"] = ScoreDataSource.GetGroups("AllGroups")
And my ScoreDataSource has the following
public sealed class ScoreDataSource
{
public static ScoreDataSource _ScoreDataSource = new ScoreDataSource();
private ObservableCollection<ScoreDataGroup> _allGroups = new ObservableCollection<ScoreDataGroup>();
public ObservableCollection<ScoreDataGroup> AllGroups
{
get { return this._allGroups; }
}
public static IEnumerable<object> GetGroups(string uniqueId)
{
if ( uniqueId == "AllGroups" )
{
var query = from item in _ScoreDataSource.AllGroups
orderby item.Country
group item by item.Country into g
select g;
return query;
}
else
{
return _ScoreDataSource.AllGroups;
}
}