Style Jumplist

[Justin]

I can't figure out how to style the jumplist for the life of me! I'm trying to mimic the WP7 app list. I don't want pictures, I just want to make the group header shorter and the individual items much larger. Could someone possibly guide me or point me in the direction of a tutorial. The documentation wasn't much help. Thanks in advance!

[Deyan]

Hi Justin,

You can use the GroupHeaderTemplate and ItemTemplate properties to define specific DataTemplates for group headers and regular items and style them according to your requirements.

If you think that I do not understand you correctly, please get back to me with further details so that I can make sure that I provide the correct assistance.

Regards,
Deyan
the Telerik team

[Justin]

Yes I'm talking about those two. I'm not exactly sure how to modify them. I've opened them up in Expression Blend, and began editing a RadJumpList Style. After that, not sure what to do.

[Deyan]

Hello Justin,

You do not need to use Expression Blend to set your templates. Visual Studio's designer does pretty good job in that.

I suggest you take a look at our Telerik Demos application (source code) available which contains many examples of how DataTemplates are assigned to the corresponding properties of RadJumpList/RadDataBoundListBox in XAML. Take a look at the following code snippet for example:

 

<telerikDataControls:RadJumpList Grid.Row="1" x:Name="jumpList" IsStickyHeaderEnabled="True">
     <telerikDataControls:RadJumpList.ItemTemplate>
         <DataTemplate>
             <StackPanel Orientation="Horizontal" Margin="4">
                 <Image Source="/JumpList/Images/phonebook-pic.png" Width="64" Height="64" Margin="0,4,12,4"/>
                 <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" Text="{Binding}" VerticalAlignment="Center"/>
             </StackPanel>
         </DataTemplate>
     </telerikDataControls:RadJumpList.ItemTemplate>
     <telerikDataControls:RadJumpList.GroupHeaderTemplate>
             <DataTemplate>
                 <Border Background="{StaticResource PhoneAccentBrush}" Width="64" Height="64" HorizontalAlignment="Left" Margin="4" BorderThickness="0">
                     <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" Text="{Binding Key}" Margin="4" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
                 </Border>
             </DataTemplate>
         </telerikDataControls:RadJumpList.GroupHeaderTemplate>
     <telerikDataControls:RadJumpList.StickyHeaderTemplate>
         <DataTemplate>
             <Border BorderThickness="0" HorizontalAlignment="Stretch" Background="{StaticResource PhoneBackgroundBrush}" Padding="0, 0, 0, 8">
                 <Border VerticalAlignment="Top" Background="{StaticResource PhoneAccentBrush}" Width="64" Height="64" HorizontalAlignment="Left" Margin="4, 4, 4, 4" BorderThickness="0">
                     <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" Text="{Binding Key}" Margin="4" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
                 </Border>
             </Border>
         </DataTemplate>
     </telerikDataControls:RadJumpList.StickyHeaderTemplate>
</telerikDataControls:RadJumpList>

Here different templates are assigned to different properties of RadJumpList inlcuding the ItemTemplate and GroupHeaderTemplate.

Some of the visual elements inside the templates are bound to properties of the business object that represents their DataContext so that for each item the corresponding data is visualized.

I hope this helps.

Regards,
Deyan
the Telerik team