Styling a group header of JumpList at run-time

[Nilangini]

I am using the following code in MainPage.xaml for styling the group header of a JumpList.

<Setter Property="GroupHeaderTemplate">
    <Setter.Value>
        <DataTemplate>
            <Border HorizontalAlignment="Stretch">
                <TextBlock FontSize="{StaticResource PhoneFontSizeMedium}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" Margin="6" Text="{Binding}" VerticalAlignment="Bottom" Foreground="DarkGreen" FontWeight="Bold" />
                <Border.Background>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="Black" Offset="0" />
                        <GradientStop Color="White" Offset="1" />
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
        </DataTemplate>
    </Setter.Value>
</Setter>

I want to change the color of the group header dynamically at runtime depending on a condition.
Can you please tell me how to do this?

Thanks and Regards,
Nilangini

[Deyan]

Hi Nilangini,

The RadJumpList control exposes the GroupHeaderTemplateSelector property which you can use to provide a template selector that will return different templates for a data group based on the condition that you mentioned.

Let me know if I can further assist you.

Kind regards,
Deyan
the Telerik team

[Nilangini]

Can you please send me some sample code to change the color of the group header?
Thanks and Regards,
Nilangini

[Deyan]

Hi Nilangini,

Thanks for writing back.

We have a couple of good examples in our Telerik Demos application that implement the scenario discussed here. You can take a look at the Header and Footer example of RadDataBoundListBox where a Template Selector is used for the items. This is the approach you should use in your application as well.

Take a look at the code below:

public class CustomGroupHeaderTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (/*condition1*/)
        {
            return this.YellowTemplate;
        }

        if (/*condition1*/)
        {
            return this.RedTemplate;
        }

        if (/*condition1*/)
        {
            return this.GreenTemplate;
        }
    }

    public DataTemplate YellowTemplate
    {
        get;
        set;
    }

    public DataTemplate GreenTemplate
    {
        get;
        set;
    }

    public DataTemplate RedTemplate
    {
        get;
        set;
    }
}

This is an example of a custom group header template selector for RadJumpList. The following XAML code demonstrates how this selector can be associated with RadJumpList:

<telerikDataControls:RadJumpList.GroupHeaderTemplateSelector>
    <local:CustomGroupHeaderTemplateSelector x:Name="templateSelector">
        <local:CustomGroupHeaderTemplateSelector.GreenTemplate>
            <DataTemplate>

            </DataTemplate>
        </local:CustomGroupHeaderTemplateSelector.GreenTemplate>
        <local:CustomGroupHeaderTemplateSelector.YellowTemplate>
            <DataTemplate>

            </DataTemplate>
        </local:CustomGroupHeaderTemplateSelector.YellowTemplate>
        <local:CustomGroupHeaderTemplateSelector.RedTemplate>
            <DataTemplate>

            </DataTemplate>
        </local:CustomGroupHeaderTemplateSelector.RedTemplate>
    </local:CustomGroupHeaderTemplateSelector>
</telerikDataControls:RadJumpList.GroupHeaderTemplateSelector>

Here you can see that the template selector defines three templates which are returned based on a given condition. You can have as many templates as you like that define different colors for your data groups and return the corresponding template according to the item that is passed to the template selector. This will be done in the SelectTemplate method as shown in the code snippet above.

I hope this helps.

Regards,
Deyan
the Telerik team