WPF ListView Grouping and Repeat Header gridView - wpf

i have a listView and group descriptors to see my data (see capture1) .
I want to repeat Header Row of the grid on each "group" in the list view like capture2 below :
My xaml
<Grid Grid.Row="1" Margin="0,0,0,-80">
<ListView ItemsSource="{Binding ParcVoisinsCollectionView}" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView >
<!--<GridView.ColumnHeaderContainerStyle>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<TextBlock Text="" Padding="5">
<TextBlock.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="#373638" />
<GradientStop Offset="1.0" Color="#77797B" />
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GridView.ColumnHeaderContainerStyle>-->
<GridViewColumn Header="NomParc" Width="50" DisplayMemberBinding="{Binding NomParc}" />
<GridViewColumn Header="NomEolienne" Width="120" DisplayMemberBinding="{Binding NomEolienne}" />
<GridViewColumn Header="TypeEolienne" Width="120" DisplayMemberBinding="{Binding TypeEolienne}" />
<GridViewColumn Header="Puissance" Width="50" DisplayMemberBinding="{Binding Puissance}" />
<GridViewColumn Header="Diametre" Width="120" DisplayMemberBinding="{Binding Diametre}" />
<GridViewColumn Header="Hauteur" Width="120" DisplayMemberBinding="{Binding Hauteur}" />
<GridViewColumn Header="X" Width="120" DisplayMemberBinding="{Binding PositionX}" />
<GridViewColumn Header="Y" Width="120" DisplayMemberBinding="{Binding PositionY}" />
</GridView>
</ListView.View>
<ListView.GroupStyle >
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<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" Foreground="Gray" FontSize="22" VerticalAlignment="Bottom" />
<TextBlock Text="{Binding ItemCount}"
FontSize="22" Foreground="Green" FontWeight="Bold" FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" />
<TextBlock Text=" éoliennes(s)" FontSize="22" Foreground="Silver" FontStyle="Italic" VerticalAlignment="Bottom" />
</StackPanel>
</Expander.Header>
<ItemsPresenter>
</ItemsPresenter>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</Grid>
</Grid>
How can i make this ?

Related

WPF hover over with unique images

