Styling a group header of JumpList at run-time

4 posts, 0 answers
  1. Nilangini
    Nilangini avatar
    6 posts
    Member since:
    Feb 2012

    Posted 10 Apr 2012 Link to this post

    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
  2. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 11 Apr 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Nilangini
    Nilangini avatar
    6 posts
    Member since:
    Feb 2012

    Posted 11 Apr 2012 Link to this post

    Can you please send me some sample code to change the color of the group header?
    Thanks and Regards,
    Nilangini
  5. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 12 Apr 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top