Style Jumplist

4 posts, 0 answers
  1. Justin
    Justin avatar
    15 posts
    Member since:
    Jan 2012

    Posted 09 Apr 2012 Link to this post

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

    Posted 10 Apr 2012 Link to this post

    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

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

  3. DevCraft banner
  4. Justin
    Justin avatar
    15 posts
    Member since:
    Jan 2012

    Posted 11 Apr 2012 Link to this post

    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.
  5. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 12 Apr 2012 Link to this post

    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

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

Back to Top