Customizing-Data-Templates in WPF Navigation Pane control

6 May 202112 minutes to read

Data templates can be customized for items, headers, and content. The next sections explain how to customize data templates.

Item Template

You can customize how a business object is displayed by using ItemTemplate of GroupBarItem. The following example shows how to use ItemTemplate.following code, GroupBarItem’s header is customized with DataTemplate. The value of Header is assigned to the TextBlock’s text and TextBlock’s properties like FontWeight, FontFamily and Foreground are modified for a customized look.

XAML

<syncfusion:GroupBar Name="groupBar1"  Margin="20" AllowCollapse="True" VisualMode="StackMode" ItemsSource="{Binding GroupItems}"  >

<syncfusion:GroupBar.ItemTemplate>

<DataTemplate>

<Grid>

<TextBlock Text="{Binding Header}" Margin="5" Foreground="Green" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Bookman Old Style" Grid.Column="1"/>

</Grid>

</DataTemplate>

</syncfusion:GroupBar.ItemTemplate>   

</syncfusion:GroupBar>

Implementing the above code will create the following GroupBar control.

Customizing-Data-Templates_img1

Item Template Selector

Using ItemTemplateSelector, you can use different templates for items depending on specific constraints. The following example illustrates this.

Create the template selector in the code.

     public class GroupBarItemTemplateSelector : DataTemplateSelector

     {

     public override DataTemplate SelectTemplate(object item, DependencyObject container)

     {

     Window window = Application.Current.MainWindow;

     string bookname = (item as System.Xml.XmlElement).GetAttribute("Name").ToString().ToLower();

     if (bookname.Contains("wpf"))

     {

     return ((DataTemplate)window.Resources["WpfBookTemplate"]);

     }

     else

     {

     return ((DataTemplate)window.Resources["CsBookTemplate"]);

     }



     }

     }

Define the data templates in the Window’s resources.

     <DataTemplate x:Key="WpfBookTemplate">

     <Grid>

     <Grid.ColumnDefinitions>

     <ColumnDefinition Width="25" />

     <ColumnDefinition Width="*" />

     </Grid.ColumnDefinitions>

     <Image Source="wpf.png"/>

     <TextBlock Text="{Binding XPath=@Name}" Margin="5" Foreground="Green" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Bookman Old Style" Grid.Column="1"/>

     </Grid>

     </DataTemplate>



     <DataTemplate x:Key="CsBookTemplate">

     <Grid>

     <Grid.ColumnDefinitions>

     <ColumnDefinition Width="25" />

     <ColumnDefinition Width="*" />

     </Grid.ColumnDefinitions>

     <Image Source="images.jpg"/>

     <TextBlock Text="{Binding XPath=@Name}" Margin="5" Foreground="Green" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Bookman Old Style" Grid.Column="1"/>

     </Grid>

     </DataTemplate>

The template selector in the Window’s resources.

         <local:GroupBarItemTemplateSelector 
         x:Key="groupBarItemTemplateSelector"/>

Use this template selector to choose a template for the GroupBar control.

     <syncfusion:GroupBar Name="groupBar1"  Margin="20" AllowCollapse="True" VisualMode="StackMode" ItemTemplateSelector="{StaticResource groupBarItemTemplateSelector}" ItemsSource="{Binding Source={StaticResource xmlSource}, XPath=Book}"  >



     </syncfusion:GroupBar>

This will generate the following GroupBar control.

Customizing-Data-Templates_img2

Header Template

You can customize the header of a GroupViewItem by using a header template. This is illustrated in the following example.

Define the data template for the header as follows.

     <DataTemplate x:Key="headerTemplate">

     <Grid>

     <Border Background="Gray">

     <TextBlock Text="{Binding XPath=@Name}" Margin="5" Foreground="White" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Bookman Old Style" Grid.Column="1"/>

     </Border>

     </Grid>

     </DataTemplate>

Set HeaderTemplate for GroupBarItem to the above template.

     <syncfusion:GroupBar Name="groupBar1"  Margin="20"  VisualMode="StackMode" ItemsSource="{Binding Source={StaticResource xmlSource}, XPath=Book}">

     <syncfusion:GroupBar.ItemContainerStyle>

     <Style TargetType="{x:Type syncfusion:GroupBarItem}">

     <Setter Property="HeaderTemplate" Value="{StaticResource headerTemplate}" />                                      

     </Style>

     </syncfusion:GroupBar.ItemContainerStyle>



     </syncfusion:GroupBar>

The code above applies HeaderTemplate to the GroupBar, so the headers of the group-bar items will contains a text box with a white foreground.

Content Template

You can customize the content of GroupViewItem by using ContentTemplate. This is demonstrated in the following example.

Define DataTemplate for the content as follows.

     <DataTemplate x:Key="contentTemplate">

     <Grid >

     <Grid.ColumnDefinitions>

     <ColumnDefinition Width="4*"/>

     <ColumnDefinition Width="6*"/>

     </Grid.ColumnDefinitions>

     <Image Source="{Binding XPath=@ImagePath}"/>

     <TextBlock Text="{Binding XPath=@Description}" TextWrapping="Wrap" Grid.Column="1"/>

     </Grid>

     </DataTemplate>

