Wpf DataGrid sub-group style - wpf

I am grouping data-grid to two level.I mean each main group have one or many sub groups.
<controls:DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True" Style="{DynamicResource newExpanderStyle}" HorizontalAlignment="Left"
Margin="5,0,0,0" VerticalAlignment="Top" Background="{DynamicResource NormalBrushGrid}" >
<Expander.Header>
<StackPanel Background="#E5E5E5" Orientation="Horizontal">
<TextBlock Text="{Binding Path=Name}" FontWeight="Bold" FontSize="12" Margin="5,0" />
<TextBlock Text="{Binding Path=ItemCount}"/>
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</controls:DataGrid.GroupStyle>
I would like to differentiate sub group from main group.How can i apply different color to sub-group header
Thanks in advance
Chand.

The groups do not provide much information, but if you only have one sublevel you can use CollectionViewGroup.IsBottomLevel to differentiate. e.g.
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Value="True">
<DataTrigger.Binding>
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Content.IsBottomLevel"/>
</DataTrigger.Binding>
<Setter Property="Foreground" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</GroupStyle.HeaderTemplate>
The templated parent is a ContentPresenter and the Content of that is an internal group class.

Related

How to add image to DataGrid group header

I group my DataGrid using the following snippet:
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=City}" FontWeight="Bold" Padding="3"/>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<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="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=ItemCount}" Margin="8,0,4,0"/>
<TextBlock Text="Element(s)"/>
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
</DataGrid>
Now I would like to have an image in every group header - is it possible and how can I insert it?

How to set DataTemplate width to the width of the Listbox?

Here's the example from MSDN.
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True" BorderBrush="#FFA4B97F"
BorderThickness="0,0,0,1">
<Expander.Header>
<DockPanel>
<TextBlock FontWeight="Bold" Text="{Binding Path=Name}"
Margin="5,0,0,0" Width="100"/>
<TextBlock FontWeight="Bold"
Text="{Binding Path=ItemCount}"/>
</DockPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
How can I make it occupy the whole width of the listbox? (HorizontalScrollBar is disabled)?
What I exactly need is DockPanel to be streched.
You have to include the reference of PresentationFramework.Aero in your project.
After this in your ListBox you have to insert this attribute:
<ListBox
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
HorizontalContentAlignment="Stretch"
>
</ListBox>

WPFdatagrid - how to use(give) different colors while grouping?

I am using WPF datagrid by codeplex.
I have a wpf grid with grouping features. I want the grouped region in different colors.
The screenshot is as follows:
Can different colors be assigned during grouping? If yes how do I achieve this in WPF datagrid?
Hope this helps...
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<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="{Binding Path=Name}" />
<TextBlock Text=" ("/>
<TextBlock Text="{Binding Path=ItemCount}"/>
<TextBlock Text=" "/>
<TextBlock Text="Items"/>
<TextBlock Text=")"/>
</StackPanel>
</Expander.Header>
<ItemsPresenter>
<ItemsPresenter.Resources>
<Style TargetType="{x:Type toolkit:DataGridRow}">
<Style.Triggers>
<DataTrigger
Binding="{Binding RelativeSource=
{RelativeSource AncestorType={x:Type
GroupItem}}, Path=DataContext.Name}"
Value="1">
<Setter Property="Background"
Value="LightGreen"/>
</DataTrigger>
<DataTrigger
Binding="{Binding RelativeSource=
{RelativeSource AncestorType={x:Type
GroupItem}}, Path=DataContext.Name}"
Value="2">
<Setter Property="Background"
Value="LightPink"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ItemsPresenter.Resources>
</ItemsPresenter>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
The data triggers above check which value we have created the groups upon and accordingly assigns data grid row background colors.
So first group represents all values under text "1" (LightGreen) and next group is grouped under value 2 (LightPink).

How To Wpf TabItem Style HeaderTemplate Binding?

How To do Wpf TabItem Style HeaderTemplate Binding?
Code:
<TabControl x:Name="tabCtrlMain" ItemsSource="{Binding Items}" >
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type TabItem}">
<TextBlock Text="{Binding FileName}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
</TabControl>
this code is not working when binding:
<TextBlock Text="{Binding FileName}"/>
Try this Instead,
<TabControl x:Name="tabCtrlMain" ItemsSource="{Binding Items}" >
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding FileName}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type TabItem}">
<Border x:Name="grid">
<ContentPresenter>
<ContentPresenter.Content>
<TextBlock Text="{TemplateBinding Content}"/>
</ContentPresenter.Content>
</ContentPresenter>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
</TabControl>
I know this is awfully old now, but I thought I'd throw my two cents in just for the sake of completeness and historical accuracy :)
I prefer to use the ItemContainerStyle to do the same thing just because it feels a little cleaner to me because it states the purpose exactly:
<TabControl ItemsSource="{Binding Items}">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding FileName}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Border>
<TextBlock Text="{Binding Content}" />
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
Also, if the only goal is to get the FileName into the tabs then it can be much simpler:
<TabControl ItemsSource="{Binding Items}" DisplayMemberPath="FileName" />

Changing (Enable/Disable) GroupStyle in ListView for different category items

How can I switch between GroupStyles for a ListView based on some conditions at run time? For instance I need to use Default for items that that have GroupStyle Header name null, and if it is not null then use the custom GroupStyle theme? I tried GroupStyleSelector, and it doesn't work, because it works for multi level grouping, and in my case I have only one level grouping.
If yes, then how?
Custom GroupStyle:
<Style x:Key="grouping"
TargetType="{x:Type GroupStyle}">
<Setter Property="ContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin"
Value="0,0,0,5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="False"
BorderBrush="#FFA4B97F"
BorderThickness="0,0,0,1">
<Expander.Header>
<DockPanel>
<TextBlock FontWeight="Bold"
Text="{Binding Name}"
Margin="0"
Width="250" />
<TextBlock FontWeight="Bold"
Text="{Binding Path=Items[0].StartTime, StringFormat=T}" />
</DockPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
Thanks a lot.
Sincerely,
Vlad.
Okay,
I found solution for it. Basically I needed to build DataTrigger and check for category in it, and if it matches, use different GroupStyle. Here is the example:
<ControlTemplate TargetType="{x:Type GroupItem}"
x:Key="defaultGroup">
<ItemsPresenter />
</ControlTemplate>
<ListView.GroupStyle>
<GroupStyle >
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin"
Value="0,0,0,5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="False"
BorderBrush="Black"
BorderThickness="3"
Padding="5,1,1,5">
<Expander.Header>
<DockPanel>
<TextBlock FontWeight="Bold"
Margin="0"
Width="250">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} ({1} jobs)">
<Binding Path="Name" />
<Binding Path="ItemCount" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock FontWeight="Bold"
Text="{Binding Path=Items[0].Category, StringFormat=T}" />
</DockPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Items[0].Category}"
Value="ABC">
<Setter Property="Template"
Value="{StaticResource defaultGroup}" />
</DataTrigger>
</Style.Triggers>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>

Resources