<Application
    x:Class="eShopOnContainers.UWP.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:eShopOnContainers.UWP"
    xmlns:converters="using:eShopOnContainers.Windows.Converters"
    xmlns:controls="using:eShopOnContainers.Windows.Controls"
    RequestedTheme="Light">
    <Application.Resources>
        <ResourceDictionary>
            
            <!-- COLORS -->
            <Color x:Key="NativeAccentColor">#00A69C</Color>
            <Color x:Key="NativeLightGreenColor">#83D01B</Color>
            
            <!-- CONVERTERS -->
            <converters:TabIconConverter x:Key="TabIconConverter" />
            <converters:TabBadgeColorConverter x:Key="TabBadgeColorConverter" />
            <converters:TabBadgeTextConverter x:Key="TabBadgeTextConverter" />
                        
            <!-- STYLES -->
            <Style x:Key="FormTextBoxStyle" TargetType="TextBox">
                <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
                <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}" />
                <Setter Property="SelectionHighlightColor" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
                <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
                <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
                <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TextBox">
                            <Grid>
                                <Grid.Resources>
                                    <Style x:Name="DeleteButtonStyle" TargetType="Button">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="Button">
                                                    <Grid x:Name="ButtonLayoutGrid" BorderBrush="{ThemeResource TextBoxButtonBorderThemeBrush}"
                                                          BorderThickness="{TemplateBinding BorderThickness}"
                                                          Background="{ThemeResource TextBoxButtonBackgroundThemeBrush}">
                                                        <VisualStateManager.VisualStateGroups>
                                                            <VisualStateGroup x:Name="CommonStates">
                                                                <VisualState x:Name="Normal" />
                                                                <VisualState x:Name="PointerOver">
                                                                    <Storyboard>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement"
                                                                            Storyboard.TargetProperty="Foreground">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                                                        </ObjectAnimationUsingKeyFrames>
                                                                    </Storyboard>
                                                                </VisualState>
                                                                <VisualState x:Name="Pressed">
                                                                    <Storyboard>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid"
                                                                            Storyboard.TargetProperty="Background">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                                                        </ObjectAnimationUsingKeyFrames>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement"
                                                                            Storyboard.TargetProperty="Foreground">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="White" />
                                                                        </ObjectAnimationUsingKeyFrames>
                                                                    </Storyboard>
                                                                </VisualState>
                                                                <VisualState x:Name="Disabled">
                                                                    <Storyboard>
                                                                        <DoubleAnimation Storyboard.TargetName="ButtonLayoutGrid"
                                                                                         Storyboard.TargetProperty="Opacity"
                                                                                         To="0"
                                                                                         Duration="0" />
                                                                    </Storyboard>
                                                                </VisualState>
                                                            </VisualStateGroup>
                                                        </VisualStateManager.VisualStateGroups>
                                                        <TextBlock x:Name="GlyphElement"
                                                                    Foreground="{ThemeResource SystemControlForegroundChromeBlackMediumBrush}"
                                                                    VerticalAlignment="Center"
                                                                    HorizontalAlignment="Center"
                                                                    FontStyle="Normal"
                                                                    FontSize="12"
                                                                    Text="&#xE10A;"
                                                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                                    AutomationProperties.AccessibilityView="Raw"/>
                                                    </Grid>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Grid.Resources>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter"
                                                    Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                                    Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                    Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                    Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
                                                    Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter"
                                                    Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                    Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                                    Storyboard.TargetProperty="Opacity">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundHoverOpacity}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Focused">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter"
                                                    Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                    Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
                                                    Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
                                                    Storyboard.TargetProperty="RequestedTheme">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Light" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="ButtonStates">
                                        <VisualState x:Name="ButtonVisible">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton"
                                                    Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="ButtonCollapsed" />
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Border x:Name="BackgroundElement"
                                    Grid.Row="1"
                                    Background="{TemplateBinding Background}"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Opacity="{ThemeResource TextControlBackgroundRestOpacity}"
                                    Grid.ColumnSpan="2"
                                    Grid.RowSpan="1"/>
                                <Border x:Name="BorderElement"
                                    Grid.Row="1"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Grid.ColumnSpan="2"
                                    Grid.RowSpan="1"/>
                                <ContentPresenter x:Name="HeaderContentPresenter"
                                    x:DeferLoadStrategy="Lazy"
                                    Visibility="Collapsed"
                                    Grid.Row="0"
                                    Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                    Margin="0,0,0,8"
                                    Grid.ColumnSpan="2"
                                    Content="{TemplateBinding Header}"
                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                                    FontWeight="Normal" />
                                <ScrollViewer x:Name="ContentElement"
                                    Grid.Row="1"
                                    HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                    VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                    IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                    IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                    IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Padding="{TemplateBinding Padding}"
                                    IsTabStop="False"
                                    AutomationProperties.AccessibilityView="Raw"
                                    ZoomMode="Disabled" />
                                <ContentControl x:Name="PlaceholderTextContentPresenter"
                                    Grid.Row="1"
                                    Foreground="White"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Padding="{TemplateBinding Padding}"
                                    IsTabStop="False"
                                    Grid.ColumnSpan="2"
                                    Content="{TemplateBinding PlaceholderText}"
                                    IsHitTestVisible="False"/>
                                <Button x:Name="DeleteButton"
                                    Grid.Row="1"
                                    Style="{StaticResource DeleteButtonStyle}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Margin="{ThemeResource HelperButtonThemePadding}"
                                    IsTabStop="False"
                                    Grid.Column="1"
                                    Visibility="Collapsed"
                                    FontSize="{TemplateBinding FontSize}"
                                    MinWidth="34"
                                    VerticalAlignment="Stretch"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="PivotItem">
                <Setter Property="Margin" Value="0" />
            </Style>

            <Style TargetType="ListViewItem">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                <Setter Property="TabNavigation" Value="Local"/>
                <Setter Property="IsHoldingEnabled" Value="True"/>
                <Setter Property="Padding" Value="12,0,12,0"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
                <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                SelectionCheckMarkVisualEnabled="True"
                                CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                                CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                                DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                                DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                                FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
                                FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                                PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
                                PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
                                SelectedBackground="Red"
                                SelectedForeground="Transparent"
                                SelectedPointerOverBackground="Transparent"
                                PressedBackground="Transparent"
                                SelectedPressedBackground="Transparent"
                                DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                                DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                                ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                ContentMargin="{TemplateBinding Padding}"
                                CheckMode="Inline"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="Pivot">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Pivot">
                            <Grid x:Name="RootElement"
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                Background="{TemplateBinding Background}">
                                <Grid.Resources>
                                    <Style x:Key="BaseContentControlStyle" TargetType="ContentControl">
                                        <Setter Property="FontFamily" Value="Segoe UI" />
                                        <Setter Property="FontWeight" Value="SemiBold" />
                                        <Setter Property="FontSize" Value="15" />
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="ContentControl">
                                                    <ContentPresenter
                                                    Margin="{TemplateBinding Padding}"
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                    Content="{TemplateBinding Content}"
                                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                                    ContentTransitions="{TemplateBinding ContentTransitions}"
                                                    OpticalMarginAlignment="TrimSideBearings" />
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                    <Style x:Key="TitleContentControlStyle" BasedOn="{StaticResource BaseContentControlStyle}" TargetType="ContentControl">
                                        <Setter Property="FontWeight" Value="SemiLight" />
                                        <Setter Property="FontSize" Value="24" />
                                    </Style>
                                    <!-- While used here to remove the spacing between header items, the PivotHeaderItem template can also be used to
                                    display custom 'selected' visuals -->
                                    <Style TargetType="PivotHeaderItem">
                                        <Setter Property="Padding" Value="0" />
                                    </Style>
                                </Grid.Resources>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="Orientation">
                                        <VisualState x:Name="Portrait">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Landscape">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="NavigationButtonsVisibility">
                                        <VisualState x:Name="NavigationButtonsHidden" />
                                        <VisualState x:Name="NavigationButtonsVisible">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="Opacity">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="IsEnabled">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="Opacity">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="IsEnabled">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="HeaderStates">
                                        <VisualState x:Name="HeaderDynamic" />
                                        <VisualState x:Name="HeaderStatic">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StaticHeader" Storyboard.TargetProperty="Visibility">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <ContentControl x:Name="TitleContentControl"
                                    Margin="{StaticResource PivotPortraitThemePadding}"
                                    Content="{TemplateBinding Title}"
                                    ContentTemplate="{TemplateBinding TitleTemplate}"
                                    IsTabStop="False"
                                    Style="{StaticResource TitleContentControlStyle}"
                                    Visibility="Collapsed" />
                                <Grid Grid.Row="1">
                                    <Grid.Resources>
                                        <ResourceDictionary>
                                            <ResourceDictionary.ThemeDictionaries>
                                                <ResourceDictionary x:Key="Default">
                                                    <SolidColorBrush x:Key="SystemControlPageBackgroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />
                                                    <SolidColorBrush x:Key="SystemControlForegroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />
                                                </ResourceDictionary>
                                                <ResourceDictionary x:Key="Light">
                                                    <SolidColorBrush x:Key="SystemControlPageBackgroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />
                                                    <SolidColorBrush x:Key="SystemControlForegroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />
                                                </ResourceDictionary>
                                                <ResourceDictionary x:Key="HighContrast">
                                                    <SolidColorBrush x:Key="SystemControlPageBackgroundChromeMediumBrush" Color="{ThemeResource SystemColorWindowColor}" />
                                                    <SolidColorBrush x:Key="SystemControlForegroundChromeMediumBrush" Color="{ThemeResource SystemColorButtonTextColor}" />
                                                </ResourceDictionary>
                                            </ResourceDictionary.ThemeDictionaries>

                                            <ControlTemplate x:Key="NextTemplate" TargetType="Button">
                                                <Border x:Name="Root"
                                                    Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"
                                                    BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}"
                                                    BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}">
                                                    <VisualStateManager.VisualStateGroups>
                                                        <VisualStateGroup x:Name="CommonStates">
                                                            <VisualState x:Name="Normal" />
                                                            <VisualState x:Name="PointerOver">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="Pressed">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                        </VisualStateGroup>
                                                    </VisualStateManager.VisualStateGroups>
                                                    <FontIcon x:Name="Arrow"
                                                        HorizontalAlignment="Center"
                                                        VerticalAlignment="Center"
                                                        FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                        FontSize="12"
                                                        Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}"
                                                        Glyph="&#xE0E3;"
                                                        MirroredWhenRightToLeft="True"
                                                        UseLayoutRounding="False" />
                                                </Border>
                                            </ControlTemplate>

                                            <ControlTemplate x:Key="PreviousTemplate" TargetType="Button">
                                                <Border x:Name="Root"
                                                    Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"
                                                    BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}"
                                                    BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}">
                                                    <VisualStateManager.VisualStateGroups>
                                                        <VisualStateGroup x:Name="CommonStates">
                                                            <VisualState x:Name="Normal" />
                                                            <VisualState x:Name="PointerOver">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="Pressed">
                                                                <Storyboard>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                    </ObjectAnimationUsingKeyFrames>
                                                                </Storyboard>
                                                            </VisualState>
                                                        </VisualStateGroup>
                                                    </VisualStateManager.VisualStateGroups>
                                                    <FontIcon x:Name="Arrow"
                                                        HorizontalAlignment="Center"
                                                        VerticalAlignment="Center"
                                                        FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                        FontSize="12"
                                                        Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}"
                                                        Glyph="&#xE0E2;"
                                                        MirroredWhenRightToLeft="True"
                                                        UseLayoutRounding="False" />
                                                </Border>
                                            </ControlTemplate>
                                        </ResourceDictionary>
                                    </Grid.Resources>
                                    <ScrollViewer x:Name="ScrollViewer"
                                        Margin="{TemplateBinding Padding}"
                                        VerticalContentAlignment="Stretch"
                                        BringIntoViewOnFocusChange="False"
                                        HorizontalScrollBarVisibility="Hidden"
                                        HorizontalSnapPointsAlignment="Center"
                                        HorizontalSnapPointsType="MandatorySingle"
                                        Template="{StaticResource ScrollViewerScrollBarlessTemplate}"
                                        VerticalScrollBarVisibility="Disabled"
                                        VerticalScrollMode="Disabled"
                                        VerticalSnapPointsType="None"
                                        ZoomMode="Disabled">
                                        <PivotPanel x:Name="Panel" 
                                                    VerticalAlignment="Stretch">
                                            <Grid x:Name="PivotLayoutElement" >
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="*" />
                                                </Grid.RowDefinitions>
                                                <!-- By setting the column definitions to *,Auto,* allows the tabs to be centered by default -->
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*" />
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>
                                                <Grid.RenderTransform>
                                                    <CompositeTransform x:Name="PivotLayoutElementTranslateTransform" />
                                                </Grid.RenderTransform>
                                                <!--  This border is used as a backplate for the header area  -->
                                                <Border
                                                    Grid.ColumnSpan="3"
                                                    Background="{ThemeResource SystemControlPageBackgroundChromeMediumBrush}"
                                                    BorderBrush="{ThemeResource SystemControlForegroundChromeMediumBrush}"
                                                    BorderThickness="0,0,0,1" />
                                                <ContentPresenter x:Name="LeftHeaderPresenter"
                                                    HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Stretch"
                                                    Content="{TemplateBinding LeftHeader}"
                                                    ContentTemplate="{TemplateBinding LeftHeaderTemplate}" />
                                                <ContentControl x:Name="HeaderClipper"
                                                    Grid.Column="1"
                                                    HorizontalContentAlignment="Stretch"
                                                    UseSystemFocusVisuals="True">
                                                    <ContentControl.Clip>
                                                        <RectangleGeometry x:Name="HeaderClipperGeometry" />
                                                    </ContentControl.Clip>
                                                    <Grid Background="Transparent">
                                                        <PivotHeaderPanel x:Name="StaticHeader" Visibility="Collapsed" />
                                                        <PivotHeaderPanel x:Name="Header">
                                                            <PivotHeaderPanel.RenderTransform>
                                                                <TransformGroup>
                                                                    <CompositeTransform x:Name="HeaderTranslateTransform" />
                                                                    <CompositeTransform x:Name="HeaderOffsetTranslateTransform" />
                                                                </TransformGroup>
                                                            </PivotHeaderPanel.RenderTransform>
                                                        </PivotHeaderPanel>
                                                    </Grid>
                                                </ContentControl>
                                                <Button x:Name="PreviousButton"
                                                    Grid.Column="1"
                                                    Width="20"
                                                    Height="36"
                                                    Margin="{ThemeResource PivotNavButtonMargin}"
                                                    HorizontalAlignment="Left"
                                                    VerticalAlignment="Top"
                                                    Background="Transparent"
                                                    IsEnabled="False"
                                                    IsTabStop="False"
                                                    Opacity="0"
                                                    Template="{StaticResource PreviousTemplate}"
                                                    UseSystemFocusVisuals="False" />
                                                <Button x:Name="NextButton"
                                                    Grid.Column="1"
                                                    Width="20"
                                                    Height="36"
                                                    Margin="{ThemeResource PivotNavButtonMargin}"
                                                    HorizontalAlignment="Right"
                                                    VerticalAlignment="Top"
                                                    Background="Transparent"
                                                    IsEnabled="False"
                                                    IsTabStop="False"
                                                    Opacity="0"
                                                    Template="{StaticResource NextTemplate}"
                                                    UseSystemFocusVisuals="False" />
                                                <ContentPresenter x:Name="RightHeaderPresenter"
                                                    Grid.Column="2"
                                                    HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Stretch"
                                                    Content="{TemplateBinding RightHeader}"
                                                    ContentTemplate="{TemplateBinding RightHeaderTemplate}" />
                                                <ItemsPresenter x:Name="PivotItemPresenter" Grid.Row="1" Grid.ColumnSpan="3">
                                                    <ItemsPresenter.RenderTransform>
                                                        <TransformGroup>
                                                            <TranslateTransform x:Name="ItemsPresenterTranslateTransform" />
                                                            <CompositeTransform x:Name="ItemsPresenterCompositeTransform" />
                                                        </TransformGroup>
                                                    </ItemsPresenter.RenderTransform>
                                                </ItemsPresenter>
                                            </Grid>
                                        </PivotPanel>
                                    </ScrollViewer>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <DataTemplate x:Key="TabbedPageHeaderTemplate">
                <Grid>
                    <ContentPresenter>
                        <controls:TabItem   
                            Label="{Binding Title}"
                            Icon="{Binding Icon, Converter={StaticResource TabIconConverter}}"
                            BadgeColor="{Binding Converter={StaticResource TabBadgeColorConverter}}"
                            BadgeText="{Binding Converter={StaticResource TabBadgeTextConverter}}"/>
                    </ContentPresenter>
                </Grid>
            </DataTemplate>

        </ResourceDictionary>
    </Application.Resources>
</Application>
