Resources
<ResourceDictionary x:Key="Default">
    <JumpListItemBackgroundConverter x:Key="JumpListItemBackgroundConverter"
                                     Enabled="{ThemeResource PhoneAccentBrush}"
                                     Disabled="{ThemeResource PhoneChromeBrush}" />
    <JumpListItemForegroundConverter x:Key="JumpListItemForegroundConverter"
                                     Enabled="{ThemeResource PhoneForegroundBrush}"
                                     Disabled="{ThemeResource PhoneForegroundBrush}" />
    <Thickness x:Key="JumpListItemBorderThickness">0</Thickness>
    <Thickness x:Key="JumpListItemTextMargin">9.5,0,0,9.5</Thickness>
    <Thickness x:Key="AlphaJumpListGroupTextMargin">5.5,0,0,9.5</Thickness>
    <SolidColorBrush x:Key="JumpListGroupHeaderBackgroundBrush"
                     Color="{ThemeResource SystemColorControlAccentColor}" />
    <SolidColorBrush x:Key="JumpListGroupHeaderTextForegroundBrush"
                     Color="White" />

    <!--Item templates for JumpList ZoomedOutView-->
    <DataTemplate x:Key="AlphaJumpListPickerItemTemplate">
        <Border Background="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}"
                BorderBrush="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                BorderThickness="{ThemeResource JumpListItemBorderThickness}"
                Height="79"
                Width="79"
                HorizontalAlignment="Left"
                Margin="0,0,9.5,9.5">
            <TextBlock Text="{Binding Group.KeyDisplay}"
                       Foreground="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                       FontSize="38.667"
                       FontWeight="SemiBold"
                       TextLineBounds="Tight"
                       OpticalMarginAlignment="TrimSideBearings"
                       IsColorFontEnabled="False"
                       IsTextScaleFactorEnabled="False"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Bottom"
                       Margin="{ThemeResource JumpListItemTextMargin}" />
        </Border>
    </DataTemplate>
    <DataTemplate x:Key="GenericJumpListPickerItemTemplate">
        <Border Background="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}"
                BorderBrush="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                BorderThickness="{ThemeResource JumpListItemBorderThickness}"
                Height="49.5"
                Margin="0,0,0,9.5"
                HorizontalAlignment="Stretch">
            <TextBlock Text="{Binding Group.KeyDisplay}"
                       Foreground="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                       FontSize="22"
                       FontWeight="SemiBold"
                       TextLineBounds="Tight"
                       OpticalMarginAlignment="TrimSideBearings"
                       IsColorFontEnabled="False"
                       IsTextScaleFactorEnabled="False"
                       VerticalAlignment="Bottom"
                       Margin="{ThemeResource JumpListItemTextMargin}" />
        </Border>
    </DataTemplate>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
    <JumpListItemBackgroundConverter x:Key="JumpListItemBackgroundConverter"
                                     Enabled="{ThemeResource PhoneAccentBrush}"
                                     Disabled="{ThemeResource PhoneChromeBrush}" />
    <JumpListItemForegroundConverter x:Key="JumpListItemForegroundConverter"
                                     Enabled="{ThemeResource PhoneBackgroundBrush}"
                                     Disabled="{ThemeResource PhoneLowBrush}" />
    <Thickness x:Key="JumpListItemBorderThickness">0</Thickness>
    <Thickness x:Key="JumpListItemTextMargin">9.5,0,0,9.5</Thickness>
    <Thickness x:Key="AlphaJumpListGroupTextMargin">5.5,0,0,9.5</Thickness>
    <SolidColorBrush x:Key="JumpListGroupHeaderBackgroundBrush"
                     Color="{ThemeResource SystemColorControlAccentColor}" />
    <SolidColorBrush x:Key="JumpListGroupHeaderTextForegroundBrush"
                     Color="White" />

    <!--Item templates for JumpList ZoomedOutView-->
    <DataTemplate x:Key="AlphaJumpListPickerItemTemplate">
        <Border Background="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}"
                BorderBrush="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                BorderThickness="{ThemeResource JumpListItemBorderThickness}"
                Height="79"
                Width="79"
                HorizontalAlignment="Left"
                Margin="0,0,9.5,9.5">
            <TextBlock Text="{Binding Group.KeyDisplay}"
                       Foreground="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                       FontSize="38.667"
                       FontWeight="SemiBold"
                       TextLineBounds="Tight"
                       OpticalMarginAlignment="TrimSideBearings"
                       IsColorFontEnabled="False"
                       IsTextScaleFactorEnabled="False"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Bottom"
                       Margin="{ThemeResource JumpListItemTextMargin}" />
        </Border>
    </DataTemplate>
    <DataTemplate x:Key="GenericJumpListPickerItemTemplate">
        <Border Background="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}"
                BorderBrush="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                BorderThickness="{ThemeResource JumpListItemBorderThickness}"
                Height="49.5"
                Margin="0,0,0,9.5"
                HorizontalAlignment="Stretch">
            <TextBlock Text="{Binding Group.KeyDisplay}"
                       Foreground="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                       FontSize="22"
                       FontWeight="SemiBold"
                       TextLineBounds="Tight"
                       OpticalMarginAlignment="TrimSideBearings"
                       IsColorFontEnabled="False"
                       IsTextScaleFactorEnabled="False"
                       VerticalAlignment="Bottom"
                       Margin="{ThemeResource JumpListItemTextMargin}" />
        </Border>
    </DataTemplate>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
    <JumpListItemBackgroundConverter x:Key="JumpListItemBackgroundConverter"
                                     Enabled="{ThemeResource PhoneBackgroundBrush}"
                                     Disabled="{ThemeResource PhoneBackgroundBrush}" />
    <JumpListItemForegroundConverter x:Key="JumpListItemForegroundConverter"
                                     Enabled="{ThemeResource PhoneForegroundBrush}"
                                     Disabled="{ThemeResource PhoneDisabledBrush}" />
    <Thickness x:Key="JumpListItemBorderThickness">2.5</Thickness>
    <Thickness x:Key="JumpListItemTextMargin">7,0,0,7</Thickness>
    <Thickness x:Key="AlphaJumpListGroupTextMargin">5.5,0,0,7</Thickness>
    <SolidColorBrush x:Key="JumpListGroupHeaderBackgroundBrush"
                     Color="Transparent" />
    <SolidColorBrush x:Key="JumpListGroupHeaderTextForegroundBrush"
                     Color="{ThemeResource SystemColorControlAccentColor}" />

    <!--Item templates for JumpList ZoomedOutView-->
    <DataTemplate x:Key="AlphaJumpListPickerItemTemplate">
        <Border Background="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}"
                BorderBrush="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                BorderThickness="{ThemeResource JumpListItemBorderThickness}"
                Height="79"
                Width="79"
                HorizontalAlignment="Left"
                Margin="0,0,9.5,9.5">
            <TextBlock Text="{Binding Group.KeyDisplay}"
                       Foreground="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                       FontSize="38.667"
                       FontWeight="SemiBold"
                       TextLineBounds="Tight"
                       OpticalMarginAlignment="TrimSideBearings"
                       IsColorFontEnabled="False"
                       IsTextScaleFactorEnabled="False"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Bottom"
                       Margin="{ThemeResource JumpListItemTextMargin}" />
        </Border>
    </DataTemplate>
    <DataTemplate x:Key="GenericJumpListPickerItemTemplate">
        <Border Background="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}"
                BorderBrush="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                BorderThickness="{ThemeResource JumpListItemBorderThickness}"
                Height="49.5"
                Margin="0,0,0,9.5"
                HorizontalAlignment="Stretch">
            <TextBlock Text="{Binding Group.KeyDisplay}"
                       Foreground="{Binding Converter={StaticResource JumpListItemForegroundConverter}}"
                       FontSize="22"
                       FontWeight="SemiBold"
                       TextLineBounds="Tight"
                       OpticalMarginAlignment="TrimSideBearings"
                       IsColorFontEnabled="False"
                       IsTextScaleFactorEnabled="False"
                       VerticalAlignment="Bottom"
                       Margin="{ThemeResource JumpListItemTextMargin}" />
        </Border>
    </DataTemplate>
