Telerik blogs

Editing the GroupHeaderContentTemplateSelector of RadScheduleView

March 24, 2011 Desktop, WPF 0 Comments


RadControls for WPF, 2011.Q1

We will start with the project from the previous post:

DOWNLOAD: RadScheduleView_StartUp.zip

And will create a project that has one of the GroupHeader templates modified:

DOWNLOAD: RadScheduleView_GroupHeaderTemplates.zip

Converting the GroupHeaderContentTemplateSelector to Resource

Select the RadScheduleView on the Design Surface. Go to the “Styling” property group. Click the small rectangle near the “GroupHeaderContentTemplateSelector” and use the “Convert to New Resource…” option:

Name the new resource “GroupHeaderTemplateSelector”:

Converting a DataTemplate from the GroupHeaderContentTemplateSelector to Resource

Click again the “GroupHeaderTemplateSelector” and “Edit Resource”:

 

From the dialog that will open:

Convert the HorizontalTemplate and the VerticalTemplate to new resources named "HorizontalHeaderTemplate" and "VerticalHeaderTemplate":

Customizing the GroupHeaderTemplates

Now we will create custom DataTemplateSelector that will allow us to style our Room GroupHeaders.

Add the following class in your project:

using Telerik.Windows.Controls;
using System.Windows.Controls;
using System.Windows;
  
namespace RadScheduleView_DataTemplates
{
    public class CustomHeaderTemplateSelector : GroupHeaderTemplateSelector
    {
        public DataTemplate HorizontalRoomTemplate { get; set; }
        public DataTemplate VerticalRoomTemplate { get; set; }
        public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container, ViewDefinitionBase activeViewDeifinition)
        {           
            IResource resource = item as IResource;
            if (resource != null && resource.ResourceType == "Room")
            {
                switch (activeViewDeifinition.GetOrientation())
                {
                    case Orientation.Horizontal: return this.VerticalRoomTemplate;
                    case Orientation.Vertical: return this.HorizontalRoomTemplate;
                }
            }
            return base.SelectTemplate(item, container, activeViewDeifinition);
        }
    }
}

Then go to the ScheduleView’s Styling properties again. Click the small rectangle near the ‘GroupHeaderContentTemplateSelector’ and ‘Reset’ the current value:

After that click the ‘New’ button of the GroupHeaderContentTemplateSelector and pick our custom selector:

Then in the property editor you should be able to see the selector’s properties:

Assign the existing horizontal template to both HorizontalTemplate and HorizontalRoomTemplate properties. Same goes for the vertical templates.

After that click the HorizontalRoomTemplate and convert it to new resource named “HorizontalRoomTemplate”:

Go to the Resources tab and click the resource edit button:

You will see in the design surface a ContentPresenter with Content bound to FormattedName. Its xaml will look like this:

<DataTemplate x:Key="HorizontalRoomTemplate">
    <ContentPresenter Content="{Binding FormattedName}" Height="16" Margin="4,1"/>
</DataTemplate>

I will replace the ContentPresenter with TextBox and add some styling. Note that if you have a class that extends Resource or implement IResource you can bind to all its properties here through the Name. Name will hold reference to the resource so Name.DisplayName, Name.ResourceType etc. are available. I will set the following DataTemplate:

<DataTemplate x:Key="HorizontalRoomTemplate">
    <TextBlock FontSize="16" TextDecorations="Underline" Text="{Binding FormattedName}" Height="22" Margin="4,1"/>
</DataTemplate>

After this change the following template will be visible:

Using even more sophisticated selectors you can set the rotation of the headers, add images bound to data implementing IResource. This allows for better MVVM support and high extensibility.

We have changed only the HorizontalRoomTemplate but the Vertical one can be modified pretty much the same way. Also if you are using multi-level grouping you can add templates for other resource types.

 

XAML

Comments

Comments are disabled in preview mode.