How to Edit Jump Style in LongListSelector Window Phone 8 and Blend 2012

Question

I am trying to use Blend 2012 to edit the Jump List Area that you can setup with the now built in longlistselector.

I never had a problem doing it with the Windows Phone Toolkit but now I have huge trouble.

I try to make a copy of the template and then I see this

I now have no clue on what to do next. I want to add in a textblock and style it. This will of course be the jump menu style.

Answer 1

It seems Blend is creating a Template rather than a Style.

For what it's worth here is an example JumpListStyle which can be used ...

<phone:LongListSelector.JumpListStyle>
    <Style TargetType="phone:LongListSelector">
        <Setter Property="GridCellSize"  Value="113,113"/>
        <Setter Property="LayoutMode" Value="Grid" />
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" 
                        Width="113" 
                        Height="113" 
                        Margin="6" >
                        <TextBlock 
                            Text="{Binding Key}" 
                            FontSize="42" 
                            Padding="6" 
                            Foreground="{Binding Converter={StaticResource ForegroundConverter}}" 
                            VerticalAlignment="Center"/>
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:LongListSelector.JumpListStyle>

You also need references to the ForegroundConverter and BackgroundConverter. I put this in App.xaml so that the style is consistent throughout the app.

<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter" 
            Disabled="{StaticResource MyThemeFGColor}" Enabled="{StaticResource MyThemeAccentColor}" />
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"
            Disabled="{StaticResource MyThemeFGColor}" Enabled="{StaticResource MyThemeBGColor}" />