</ResourceDictionary>

<Thickness x:Key="JumpListPadding">0,0,0,66.5</Thickness>
<Thickness x:Key="JumpListHeaderItemMargin">19,0,0,9.5</Thickness>

DataTemplates
<!--Sticky header templates-->
<DataTemplate x:Key="AlphaGroupHeaderTemplate">
    <Border Background="{ThemeResource JumpListGroupHeaderBackgroundBrush}"
            BorderBrush="{ThemeResource PhoneAccentBrush}"
            BorderThickness="{ThemeResource JumpListItemBorderThickness}"
            Width="49.5"
            Height="49.5"
            HorizontalAlignment="Left"
            Margin="{ThemeResource JumpListHeaderItemMargin}">
        <TextBlock Text="{Binding KeyDisplay}"
                   Foreground="{ThemeResource JumpListGroupHeaderTextForegroundBrush}"
                   FontSize="39"
                   FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                   TextLineBounds="Tight"
                   OpticalMarginAlignment="TrimSideBearings"
                   IsColorFontEnabled="False"
                   IsTextScaleFactorEnabled="False"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Bottom"
                   Margin="{ThemeResource AlphaJumpListGroupTextMargin}" />
    </Border>
</DataTemplate>
<DataTemplate x:Key="AlphaBorderGroupHeaderTemplate">
    <Border Background="Transparent"
            BorderBrush="{ThemeResource PhoneAccentBrush}"
            BorderThickness="2.5"
            Width="49.5"
            Height="49.5"
            HorizontalAlignment="Left"
            Margin="{ThemeResource JumpListHeaderItemMargin}">
        <TextBlock Text="{Binding KeyDisplay}"
                   Foreground="{StaticResource PhoneAccentBrush}"
                   FontSize="33"
                   FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                   TextLineBounds="Tight"
                   OpticalMarginAlignment="TrimSideBearings"
                   IsColorFontEnabled="False"
                   IsTextScaleFactorEnabled="False"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Bottom"
                   Margin="5.5,9,0,8.5" />
    </Border>