I want to create a Magic the Gathering trading user interface where if a user hover over a specific card name, that it will display that card's image (see image). Currently, in the MultiMasterCardListView, the only image that displays is the Black Lotus card image which I hard-coded that image path. As a result, it does not matter which card name I hover over, it only shows black lotus image.
So I created a property (PlayerCardPath) inside of MultiMasterCardListViewModel, which will loop through all the cards in the database
and test if the hover over's content/value equals that card name. If it does then return the path with the card's name and image format. The problem is that mc.Name(from MultiMasterCardViewModel) returns nothing so the "if" statement inside of the foreach doesn't get hit at all. How do I get the value of whatever is being hover over from the MultiMasterCardListView? Let me know if you need clarification. Thanks
MultiMasterCardListView:
<UserControl x:Class="OrderEntrySystem.MultiMasterCardListView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:OrderEntrySystem"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600">
<UserControl.Resources>
<ResourceDictionary Source="SharedResources.xaml" />
</UserControl.Resources>
<Grid>
<DockPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" DockPanel.Dock="Top" Margin="0,0,0,5" Height="30">
<TextBox x:Name="searchTextBox" Text="{Binding Path=SearchText}" Width="100" Height="23" Margin="0,4,5,0" />
<ContentControl Content="{Binding Path=FilterCommands}" ContentTemplate="{StaticResource ResourceKey=NestedCommandTemplate}" />
</StackPanel>
<Grid DockPanel.Dock="Bottom">
<local:SelectedItemsView />
</Grid>
<Grid DockPanel.Dock="Bottom">
<local:PagingView></local:PagingView>
</Grid>
<ListView ItemsSource="{Binding Path=SortedCards}" ItemContainerStyle="{StaticResource ResourceKey=ListViewStyle}">
<ToolTipService.ToolTip>
<Border>
<StackPanel>
<Image Source="C:\Users\Teng\Documents\0515-392-team-orange\Team Magic Project\OrderEntrySystem\Images\Black Lotus.JPG"/>
</StackPanel>
</Border>
</ToolTipService.ToolTip>
<ListView.View>
<GridView>
<GridViewColumn Width="175" DisplayMemberBinding="{Binding Path=Name}">
<GridViewColumnHeader Content="Name" Command="{Binding Path=SortCommand}" CommandParameter="Name" />
</GridViewColumn>
<GridViewColumn Header="Point Value" Width="70" DisplayMemberBinding="{Binding Path=PointValue}" />
</GridView>
</ListView.View>
</ListView>
</DockPanel>
</Grid>
MultiMasterCardListViewModel:
public string PlayerCardPath
{
get
{
string result = null;
MultiMasterCardListView mC = new MultiMasterCardListView();
foreach (var card in this.repository.GetMasterCardLists())
{
if (card.Name == mC.Name)
{
result = (#"..\..\..\Images\" + mC.Name + ".JPG");
break;
}
}
return result;
}
}
SharedResources:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:OrderEntrySystem">
<DataTemplate DataType="{x:Type local:MasterCardListViewModel}">
<local:MasterCardListView></local:MasterCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MemberViewModel}">
<local:MemberView></local:MemberView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMasterCardListViewModel}">
<local:MultiMasterCardListView></local:MultiMasterCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMemberViewModel}">
<local:MultiMemberView></local:MultiMemberView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMemberCardListViewModel}">
<local:MultiMemberCardListView></local:MultiMemberCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:TransactionViewModel}">
<local:TransactionView></local:TransactionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiTransactionViewModel}">
<local:MultiTransactionView></local:MultiTransactionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiCardTransactionViewModel}">
<local:MultiCardTransactionView></local:MultiCardTransactionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:CardConditionViewModel}">
<local:CardConditionView></local:CardConditionView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:QuantityViewModel}">
<local:QuantityView></local:QuantityView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:PurchasePointsViewModel}">
<local:PurchasePointsView></local:PurchasePointsView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiMyCardListViewModel}">
<local:MultiMyCardListView></local:MultiMyCardListView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:MultiShoppingCartViewModel}">
<local:MultiShoppingCartView></local:MultiShoppingCartView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:ShoppingCartViewModel}">
<local:ShoppingCartView></local:ShoppingCartView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:ReportViewModel}">
<local:ReportView></local:ReportView>
</DataTemplate>
<DataTemplate DataType="{x:Type local:LoginViewModel}">
<local:LoginView></local:LoginView>
</DataTemplate>
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl IsSynchronizedWithCurrentItem="True" Margin="4" ItemsSource="{Binding}">
<TabControl.Background>
<ImageBrush ImageSource="..\..\Images\Magicthegathering-logo.svg.png" Stretch="Uniform" AlignmentY="Bottom" AlignmentX="Center" Opacity="0.5"/>
</TabControl.Background>
<TabControl.ItemTemplate>
<DataTemplate>
<DockPanel>
<Button Command="{Binding Path=CloseCommand}" Content="X" Cursor="Hand" Margin="4,0,0,0" FontWeight="Bold" Height="16" Width="16" FontFamily="Courier" FontSize="9" DockPanel.Dock="Right" />
<ContentPresenter Content="{Binding Path=DisplayName}" VerticalAlignment="Center" />
</DockPanel>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</DataTemplate>
<DataTemplate x:Key="NestedCommandTemplate">
<ItemsControl ItemsSource="{Binding}" HorizontalAlignment="Right">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}" IsDefault="{Binding Path=IsDefault}" IsCancel="{Binding Path=IsCancel}" Height="23" Width="75" Margin="4,4,0,0" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
<DataTemplate x:Key="CommandsTemplate">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
<ControlTemplate x:Key="HoverOverImage">
<Border Name="border" BorderThickness="0"
Background="Transparent">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="C:\Users\Teng\Documents\0515-392-team-orange\Team Magic Project\Images\Coalition Honor Guard.JPG" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<DataTemplate x:Key="HorizontalCommandsTemplate">
<ItemsControl ItemsSource="{Binding}" HorizontalAlignment="Right">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}" Height="23" Width="75" Margin="4,4,0,0" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
<Style x:Key="MainHeaderStyle" TargetType="{x:Type HeaderedContentControl}">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="{StaticResource Brush_HeaderBackground}" BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Margin="4" Padding="4" SnapsToDevicePixels="True">
<TextBlock FontSize="14" FontWeight="Bold" Foreground="White" HorizontalAlignment="Center" Text="{TemplateBinding Content}" />
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<DockPanel>
<ContentPresenter DockPanel.Dock="Top" ContentSource="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" />
<ContentPresenter ContentSource="Content" ContentTemplate="{TemplateBinding ContentTemplate}" />
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListViewStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
</Style>
<Style x:Key="ValidationStyleTextBox" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors).CurrentItem.ErrorContent}" />
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="true">
<TextBlock DockPanel.Dock="Right" VerticalAlignment="Center" Margin="5,0,0,0" Text="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors).CurrentItem.ErrorContent}" />
<Border Background="Red" DockPanel.Dock="Right" Margin="5,0,0,0" Width="20" Height="20" CornerRadius="10">
<TextBlock Text="!" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" />
</Border>
<AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center">
<Border BorderBrush="Red" BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="PagingButton" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Webdings" />
<Setter Property="Height" Value="23" />
<Setter Property="Width" Value="45" />
<Setter Property="Margin" Value="4,0,4,0" />
</Style>
<Style x:Key="PagingTextBlock" TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="4,0,4,0" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>