Set ContentTemplate for GroupBarItem to the above template.

     <syncfusion:GroupBar Name="groupBar1"  Margin="20"  VisualMode="StackMode" ItemsSource="{Binding Source={StaticResource xmlSource}, XPath=Book}">

     <syncfusion:GroupBar.ItemContainerStyle>

     <Style TargetType="{x:Type syncfusion:GroupBarItem}">

     <Setter Property="HeaderTemplate" Value="{StaticResource headerTemplate}" />  

     <Setter Property="ContentTemplate" Value="{StaticResource contentTemplate}"/>

     </Style>

     </syncfusion:GroupBar.ItemContainerStyle>

     </syncfusion:GroupBar>

This will populate the GroupBar control.

Customizing-Data-Templates_img3

Header Template Selector

With HeaderTemplateSelector, you can use different templates for the GroupBarItem’s header depending on specific constraints. The following example illustrates this.

Create the template selector in code.

   
     public class GroupBarItemHeaderTemplateSelector : DataTemplateSelector

     {

     public override DataTemplate SelectTemplate(object item, DependencyObject container)

     {

     Window window = Application.Current.MainWindow;

     string bookname = (item as System.Xml.XmlElement).GetAttribute("Name").ToString().ToLower();

     if (bookname.Contains("wpf"))

     {

     return ((DataTemplate)window.Resources["WpfBookHeaderTemplate"]);

     }

     else

     {

     return ((DataTemplate)window.Resources["CsBookHeaderTemplate"]);

     }



     }

     }

Define the data templates in the Window’s resources.

     <DataTemplate x:Key="WpfBookHeaderTemplate">

     <Grid>

     <Grid.ColumnDefinitions>

     <ColumnDefinition Width="25" />

     <ColumnDefinition Width="*" />

     </Grid.ColumnDefinitions>

     <Image Source="wpficon.png"/>

     <TextBlock Text="{Binding XPath=@Name}" Margin="5" Foreground="Green" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Bookman Old Style" Grid.Column="1"/>

     </Grid>

     </DataTemplate>



     <DataTemplate x:Key="CsBookHeaderTemplate">

     <Grid>

     <Grid.ColumnDefinitions>

     <ColumnDefinition Width="25" />

     <ColumnDefinition Width="*" />

     </Grid.ColumnDefinitions>

     <Image Source="csicon.png"/>

     <TextBlock Text="{Binding XPath=@Name}" Margin="5" Foreground="Blue" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Bookman Old Style" Grid.Column="1"/>

     </Grid>

     </DataTemplate>

Create an instance for the template selector in the Window’s resources.

   
     <local:GroupBarItemHeaderTemplateSelector 
     x:Key="groupBarItemHeaderTemplateSelector"/>

Now assign the key given in the above code to GroupBar’s HeaderTemplateSelector.

Content Template Selector

With ContentTemplateSelector, you can use different templates for GroupBarItem’s content depending on specific constraints. The following example illustrates this.

Create the template selector in the code as follows.

     public class GroupBarItemContentTemplateSelector : DataTemplateSelector

     {

     public override DataTemplate SelectTemplate(object item, DependencyObject container)

     {

     Window window = Application.Current.MainWindow;

     string bookname = (item as System.Xml.XmlElement).GetAttribute("Name").ToString().ToLower();

     if (bookname.Contains("wpf"))

     {

     return ((DataTemplate)window.Resources["WpfBookContentTemplate"]);

     }

     else

     {

     return ((DataTemplate)window.Resources["CsBookContentTemplate"]);

     }



     }

     }

Define the data templates in the Window’s resources.

     <DataTemplate x:Key="CsBookHeaderTemplate">

     <Grid>

     <Grid.ColumnDefinitions>

     <ColumnDefinition Width="25" />

     <ColumnDefinition Width="*" />

     </Grid.ColumnDefinitions>

     <Image Source="csicon.png"/>

     <TextBlock Text="{Binding XPath=@Name}" Margin="5" Foreground="Blue" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Bookman Old Style" Grid.Column="1"/>

     </Grid>

     </DataTemplate>



     <DataTemplate x:Key="WpfBookContentTemplate">

     <Grid >

     <Grid.ColumnDefinitions>

     <ColumnDefinition Width="4*"/>

     <ColumnDefinition Width="6*"/>

     </Grid.ColumnDefinitions>

     <Image Source="{Binding XPath=@ImagePath}"/>

     <TextBlock Text="{Binding XPath=@Description}" TextWrapping="Wrap" Foreground="Green" Grid.Column="1"/>

     </Grid>

     </DataTemplate>

Create an instance of the template selector in the Window’s resources.

   
   <local:GroupBarItemContentTemplateSelector 
   x:Key="groupBarItemContentTemplateSelector"/>

Now use HeaderTemplateSelector and ContentTemplateSelector.

     <syncfusion:GroupBar Name="groupBar1"  AllowCollapse="True" VisualMode="StackMode" ItemsSource="{Binding Source={StaticResource xmlSource}, XPath=Book}"   >

     <syncfusion:GroupBar.ItemContainerStyle>

     <Style TargetType="{x:Type syncfusion:GroupBarItem}">

     <Setter Property="HeaderTemplateSelector" Value="{StaticResource groupBarItemHeaderTemplateSelector}"/>

     <Setter Property="ContentTemplateSelector" Value="{StaticResource groupBarItemContentTemplateSelector}"/>

     </Style>

     </syncfusion:GroupBar.ItemContainerStyle>



     </syncfusion:GroupBar>

This will populate the GroupBar control.

Customizing-Data-Templates_img4

Customizing-Data-Templates in WPF Navigation Pane (GroupBar)

Item Template

Item Template Selector

Header Template

Content Template

Header Template Selector

Content Template Selector