</DataTemplate>
<DataTemplate x:Key="GenericGroupHeaderTemplate">
    <Border>
        <TextBlock Text="{Binding KeyDisplay}"
                   Foreground="{ThemeResource PhoneAccentBrush}"
                   FontSize="24"
                   FontWeight="SemiLight"
                   OpticalMarginAlignment="TrimSideBearings"
                   IsTextScaleFactorEnabled="False"
                   VerticalAlignment="Bottom"
                   Margin="{ThemeResource JumpListHeaderItemMargin}" />
    </Border>
</DataTemplate>

Styles
<!--Disappearing sticky header fix, apply to ZoomedInView group styles-->
<Style x:Key="JumpListHeaderContainerStyle"
       TargetType="ListViewBaseHeaderItem">
    <Setter Property="HorizontalContentAlignment"
            Value="Stretch" />
    <Setter Property="VerticalContentAlignment"
            Value="Stretch" />
</Style>

<!--Styles of ZoomedOutView GridView/ListView-->
<Style x:Key="AlphaJumpListPickerStyle"
       TargetType="GridView">
    <Setter Property="Background"
            Value="{ThemeResource ContentDialogDimmingThemeBrush}" />
    <Setter Property="ItemTemplate"
            Value="{ThemeResource AlphaJumpListPickerItemTemplate}" />
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="GridViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="GridViewItem">
                            <Border x:Name="TiltContainer">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <PointerDownThemeAnimation Storyboard.TargetName="TiltContainer" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition From="Pressed"
                                                              To="Normal">
                                                <Storyboard>
                                                    <PointerUpThemeAnimation Storyboard.TargetName="TiltContainer" />
                                                </Storyboard>
                                            </VisualTransition>
                                        </VisualStateGroup.Transitions>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ContentPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  Content="{TemplateBinding Content}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                  Margin="{TemplateBinding Padding}" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridView">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}">
                    <Viewbox HorizontalAlignment="Left"
                             VerticalAlignment="Top">
                        <ScrollViewer x:Name="ScrollViewer"
                                      AutomationProperties.AccessibilityView="Raw"
                                      BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                      HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                      HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                      IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                      IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                      IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                      IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                      IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                      TabNavigation="{TemplateBinding TabNavigation}"
                                      VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                      VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                      ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                            <ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}"
                                            FooterTemplate="{TemplateBinding FooterTemplate}"
                                            Footer="{TemplateBinding Footer}"
                                            HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                            Header="{TemplateBinding Header}"
                                            HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            Padding="{TemplateBinding Padding}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </ScrollViewer>
                    </Viewbox>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="GenericJumpListPickerStyle"
       TargetType="ListView">
    <Setter Property="FontFamily"
            Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize"
            Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background"
            Value="{ThemeResource ContentDialogDimmingThemeBrush}" />
    <Setter Property="ItemTemplate"
            Value="{ThemeResource GenericJumpListPickerItemTemplate}" />
    <Setter Property="HorizontalContentAlignment"
            Value="Stretch" />
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment"
                        Value="Stretch" />
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="Padding"
            Value="19,15,19,66.5" />
</Style>

<!--AlphaJumpList-->
<Style TargetType="local:AlphaJumpList">
    <Setter Property="JumpListGroupStyle">
        <Setter.Value>
            <GroupStyle HeaderTemplate="{StaticResource AlphaGroupHeaderTemplate}"
                        HeaderContainerStyle="{StaticResource JumpListHeaderContainerStyle}"
                        HidesIfEmpty="True" />
        </Setter.Value>
    </Setter>
    <Setter Property="Padding"
            Value="{StaticResource JumpListPadding}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:AlphaJumpList">
                <SemanticZoom x:Name="part_SemanticZoom"
                              ZoomedInView="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=BaseList}">
                    <SemanticZoom.ZoomedOutView>
                        <GridView x:Name="part_AlphaPicker"
                                  ItemsSource="{TemplateBinding CollectionGroups}"
                                  Style="{StaticResource AlphaJumpListPickerStyle}" />
                    </SemanticZoom.ZoomedOutView>
                </SemanticZoom>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!--GenericJumpList-->
<Style TargetType="local:GenericJumpList">
    <Setter Property="JumpListGroupStyle">
        <Setter.Value>
            <GroupStyle HeaderTemplate="{StaticResource GenericGroupHeaderTemplate}"
                        HeaderContainerStyle="{StaticResource JumpListHeaderContainerStyle}"
                        HidesIfEmpty="True" />
        </Setter.Value>
    </Setter>
    <Setter Property="Padding"
            Value="{StaticResource JumpListPadding}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:GenericJumpList">
                <SemanticZoom x:Name="part_SemanticZoom"
                              ZoomedInView="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=BaseList}">
                    <SemanticZoom.ZoomedOutView>
                        <ListView ItemsSource="{TemplateBinding CollectionGroups}"
                                  Style="{StaticResource GenericJumpListPickerStyle}" />
                    </SemanticZoom.ZoomedOutView>
                </SemanticZoom>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Last edited Sep 7, 2014 at 5:00 PM by qdev, version 3