Styling GridView header with height and rotated text

I have created a gridview that displays as shown below:
What I would like to do is have the header height stretch as needed to fit the rotated text, how can I do this? Something like the below mockup (Note: obviously the rotated text won't be truncated)
Also as in the second mockup, I would like to have the rotated text a bit closer together. When you compare with the first image which seems to have the distance between each set by the width of the textblock. What is the best approach to get them closer?
Here is my XAML:
<UserControl.Resources>
<DataTemplate x:Key="headerTemplate">
<TextBlock HorizontalAlignment="Left" Text="{Binding}"/>
</DataTemplate>
<Style x:Key="GridHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
</Style>
<Style x:Key="ColumnHeaderStyle" TargetType="GridViewColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
</Style>
<Style x:Key="rotatedText" TargetType="TextBlock">
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<GridView>
<GridViewColumn Header="Name" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Name}"/>
<GridViewColumn Header="Job Title" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Job_Title}" />
<GridViewColumn Header="Department" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Department}" />
<GridViewColumn Header="Company" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Company}" />
<GridViewColumn DisplayMemberBinding="{Binding Path=Company}">
<GridViewColumn.Header>
<StackPanel Orientation="Vertical">
<TextBlock HorizontalAlignment="Center">Modules</TextBlock>
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource rotatedText}" >Customer Services</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Asset Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Works Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Project Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Rates Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Finance</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Human Resources</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Document Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >User Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Configuration</TextBlock>
</StackPanel>
</StackPanel>
</GridViewColumn.Header>
</GridViewColumn>
</GridView>
Use LayoutTransform instead of RenderTransform. That will solve your problem.
<Style x:Key="rotatedText" TargetType="TextBlock">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
</Style>

Styling rotated text in a stackpanel

The first image is when my program is run:
The second is from Visual Studio:
To get the rotated text closer together I have placed in the TextBlock style a margin of -50.
My question is how can I compensate for the margin on the first Textblock to stop it disappearing?
<UserControl.Resources>
<DataTemplate x:Key="headerTemplate">
<TextBlock HorizontalAlignment="Left" Text="{Binding}"/>
</DataTemplate>
<Style x:Key="GridHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
</Style>
<Style x:Key="ColumnHeaderStyle" TargetType="GridViewColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
</Style>
<Style x:Key="rotatedText" TargetType="TextBlock">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Width" Value="130"/>
<Setter Property="Margin" Value="-50,0,0,0"/>
</Style>
</UserControl.Resources>
<GridView>
<GridViewColumn Header="Name" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Name}"/>
<GridViewColumn Header="Job Title" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Job_Title}" />
<GridViewColumn Header="Department" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Department}" />
<GridViewColumn Header="Company" HeaderTemplate="{StaticResource headerTemplate}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}" DisplayMemberBinding="{Binding Path=Company}" />
<GridViewColumn DisplayMemberBinding="{Binding Path=Company}" HeaderContainerStyle="{StaticResource ColumnHeaderStyle}">
<GridViewColumn.Header>
<StackPanel Orientation="Vertical">
<TextBlock HorizontalAlignment="Center">Modules</TextBlock>
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource rotatedText}" >Customer Services</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Asset Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Works Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Project Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Rates Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Finance</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Human Resources</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Document Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >User Management</TextBlock>
<TextBlock Style="{StaticResource rotatedText}" >Configuration</TextBlock>
</StackPanel>
</StackPanel>
</GridViewColumn.Header>
</GridViewColumn>
</GridView>
Just give the first Module TextBlock a different Style having no negative margin.

How can I change the fontsize of a GridviewColumnHeader?

I included everything below since it's not that much. I wasn't sure if something I put elsewhere was causing my setter to not work properly.
<ListView x:Name="lvReports"
SelectionMode="Single"
ItemsSource="{Binding reportsCollection}" Height="432" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListView.Resources>
<Style x:Key="myHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="TextElement.FontSize" Value="30pt"/>
<Setter Property="Width" Value="800"/>
</Style>
</ListView.Resources>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<DockPanel>
<DockPanel Height="30" VerticalAlignment="Bottom">
<Image Source="\Images\ProductivityByEmployeesReport.png"/>
<TextBlock FontWeight="Bold" FontSize="18pt" Text="{Binding Path=Name}"/>
</DockPanel>
</DockPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.View>
<GridView>
<GridViewColumn x:Name="colName" HeaderContainerStyle="{StaticResource myHeaderStyle}" Header="Reports">
<GridViewColumn.CellTemplate>
<DataTemplate>
<DockPanel>
<Rectangle Width="18"/>
<CheckBox>
<TextBlock Text="{Binding displayName}"/>
</CheckBox>
</DockPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Thanks in advance.
Add this to <ListView.Resources>
<Style TargetType="GridViewColumnHeader" x:Key="ColumnHeaderLarge">
<Setter Property="FontSize" Value="14"/>
</Style>
To set Fontsize to 14, use the style as:
<GridView ColumnHeaderContainerStyle="{StaticResource ColumnHeaderLarge}">

How do I group items in a WPF ListView

I have a ListView that I want to group results into, however the examples I am finding are not working. How can I group my results?
I want to group on the Status property of a custom object.
This is what I have:
<ListView IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding}"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Background="Transparent" SelectionChanged="ListView_SelectionChanged"
Name="lstShelvedOrders">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontWeight="Bold" FontSize="15"
Text="{Binding Path=Status}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Width" Value="Auto" />
<Setter Property="FontSize" Value="10.4" />
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding Path=Number}" Header="Shelve ID" />
<GridViewColumn DisplayMemberBinding="{Binding Path=Customer}" Header="Customer" />
<GridViewColumn DisplayMemberBinding="{Binding Path=PurchaseOrderNo}" Header="PO Number" />
<GridViewColumn DisplayMemberBinding="{Binding Path=SubmittedBy}" Header="Shelved By" />
<GridViewColumn DisplayMemberBinding="{Binding Path=OrderDate, StringFormat=MMM dd\, yyyy}" Header="Date" />
<GridViewColumn DisplayMemberBinding="{Binding Path=CustomerTerms.Description}" Header="Order Terms" />
<GridViewColumn DisplayMemberBinding="{Binding Path=ShippingMethod.Description}" Header="Shipping" />
<GridViewColumn DisplayMemberBinding="{Binding Path=TotalPrice, StringFormat=c}" Header="Order Total" />
</GridView>
</ListView.View>
</ListView>
And this is the code that I have:
void ShelvedOrderList_DataContextChanged(object sender, System.Windows.DependencyPropertyChangedEventArgs e)
{
AddGrouping();
}
private void AddGrouping()
{
if ( lstShelvedOrders.ItemsSource == null)
{
return;
}
CollectionView myView = (CollectionView)CollectionViewSource.GetDefaultView(lstShelvedOrders.ItemsSource);
PropertyGroupDescription groupDescription = new PropertyGroupDescription("Status");
myView.GroupDescriptions.Add(groupDescription);
}
I notice one thing right away - the GroupStyle.HeaderTemplate will be applied to a CollectionViewGroup, so your DataTemplate should probably look like this:
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="15" FontWeight="Bold" Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
CollectionViewGroup.Name will be assigned the value of Status for that group.
I think this can also be better, using a GroupStyle with a new ControlTemplate:
<ListView ItemsSource="{Binding Path=ContactsView}">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template" Value="{StaticResource ContactsGroupItemTemplate}" />
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
...
<ControlTemplate TargetType="{x:Type GroupItem}" x:Key="ContactsGroupItemTemplate">
<Expander IsExpanded="False">
<Expander.Header>
<DockPanel>
<TextBlock FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0" Width="100"/>
<TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount}"/>
<TextBlock FontWeight="Bold" Text=" Items"/>
</DockPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>

Resources