<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:System="clr-namespace:System;assembly=mscorlib"
      xmlns:local="clr-namespace:ForzaUI;assembly="
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:devonly="http://schemas.playground-games.com/xaml/devonly"
      devonly:DevOnly="devonly"
      x:Class="ForzaUI.A_CampaignCollectionItems"
      x:Name="page"
      Style="{StaticResource A_Style_Page_Generic}"
      DataContext="{Binding RelativeSource={x:Static RelativeSource.Self}}">
    <Page.Resources>
        <ControlTemplate x:Key="H_Slider_CollectionProgress" TargetType="ProgressBar">
            <FZMaterial Height="54" Color="{StaticResource H_Color_Primary_Black}"
                Preset="{Roundtangle CornerRadius=27}">
                    <Grid x:Name="PART_Track" Margin="4">
                    <FZMaterial
                        Preset="{Roundtangle CornerRadius=24}" Color="#333"/>
                    <FZMaterial x:Name="PART_Indicator"
                        HorizontalAlignment="Left"
                        Preset="{Roundtangle CornerRadius=24}" Color="Green">
                    </FZMaterial>

                    <FZTextBlock VerticalAlignment="Center" HorizontalAlignment="Center"
                        FontFamily="Horizon_D" Color="{StaticResource H_Color_Primary_White}" CapHeight="19" >
                        <FZRun Text="{Binding Progress, Converter={NumUnitConverter FractionDigits=0}}"/>
                        <FZRun Text=" / "/>
                        <FZRun Text="{Binding Total, Converter={NumUnitConverter FractionDigits=0}}"/>
                    </FZTextBlock>
                </Grid>
            </FZMaterial>
        </ControlTemplate>

        <AutoScrollSettings x:Key="H_AutoScrollSettings_Debug" 
            ScrollSeparation="50"
            ScrollOrientation="Horizontal"
            Speed="100"
            InitialPause="0:0:0.75"/>

        <ControlTemplate x:Key="H_Template_DebugTexturePath">
            <FZTextBlock CapHeight="20" Text="{TemplateBinding Tag}"
                Stretch="None"
                Color="Magenta"
                AutoScroll="{StaticResource H_AutoScrollSettings_Debug}"/>
        </ControlTemplate>

        <AutoScrollSettings x:Key="A_AutoScrollSettings_Collection"
            ScrollSeparation="100"
            InitialPause="0:0:0.5"
            Speed="40"
            ScrollOrientation="Horizontal"
            ApplyClip="True"/>

        <Style x:Key="H_Style_CollectionItem_TitleScreenReader">
            <Setter Property="local:MultiStringFormatter.Format" Value="{local:Loc Campaign.IDS_ScreenReader_Campaign_TitleAndSubtitle}"/>
            <Setter Property="local:MultiStringFormatter.Param0" Value="{Binding Title}"/>
            <Setter Property="local:MultiStringFormatter.Param1" Value="{Binding Subtitle}"/>
            <Setter Property="local:ManualPassthroughProperty.Input" Value="{Binding (local:MultiStringFormatter.Output), RelativeSource={RelativeSource Self}}"/>
            <Setter Property="local:ManualPassthroughProperty.Allowed" Value="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
            <Setter Property="local:ScreenReader.Line" Value="{Binding (local:ManualPassthroughProperty.Output), RelativeSource={RelativeSource Self}, Converter={StaticResource A_Converter_TrimInlineMarkup}}"/>
            <Setter Property="local:ScreenReader.LineType" Value="SelectedItem"/>
            <Setter Property="local:ScreenReader.Event" Value="OnChange"/>
            <Setter Property="local:ScreenReader.ControlType" Value="Button"/>
            <Setter Property="local:ScreenReader.SelectedNumber" Value="{Binding (VirtualizingWrapPanel.ItemIndex), FallbackValue=0, RelativeSource={RelativeSource AncestorType={Type ListBoxItem}}, Converter={StaticResource A_IndexToNumberConverter}}"/>
            <Setter Property="local:ScreenReader.SelectedCount" Value="{Binding Items.Count, FallbackValue=0, RelativeSource={RelativeSource AncestorType={Type Selector}}}"/>
        </Style>

        <Style x:Key="H_Style_CollectionItem_CurrencyScreenReader">
            <Setter Property="local:ManualPassthroughProperty.Allowed" Value="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
            <Setter Property="local:ScreenReader.Line" Value="{Binding (local:ManualPassthroughProperty.Output), RelativeSource={RelativeSource Self}}"/>
            <Setter Property="local:ScreenReader.LineType" Value="ItemState"/>
            <Setter Property="local:ScreenReader.Event" Value="OnChange"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Complete}" Value="False">
                    <Setter Property="local:MultiStringFormatter.Format" Value="{Binding CampaignId, RelativeSource={RelativeSource AncestorType=Page}, Converter={StaticResource H_Converter_CampaignToScreenReadableCurrencyFormat}}"/>
                    <Setter Property="local:MultiStringFormatter.Param0" Value="{Binding Currency}"/>
                    <Setter Property="local:ManualPassthroughProperty.Input" Value="{Binding (local:MultiStringFormatter.Output), RelativeSource={RelativeSource Self}}"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Complete}" Value="True">
                    <Setter Property="local:ManualPassthroughProperty.Input" Value="{Loc Campaign.IDS_ScreenReader_Campaign_ItemState_Completed}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <DataTemplate x:Key="H_Template_CollectionCampaignItem">
            <Grid>
                <FrameworkElement Style="{StaticResource H_Style_CollectionItem_TitleScreenReader}"/>
                <FrameworkElement Style="{StaticResource H_Style_CollectionItem_CurrencyScreenReader}"/>
                <DockPanel>
                    <Grid Width="306" Height="172" Margin="8,8,8,0" DockPanel.Dock="Top">

                        <FZMaterial x:Name="icon_border" Visibility="{Binding Category.Id, RelativeSource={RelativeSource AncestorType=Page}, Converter={StaticResource H_Converter_CollectionIconBorderVisibility}}" Color="{StaticResource H_Color_Primary_Grey_80pc}" Preset="{RoundtangleStroke Thickness=2}"/>

                        <ContentPresenter x:Name="map_route" Content="{Binding RouteData}" Visibility="{Binding Content, RelativeSource={RelativeSource Self}, Converter={FZBooleanToVisibilityConverter}}" ContentTemplate="{StaticResource H_Template_ItemMapContent}"/>

                        <Grid x:Name="image">
                            <FZMaterial ImageSource="{Binding CampaignId, ElementName=page, Converter={StaticResource H_Converter_CampaignToItemTexture}}"
                                x:Name="icon_texture"
                                GreedyMeasure="True"
                                Stretch="Uniform"

                                devonly:ReportDownloadFailed="True"/>
                            <devonly:Control x:Name="debug_fail" Tag="{Binding DownloadFailedPath, ElementName=icon_texture}" Template="{Binding Tag, RelativeSource={RelativeSource Self}, Converter={CompareConverter Value={x:Null}, NotEqual={StaticResource H_Template_DebugTexturePath}}}" Visibility="{Binding RouteData, Converter={FZBooleanToVisibilityConverter InvertResult=True}}"/>
                        </Grid>

                        <Grid x:Name="currency" Height="26" Margin="5" VerticalAlignment="Bottom" HorizontalAlignment="Left">
                            <FZMaterial Color="Black" Preset="{Roundtangle CornerRadius=13}"/>
                            <StackPanel Orientation="Horizontal">
                                <FZTextBlock Margin="8,0,2,0" VerticalAlignment="Center" CapHeight="14" Text="{Binding Currency}" Color="{StaticResource H_Color_Primary_White}"/>
                                <Control Style="{Binding CampaignId, RelativeSource={RelativeSource AncestorType=Page}, Converter={StaticResource H_Converter_CampaignToCurrencyControlStyle}}" />
                            </StackPanel>
                        </Grid>

                        <FZMaterial x:Name="rarity" 
                            Style="{StaticResource H_Style_Collection_Rarity}">
                            <FZTextBlock 
                                Text="{Binding Rarity, Converter={StaticResource A_Converter_RarityToNameString}}"
                                CapHeight="14"
                                Style="{StaticResource A_Style_FZMaterial_RarityTagText}"/>
                        </FZMaterial>
                    </Grid>
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="8,0">
                        <Decorator HorizontalAlignment="Center">
                            <FZTextBlock Text="{Binding Title}"
                                         x:Name="title"
                                         HorizontalAlignment="Stretch"
                                         Color="{StaticResource H_Color_Primary_Black}"
                                         TextTrimming="CharacterEllipsis"
                                         FontFamily="Horizon_A"
                                         Stretch="None"
                                         TextWrapping="NoWrap"
                                         AutoScroll="{StaticResource A_AutoScrollSettings_Collection}"
                                         AutoScroll.AllowScrolling="False"
                                         CapHeight="21"
                                         MarkupConverter="{StaticResource H_Converter_CollectionTitleMarkup}" />
                        </Decorator>
                        <Decorator HorizontalAlignment="Center">
                            <FZTextBlock Text="{Binding Subtitle}"
                                         x:Name="subtitle"
                                         Color="{StaticResource H_Color_Grey}"
                                         FontFamily="Horizon_A"
                                         TextTrimming="CharacterEllipsis"
                                         Stretch="None"
                                         TextWrapping="NoWrap"
                                         HorizontalAlignment="Stretch"
                                         CapHeight="15"
                                         Visibility="Collapsed"
                                         AutoScroll="{StaticResource A_AutoScrollSettings_Collection}"
                                         AutoScroll.AllowScrolling="False" 
                                         Margin="0,8,0,0"
                                         MarkupConverter="{StaticResource H_Converter_CollectionTitleMarkup}" />
                        </Decorator>
                    </StackPanel>
                </DockPanel>


                <!--ContentControl Style="{StaticResource H_Style_NotificationBadge}"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Content="5"
                    Margin="0,10,7,0"/-->
            </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=(Selector.IsSelected), RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True">
                    <Setter TargetName="title" Property="TextTrimming" Value="None"/>
                    <Setter TargetName="title" Property="AutoScroll.AllowScrolling" Value="True"/>
                    <Setter TargetName="subtitle" Property="TextTrimming" Value="None"/>
                    <Setter TargetName="subtitle" Property="AutoScroll.AllowScrolling" Value="True"/>
                </DataTrigger>

                <DataTrigger Binding="{Binding Complete}" Value="False">
                    <Setter TargetName="icon_border" Property="Visibility" Value="Collapsed" />
                    <Setter TargetName="rarity" Property="Visibility" Value="Collapsed"/>
                    <Setter TargetName="map_route" Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Complete}" Value="True">
                    <Setter TargetName="icon_texture" Property="ImageSource" Value="{Binding IconPath}"/>
                    <Setter TargetName="currency" Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Subtitle, Converter={StringVisConverter}}" Value="{x:Static Visibility.Visible}">
                    <Setter TargetName="title" Property="CapHeight" Value="19"/>
                    <Setter TargetName="subtitle" Property="Visibility" Value="Visible"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Subtitle, Converter={StringVisConverter}}" Value="{x:Static Visibility.Visible}">
                    <Setter TargetName="title" Property="CapHeight" Value="19"/>
                    <Setter TargetName="subtitle" Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
        <Double x:Key="H_ItemWidth">324</Double>
        <Double x:Key="H_ItemHeight">244</Double>
        <Double x:Key="H_ItemGap">6</Double>

        <Double x:Key="H_ItemsH">5</Double>
        <Double x:Key="H_ItemsV">3</Double>

        <Style
            x:Key="H_Style_Material_ItemBacking"
            TargetType="FZMaterial">
            <Setter
                Property="Color"
                Value="{StaticResource H_Color_Primary_White}" />
            <Setter
                Property="Preset"
                Value="{Roundtangle CornerRadius=3}" />
        </Style>

        <Thickness x:Key="H_Thickness_ItemMarginScale">0.5,0.5,0.5,0.5</Thickness>
        <Style x:Key="H_ContainerStyle_CollectionItem"
            BasedOn="{StaticResource H_Style_ContentControl_Carousel_ContainerStyle}"
            TargetType="{x:Type ListBoxItem}">
            <Style.Resources>
                <CornerRadius x:Key="A_StrokeHighlight_ContentRadius">3</CornerRadius>
                <Thickness x:Key="A_StrokeHighlight_InnerThickness">6</Thickness>
                <Thickness x:Key="A_StrokeHighlight_OuterThickness">6</Thickness>
            </Style.Resources>
            <Setter Property="Margin" Value="{Convert {StaticResource H_ItemGap}, Converter={MathOperationConverter Operation=Multiply}, Parameter={StaticResource H_Thickness_ItemMarginScale}, TargetType={x:Type Thickness}}"/>
            <Setter Property="DynamicData.Data">
                <Setter.Value>
                    <DynamicDataSource>
                        <DynamicDataItem 
                            Name="ItemBackgroundStyle"
                            DataType="Style"
                            Value="{StaticResource H_Style_Material_ItemBacking}" />
                    </DynamicDataSource>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="H_ContainerStyle_CollectionItem_Empty"
            TargetType="{x:Type Control}">
            <Setter Property="Margin" Value="{Convert {StaticResource H_ItemGap}, Converter={MathOperationConverter Operation=Multiply}, Parameter={StaticResource H_Thickness_ItemMarginScale}, TargetType={x:Type Thickness}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Control">
                        <FZMaterial Color="{StaticResource H_Color_Glass_Purple_20pc}" Preset="{GlassRoundtangle CornerRadius=3, BlurAmount=High}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Double x:Key="H_PipGap">26</Double>
        <Double x:Key="H_PipSize">40</Double>

        <Style x:Key="H_Style_MilestonePip"
            TargetType="Control">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Decorator x:Name="pip_root" 
                            Height="{StaticResource H_PipSize}" Width="{StaticResource H_PipSize}" 
                            Margin="{Margin 
                                Left={Convert {StaticResource H_PipGap}, Converter={LinearTransformConverter Scale=0.5}},
                                Right={Convert {StaticResource H_PipGap}, Converter={LinearTransformConverter Scale=0.5}},
                                Bottom=-3}"
                            VerticalAlignment="Bottom">
                            <Viewbox x:Name="root_scale" Height="40" Width="40" VerticalAlignment="Center" HorizontalAlignment="Center" >
                                <Grid Height="40" Width="40">
                                    <Viewbox x:Name="selection" Stretch="UniformToFill" Margin="3" Visibility="Collapsed">
                                        <Grid>
                                            <FZMaterial Margin="-4,-2,-4,-6" Preset="{Roundtangle CornerRadius=24, Softness=10}" Color="{StaticResource H_Color_Primary_Black}"/>
                                            <FZMaterial Height="40" Width="40" Margin="0" Preset="{RoundtangleStroke Thickness=3, CornerRadius=20}" Color="{StaticResource H_Color_Primary_White}"/>
                                        </Grid>
                                    </Viewbox>
                                    <FZMaterial Height="34" Width="34" Preset="{RoundtangleStroke Thickness=3, CornerRadius=17}" Color="{StaticResource H_Color_Primary_Black}"/>
                                    <FZMaterial x:Name="backing"
                                        Margin="6" 
                                        Color="{StaticResource H_Color_Primary_Yellow}" >
                                        <FZMaterial.Preset>
                                            <FZMaterialPresetRoundtangle
                                                CornerRadius="14"
                                                GradientAngle="90"/>
                                        </FZMaterial.Preset>

                                    </FZMaterial>
                                        <FZMaterial x:Name="icon" Margin="7" Visibility="Collapsed" />
                                </Grid>
                            </Viewbox>
                        </Decorator>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Selector.IsSelected" Value="True">
                                <Trigger.EnterActions>
                                    <BeginUIStoryboard>
                                        <UIStoryboard FillBehavior="HoldEnd">
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="selection" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{x:Static Visibility.Visible}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ThicknessAnimation Storyboard.TargetName="selection" Storyboard.TargetProperty="Margin" To="0" Duration="0:0:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="selection" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="root_scale" Storyboard.TargetProperty="Height" To="58" Duration="0:0:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="root_scale" Storyboard.TargetProperty="Width" To="58" Duration="0:0:0.2"/>
                                        </UIStoryboard>
                                    </BeginUIStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginUIStoryboard>
                                        <UIStoryboard FillBehavior="Stop">
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="selection" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{x:Static Visibility.Visible}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ThicknessAnimation Storyboard.TargetName="selection" Storyboard.TargetProperty="Margin" To="3" Duration="0:0:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="selection" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="root_scale" Storyboard.TargetProperty="Height" To="40" Duration="0:0:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="root_scale" Storyboard.TargetProperty="Width" To="40" Duration="0:0:0.2"/>
                                        </UIStoryboard>
                                    </BeginUIStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                            <DataTrigger Binding="{Binding Complete}" Value="True">
                                <Setter TargetName="icon" Property="Visibility" Value="Visible"/>
                                <Setter TargetName="icon" Property="ImageSource" Value="game:\Media\UI\Textures\Data_Bound\CollectionCampaign\Tick_Icon.png"/>
                                <Setter TargetName="backing" Property="Color" Value="#fff"/>
                                <Setter TargetName="backing" Property="ImageSource" Value="game:\Media\UI\Textures\Data_Bound\CollectionCampaign\Gold_Value_Background.png"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Claimed}" Value="False">
                                <Setter TargetName="icon" Property="Visibility" Value="Visible"/>
                                <Setter TargetName="icon" Property="ImageSource" Value="game:\Media\UI\Textures\Data_Bound\CollectionCampaign\Reward_Icon.png"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Future}" Value="True">
                                <Setter TargetName="icon" Property="Visibility" Value="Visible"/>
                                <Setter TargetName="icon" Property="ImageSource" Value="game:\Media\UI\Textures\Data_Bound\CollectionCampaign\Lock_Icon.png"/>
                                <Setter TargetName="backing" Property="Color" Value="{StaticResource H_Color_Primary_Grey_80pc}"/>
                            </DataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <MappingConverter x:Key="H_Converter_CampaignToMilestoneBar"
                          Default="">
            <MappingConverterEntry Key="{StaticResource H_Id_DiscoverCampaign}"
                                   Value="game:\Media\UI\Textures\Data_Bound\CollectionCampaign\collection_banner_discover.png" />
            <MappingConverterEntry Key="{StaticResource H_Id_FestivalCampaign}"
                                   Value="game:\Media\UI\Textures\Data_Bound\CollectionCampaign\collection_banner_festival.png" />
        </MappingConverter>
      
        <ControlTemplate x:Key="H_Template_ItemsMilestone"
                         TargetType="ContentControl">
            <Grid x:Name="root" DataContext="{Binding Content.Reward, RelativeSource={RelativeSource TemplatedParent}}"
                local:ManualPassthroughProperty.Input="{Binding Content.ScreenReaderString, RelativeSource={RelativeSource TemplatedParent}}"
                local:ManualPassthroughProperty.Allowed="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"
                local:ScreenReader.Line="{Binding (local:ManualPassthroughProperty.Output), RelativeSource={RelativeSource Self}, Converter={StaticResource A_Converter_TrimInlineMarkup}}"
                local:ScreenReader.LineType="ScreenDescription"
                local:ScreenReader.Event="OnChange">
                <Grid>
                    <DockPanel>
                        <FZMaterial DockPanel.Dock="Right"
                                    Width="98"
                                    Style="{StaticResource A_Style_FZMaterial_RewardBacking_Banner}" />
                        <FZMaterial Color="{StaticResource H_Color_Primary_White}"
                                    Preset="{Roundtangle CornerRadius={CornerRadius TopLeft=45, BottomLeft=45}}" />
                    </DockPanel>
                    <DockPanel>
                        <FZMaterial DockPanel.Dock="Left"
                                    Margin="4,4,0,4"
                                    x:Name="left_backing"
                                    ImageTransform="{ScaleTransform ScaleX=2}"
                                    Width="135"
                                    Color="{StaticResource H_Color_Primary_Black}"
                                    Preset="{Roundtangle CornerRadius={CornerRadius TopLeft=41, BottomLeft=41}}">
                            <Grid Width="121"
                                  HorizontalAlignment="Right"
                                  VerticalAlignment="Center"
                                  Margin="0,0,6,0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="16" />
                                    <RowDefinition Height="18" />
                                    <RowDefinition Height="10" />
                                    <RowDefinition Height="21" />
                                    <RowDefinition Height="18" />
                                </Grid.RowDefinitions>
                                <FZTextBlock Grid.Row="1"
                                             FontFamily="Horizon_B"
                                             CapHeight="16"
                                             x:Name="total_target"
                                             Text="{Loc Campaign.IDS_Reward_Reach}"
                                             Color="{StaticResource H_Color_Primary_White}"
                                             VerticalAlignment="Center"
                                             TextAlignment="Center" />
                                <Viewbox StretchDirection="DownOnly"
                                         Grid.Row="3">
                                    <StackPanel Orientation="Horizontal"
                                                HorizontalAlignment="Center">
                                        <FZTextBlock FontFamily="Horizon_C"
                                                     x:Name="total_total"
                                                     Stretch="None"
                                                     CapHeight="21"
                                                     Text="{Binding Content.Total, RelativeSource={RelativeSource TemplatedParent}, Converter={NumUnitConverter FractionDigits=0}}"
                                                     Color="{StaticResource H_Color_Primary_White}"
                                                     VerticalAlignment="Center"
                                                     TextAlignment="Center" />
                                        <Control Margin="3,-4,-4,-4"
                                                 Style="{Binding CampaignId, RelativeSource={RelativeSource AncestorType=Page}, Converter={StaticResource H_Converter_CampaignToCurrencyControlStyle}}" />
                                    </StackPanel>
                                </Viewbox>
                            </Grid>
                        </FZMaterial>
                        <DockPanel>
                            <Grid DockPanel.Dock="Right">
                                <FZMaterial Style="{StaticResource H_Style_RewardImage}"
                                            HorizontalAlignment="Right"
                                            Height="90"
                                            Width="200"
                                            Stretch="Uniform" />
                            </Grid>
                            <Grid>
                                <StackPanel VerticalAlignment="Center"
                                            Margin="25,0,0,0">
                                    <StackPanel Orientation="Horizontal">
                                        <FZMaterial Preset="{Roundtangle CornerRadius=3}"
                                                    Color="{StaticResource H_Color_Primary_Yellow}"
                                                    x:Name="reward_type_back"
                                                    MinWidth="56"
                                                    Height="26">
                                            <FZTextBlock Text="{Binding RewardType, Converter={StaticResource H_Converter_RewardTypeToString}}"
                                                         x:Name="reward_type"
                                                         Color="{StaticResource H_Color_Primary_Black}"
                                                         Style="{StaticResource A_Style_FZMaterial_RarityTagText}"
                                                         CapHeight="14" />
                                        </FZMaterial>
                                        <Decorator Width="3" />
                                        <Control Style="{StaticResource A_Style_RarityFloatingPin_Mini}" />
                                    </StackPanel>
                                    <Decorator Height="10" />
                                    <Grid>
                                        <FZTextBlock Visibility="{Binding RewardType, Converter={CompareConverter Value={x:Static UIRewardType.Credits}, Equal=Collapsed, NotEqual=Visible}, FallbackValue=Collapsed}"
                                                     Text="{Binding Description}"
                                                     Color="{StaticResource H_Color_Primary_Black}"
                                                     CapHeight="21"
                                                     FontFamily="Horizon_A" />
                                        <FZTextBlock Visibility="{Binding RewardType, Converter={CompareConverter Value={x:Static UIRewardType.Credits}, NotEqual=Collapsed, Equal=Visible}, FallbackValue=Collapsed}"
                                                     Color="{StaticResource H_Color_Primary_Black}"
                                                     CapHeight="21"
                                                     FontFamily="Horizon_A">
                                            <InlineUIContainer>
                                                <Control Margin="0,-4,4,-4"
                                                         Style="{StaticResource H_Style_Control_CreditsIcon}" />
                                            </InlineUIContainer>
                                            <FZRun Text="{Binding Amount, Converter={NumUnitConverter FractionDigits=0}}" />
                                        </FZTextBlock>
                                    </Grid>
                                </StackPanel>
                            </Grid>
                        </DockPanel>
                    </DockPanel>
                </Grid>
            </Grid>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding Content.Complete, RelativeSource={RelativeSource Self}}" Value="True">
                    <Setter TargetName="total_target" Property="Text" Value="{Loc Campaign.IDS_Reward_Reached}"/>
                </DataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Content.Complete, RelativeSource={RelativeSource Self}}" Value="True"/>
                        <Condition Binding="{Binding Content.Claimed, RelativeSource={RelativeSource Self}}" Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <Setter TargetName="total_target" Property="Text" Value="{Loc Campaign.IDS_Reward_Completed}"/>
                    <Setter TargetName="reward_type" Property="Text" Value="{Convert {Loc Campaign.IDS_Reward_Collected}, Converter={StringToUpper}}"/>
                    <Setter TargetName="reward_type_back" Property="Color" Value="#fff"/>
                    <Setter TargetName="reward_type_back" Property="ImageSource" Value="game:\Media\UI\Textures\Data_Bound\CollectionCampaign\Gold_Reward_Collected.png"/>
                    <Setter TargetName="total_target" Property="Color" Value="{StaticResource H_Color_Primary_Black}"/>
                    <Setter TargetName="total_total" Property="Color" Value="{StaticResource H_Color_Primary_Black}"/>
                    <Setter TargetName="left_backing" Property="Color" Value="#fff"/>
                    <Setter TargetName="left_backing" Property="ImageSource" Value="game:\Media\UI\Textures\Data_Bound\CollectionCampaign\Gold_Reward_Collected.png"/>
                </MultiDataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>


        <MultiConverter x:Key="H_Converter_PanelWidth">
            <MultiConverterEntry Converter="{LinearTransformConverter Add=2}"/>
            <MultiConverterEntry Converter="{MathOperationConverter Operation=Multiply}" Parameter="{Convert {StaticResource H_PipSize}, Converter={LinearTransformConverter Add={StaticResource H_PipGap}}}" />
        </MultiConverter>


        <ControlTemplate x:Key="H_Template_Pips" TargetType="ItemsSelector">
            <StackPanel x:Name="pips_root"
                Orientation="Horizontal"
                MultiDataConversion.TargetType="Double"
                MultiDataConversion.Value="{Binding SelectedMilestone.Index, Converter={LinearTransformConverter Scale={Convert {StaticResource H_PipSize}, Converter={LinearTransformConverter Add={StaticResource H_PipGap}}}}}"
                MultiDataConversion.Parameter="{Binding RenderTransform.X, ElementName=panel}"
                MultiDataConversion.Converter="{MathOperationConverter Operation=Subtract}">
                <FZButton
                    HorizontalAlignment="Left"
                    Style="{StaticResource H_Style_TabButton_Previous}"
                    Width="52"
                    Height="40"
                    Panel.ZIndex="10"/>
                <Grid ClipToBounds="True" Margin="0,-30">
                    <Grid.OpacityMask>
                        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                            <LinearGradientBrush.GradientStops>
                                <GradientStopCollection>
                                    <!--sorry-->
                                    <GradientStop Color="#0fff" Offset="{Convert 0, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter=9}"/>
                                    <GradientStop Color="#8fff" Offset="{Convert {Convert {Convert {StaticResource H_PipGap}, Converter={LinearTransformConverter Scale=0.5}}, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter={Convert {StaticResource H_PipSize}, Converter={LinearTransformConverter Add={StaticResource H_PipGap}}}}, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter=9}"/>
                                    <GradientStop Color="#8fff" Offset="{Convert {Convert 1, Converter={LinearTransformConverter Add={Convert {Convert {StaticResource H_PipGap}, Converter={LinearTransformConverter Scale=-0.5}}, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter={Convert {StaticResource H_PipSize}, Converter={LinearTransformConverter Add={StaticResource H_PipGap}}}}}}, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter=9}"/>
                                    <GradientStop Color="#ffff" Offset="{Convert 1, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter=9}"/>
                                    <GradientStop Color="#ffff" Offset="{Convert 8, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter=9}"/>
                                    <GradientStop Color="#8fff" Offset="{Convert {Convert 8, Converter={LinearTransformConverter Add={Convert {Convert {StaticResource H_PipGap}, Converter={LinearTransformConverter Scale=0.5}}, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter={Convert {StaticResource H_PipSize}, Converter={LinearTransformConverter Add={StaticResource H_PipGap}}}}}}, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter=9}"/>
                                    <GradientStop Color="#8fff" Offset="{Convert {Convert 9, Converter={LinearTransformConverter Add={Convert {Convert {StaticResource H_PipGap}, Converter={LinearTransformConverter Scale=-0.5}}, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter={Convert {StaticResource H_PipSize}, Converter={LinearTransformConverter Add={StaticResource H_PipGap}}}}}}, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter=9}"/>
                                    <GradientStop Color="#0fff" Offset="{Convert 9, 
                                        TargetType=Double, Converter={MathOperationConverter Operation=Divide}, Parameter=9}"/>
                                </GradientStopCollection>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Grid.OpacityMask>
                <FZMaterialGlassCapture/>
                <Decorator Margin="0,30">
                    <VirtualizingWrapPanel Style="{StaticResource H_VirtualizingWrapPanel_Default}"
                        BlendValue.SkipInitialInputChanges="2"
                        ScrollOrientation="Horizontal"
                        EmptyItemStyle="{x:Null}"
                        SelectionLimitTop="{Convert {StaticResource H_PipSize}, Converter={LinearTransformConverter Add={StaticResource H_PipGap}}}"
                        SelectionLimitBottom="{Convert {StaticResource H_PipSize}, Converter={LinearTransformConverter Add={StaticResource H_PipGap}}}"
                        ItemWidth="{Convert {StaticResource H_PipSize}, Converter={LinearTransformConverter Add={StaticResource H_PipGap}}}"
                        ItemHeight="{StaticResource H_PipSize}"
                        IsItemsHost="True"
                        HorizontalAlignment="Center"
                        Width="{Binding ItemsSource.Count, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource H_Converter_PanelWidth}}"
                        MaxWidth="{Convert {Convert {StaticResource H_PipSize}, Converter={LinearTransformConverter Add={StaticResource H_PipGap}}}, Converter={LinearTransformConverter Scale=9}}"
                        Height="40"/>
                </Decorator>
                </Grid>
                <FZButton
                    HorizontalAlignment="Right"
                    Style="{StaticResource H_Style_TabButton_Next}" 
                    Width="52"
                    Height="40"
                    Panel.ZIndex="10"/>
            </StackPanel>
        </ControlTemplate>

        <MultiConverter x:Key="H_Converter_Flip01">
            <MultiConverterEntry Converter="{Clamp Min=0, Max=1}"/>
            <MultiConverterEntry Converter="{LinearTransformConverter Scale=-1, Add=1 }"/>
        </MultiConverter>

        <MappingConverter x:Key="H_Converter_CampaignToBannerTextColour"
                          Default="">
            <MappingConverterEntry Key="{StaticResource H_Id_DiscoverCampaign}"
                                   Value="{StaticResource H_Color_Primary_Black}" />
            <MappingConverterEntry Key="{StaticResource H_Id_FestivalCampaign}"
                                   Value="{StaticResource H_Color_Primary_White}" />
        </MappingConverter>

        <Style x:Key="H_Style_Run_BannerHighlight_DJ" TargetType="FZRun">
            <Setter Property="Color" Value="{StaticResource A_Color_Campaign_Discover}"/>
            <Setter Property="FontFamily" Value="Horizon_A"/>
        </Style>
        <Style x:Key="H_Style_Run_BannerHighlight_HF" TargetType="FZRun">
            <Setter Property="Color" Value="{StaticResource A_Color_Campaign_Festival_Highlight}"/>
            <Setter Property="FontFamily" Value="Horizon_A"/>
        </Style>

        <Style x:Key="H_Style_Control_FPIcon_Inline" TargetType="Control" BasedOn="{StaticResource H_Style_Control_FPIcon}">
            <Setter Property="Height" Value="20"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        <Style x:Key="H_Style_Control_DJIcon_Inline" TargetType="Control" BasedOn="{StaticResource H_Style_Control_DJIcon}">
            <Setter Property="Height" Value="20"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>



        <MappingConverter x:Key="H_Markup_Banner_HF">
            <MappingConverterEntry Key="{NoCase currency}" Value="{StaticResource H_Style_Control_FPIcon_Inline}"/>
            <MappingConverterEntry Key="{NoCase highlight}" Value="{StaticResource H_Style_Run_BannerHighlight_HF}"/>
        </MappingConverter>
        <MappingConverter x:Key="H_Markup_Banner_DJ">
            <MappingConverterEntry Key="{NoCase currency}" Value="{StaticResource H_Style_Control_DJIcon_Inline}"/>
            <MappingConverterEntry Key="{NoCase highlight}" Value="{StaticResource H_Style_Run_BannerHighlight_DJ}"/>
        </MappingConverter>

        <Style x:Key="H_Style_BannerText" TargetType="FZTextBlock">
            <Setter Property="MarkupConverter" Value="{StaticResource H_Markup_Banner_HF}"/>
            <Setter Property="Color" Value="{Binding CampaignId, Converter={StaticResource H_Converter_CampaignToBannerTextColour}}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding CampaignId}" Value="{StaticResource H_Id_DiscoverCampaign}">
                    <Setter Property="MarkupConverter" Value="{StaticResource H_Markup_Banner_DJ}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Page.Resources>
    <UIPageTransitionManager.TransitionManager>
        <UIPageTransitionManager Preset="{StaticResource A_UIPageTransitionManagerPreset_Menu}" />
    </UIPageTransitionManager.TransitionManager>
    <Grid>

        <PageInputHandler x:Name="lb_button" Button="LBumper"
                          Command="{Binding ScrollPagePrevCommand, ElementName=tab_bar}"/>
        <PageInputHandler x:Name="rb_button" Button="RBumper"
                          Command="{Binding ScrollPageNextCommand, ElementName=tab_bar}"/>

        <Control Style="{StaticResource A_Style_Control_ScreenBackground}" />
        <FZMaterialGlassCapture/>
        <PageInputHandler x:Name="a_button"
                          Button="A"
                          Command="{Binding SelectCommand}" />
        <PageInputHandler x:Name="b_button"
                          Button="B"
                          Command="{Binding BackCommand}" />
        <PageInputHandler x:Name="redeem_button"
                          Button="X"
                          Command="{Binding RedeemCommand}" />
        <PageInputHandler x:Name="sort_button"
                          Button="Y"
                          Command="{Binding SortCommand}" />
        <PageInputHandler x:Name="jump_button"
                          Button="Back"
                          Command="{Binding JumpCommand}" />
        <PageInputHandler x:Name="purchase_button"
                          Button="Start"
                          Command="{Binding PurchaseCommand}" />
        <ContentControl x:Name="BottomBar"
                        Panel.ZIndex="10"
                        Style="{StaticResource A_Style_ButtonBar}">
            <ControllerButtonPanel x:Name="PART_HelpPanel"
                                   Style="{StaticResource A_Style_ControllerButtonPanel_Default}">
                <ControllerButtonControl Button="{Binding Button, ElementName=a_button}"
                                         Description="{Loc HelpButtons.IDS_Select}"
                                         Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=a_button}" />
                <ControllerButtonControl Button="{Binding Button, ElementName=b_button}"
                                         Description="{Loc HelpButtons.IDS_Back}"
                                         Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=b_button}" />
                <ControllerButtonControl Button="{Binding Button, ElementName=redeem_button}"
                                         Description="{Binding Command.Name, ElementName=redeem_button}"
                                         Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=redeem_button}" />
                <ControllerButtonControl Button="{Binding Button, ElementName=sort_button}"
                                         Description="{Binding Command.Name, ElementName=sort_button}"
                                         Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=sort_button}" />
                <ControllerButtonControl Button="{Binding Button, ElementName=jump_button}"
                                         Description="{Loc HelpButtons.IDS_Manufacturers}"
                                         Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=jump_button}" />
                <ControllerButtonControl Button="{Binding Button, ElementName=purchase_button}"
                                         Description="{Loc HelpButtons.IDS_Purchase}"
                                         Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=purchase_button}" />
                <!--ControllerButtonControl
                    Button="{Binding Button, ElementName=lb_button}"
                    Description="xPrev milestone"
                    Visibility="{Binding Command, FallbackValue=Collapsed, Converter={CompareConverter Value={x:Null}, Equal={x:Static Visibility.Collapsed}, NotEqual={x:Static Visibility.Visible}}, ElementName=lb_button}" />
                <ControllerButtonControl
                    Button="{Binding Button, ElementName=rb_button}"
                    Description="xNext milestone"
                    Visibility="{Binding Command, FallbackValue=Collapsed, Converter={CompareConverter Value={x:Null}, Equal={x:Static Visibility.Collapsed}, NotEqual={x:Static Visibility.Visible}}, ElementName=rb_button}" /-->
            </ControllerButtonPanel>
        </ContentControl>
        <Border Style="{StaticResource A_Style_Border_ScenePadding_Opus}"
                SnapsToDevicePixels="True"
                UseLayoutRounding="True" x:Name="root">
            <StackPanel Orientation="Vertical"
                        Margin="0,50,0,50"
                        Style="{StaticResource A_Style_FrameworkElement_DefaultTransition}"
                        UIPageTransitionManager.TransitionIndex="0"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center">
                <Grid VerticalAlignment="Top" Width="1663" Height="122">
                    <FZMaterial GetSizeFromTexture="True" HorizontalAlignment="Left" Stretch="Uniform" VerticalAlignment="Bottom" ImageSource="{Binding CampaignId, Converter={StaticResource H_Converter_CampaignToMilestoneBar}}"/>

                    <StackPanel Orientation="Horizontal">
                        <Grid Width="164">
                            <FZMaterial Width="145" Margin="14,0,0,0" Stretch="UniformToFill" HorizontalAlignment="Left" VerticalAlignment="Top">
                                <FZMaterial.Style>
                                    <Style TargetType="FZMaterial">
                                        <Setter Property="ImageSource" Value="{Binding Category.IconPath}"/>
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Category.Complete}" Value="True">
                                                <Setter Property="ImageSource" Value="{Binding Category.CompletedIconPath}"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </FZMaterial.Style>
                            </FZMaterial>
                        </Grid>

                        <Grid HorizontalAlignment="Left" Width="344">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="25*"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="15*"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="15*"/>
                            </Grid.RowDefinitions>
                            <FZTextBlock Text="{Binding Category.Name}"
                                         Grid.Row="1"
                                         Color="{Binding CampaignId, Converter={StaticResource H_Converter_CampaignToBannerTextColour}}"
                                         FontFamily="Horizon_C"
                                         TextAlignment="Left"
                                         TextWrapping="Wrap"
                                         LineAdjust="-0.75"
                                         VerticalAlignment="Bottom"
                                         CapHeight="25" 
                                         local:MultiStringFormatter.Format="{Loc Campaign.IDS_ScreenReader_Campaign_TitleAndSubtitle}"
                                         local:MultiStringFormatter.Param0="{Binding Category.Name}"
                                         local:MultiStringFormatter.Param1="{Binding Category.ProgressName}"
                                         local:ScreenReader.Line="{Binding (local:MultiStringFormatter.Output), RelativeSource={RelativeSource Self}, Converter={StaticResource A_Converter_TrimInlineMarkup}}"
                                         local:ScreenReader.LineType="ScreenTitle"
                                         local:ScreenReader.Event="OnLoad"/>
                            <Grid Grid.Row="3"
                                Width="289"
                                Height="40"
                                HorizontalAlignment="Left">
                                <FZMaterial Color="{StaticResource H_Color_Primary_Black}"/>
                                <DockPanel Margin="4,4,0,4">
                                    <Grid DockPanel.Dock="Right" Width="43">
                                        <Control Height="30" Style="{Binding CampaignId, Converter={StaticResource H_Converter_CampaignToCurrencyControlStyle}}" />
                                    </Grid>
                                    <Grid x:Name="prog"
                                        MultiDataConversion.Value="{Binding Category.Progress}"
                                        MultiDataConversion.TargetType="Double"
                                        MultiDataConversion.Parameter="{Binding Category.Total}"
                                        MultiDataConversion.Converter="{MathOperationConverter Operation=Divide}"
                                        local:ScreenReader.Line="{Binding (local:MultiStringFormatter.Output), RelativeSource={RelativeSource Self}, Converter={StaticResource A_Converter_TrimInlineMarkup}}"
                                        local:ScreenReader.LineType="ScreenSubtitle"
                                        local:ScreenReader.Event="OnLoad"
                                        local:MultiStringFormatter.Format="{Binding CampaignId, Converter={StaticResource H_Converter_CampaignToScreenReadableProgressFormat}}"
                                        local:MultiStringFormatter.Param0="{Binding Category.Progress}"
                                        local:MultiStringFormatter.Param1="{Binding Category.Total}">
                                        <FZMaterial x:Name="prog_unfinished" Color="#4d4d4d" RenderTransformOrigin="1,0">
                                            <FZMaterial.RenderTransform>
                                                <ScaleTransform ScaleX="{Binding (MultiDataConversion.Output), ElementName=prog, Converter={StaticResource H_Converter_Flip01}}" />
                                            </FZMaterial.RenderTransform>
                                        </FZMaterial>
                                        <FZMaterial x:Name="prog_backing" Color="{Binding CampaignId, RelativeSource={RelativeSource AncestorType=Page}, Converter={StaticResource H_Converter_CampaignToProgressBarColour}}">
                                            <FZMaterial.RenderTransform>
                                                <ScaleTransform ScaleX="{Binding (MultiDataConversion.Output), ElementName=prog, Converter={Clamp Min=0, Max=1}}" />
                                            </FZMaterial.RenderTransform>
                                        </FZMaterial>

                                        <FZTextBlock TextAlignment="Center"
                                            x:Name="prog_text"
                                            VerticalAlignment="Center"
                                            FontFamily="Horizon_C" Color="{StaticResource H_Color_Primary_White}" CapHeight="16" >
                                            <FZRun x:Name="prog_value" Text="{Binding Category.Progress, Converter={NumUnitConverter FractionDigits=0}}"/>
                                            <FZRun x:Name="prog_slash" Text=" / "/>
                                            <FZRun x:Name="prog_total" Text="{Binding Category.Total, Converter={NumUnitConverter FractionDigits=0}}"/>
                                        </FZTextBlock>
                                    </Grid>
                                </DockPanel>
                            </Grid>
                        </Grid>
                        <StackPanel Orientation="Horizontal" Height="113" VerticalAlignment="Bottom">
                            <FZMaterial Color="{Binding CampaignId, Converter={StaticResource H_Converter_CampaignToBannerTextColour}}" Width="3" Height="74"/>
                            <Grid Width="440">
                                <FZTextBlock Style="{StaticResource H_Style_BannerText}" Margin="18,0" VerticalAlignment="Center" TextWrapping="Wrap" LineAdjust="-0.75" Text="{Binding Category.ProgressName}" CapHeight="16" FontFamily="Horizon_B"/>
                            </Grid>
                        </StackPanel>
                    </StackPanel>

                    <Grid x:Name="milestones" HorizontalAlignment="Right" Margin="0,0,30,0">

                        <Grid Panel.ZIndex="10" VerticalAlignment="Top" HorizontalAlignment="Center" RenderTransform="{ScaleTransform ScaleY=-1}" RenderTransformOrigin="0,0">
                            <Grid Margin="0,0,0,0" RenderTransform="{ScaleTransform ScaleY=-1}" RenderTransformOrigin="0,0.5" HorizontalAlignment="Center"
                                   >
                                <FZMaterial Color="{StaticResource H_Color_Primary_Black}" Height="16" VerticalAlignment="Bottom"/>
                                <ItemsSelector x:Name="pips"
                                    x:Name="tab_bar"
                                    PageSize="1"
                                    ItemsSource="{Binding MilestonesView}"
                                    ItemContainerStyle="{StaticResource H_Style_MilestonePip}"
                                    SelectedItem="{Binding SelectedMilestone, Mode=TwoWay}"
                                    Template="{StaticResource H_Template_Pips}">
                                    <ItemsSelector.Triggers>
                                        <EventTrigger RoutedEvent="ItemsSelector.PrevSel">
                                            <StartAudioTrigger EventName="UI_Rewards_Slide" />
                                        </EventTrigger>
                                        <EventTrigger RoutedEvent="ItemsSelector.NextSel">
                                            <StartAudioTrigger EventName="UI_Rewards_Slide" />
                                        </EventTrigger>
                                    </ItemsSelector.Triggers>
                                </ItemsSelector>
                            </Grid>
                        </Grid>

                        <Grid Height="102" Width="667" >

                            <FZMaterial Color="{StaticResource H_Color_Primary_Black}" Preset="{Roundtangle CornerRadius=51}"/>
                            <Decorator Margin="5">
                                <FZMaterial CaptureSubgraph="True" Preset="{Roundtangle CornerRadius=45}">
                                    <Grid ClipToBounds="True">
                                    <Grid Margin="1">
                                        <Grid Style="{StaticResource H_Style_MilestoneAnimateBlur_AfterFirst}">
                                            <Grid Style="{StaticResource H_Style_MilestoneFlip}">
                                                <Decorator x:Name="milestone_off"
                                                           Style="{StaticResource H_Style_MilestoneAnimateOff_AfterFirst}">
                                                    <Decorator Style="{StaticResource H_Style_MilestoneFlip}">
                                                        <ContentControl Template="{StaticResource H_Template_ItemsMilestone}" 
                                                            LastBinding.Input="{Binding SelectedMilestone, NotifyOnTargetUpdated=True}"
                                                            Content="{Binding (LastBinding.Output), RelativeSource={RelativeSource Self}}" Tag="False"/>
                                                    </Decorator>
                                                </Decorator>
                                                <Decorator Style="{StaticResource H_Style_MilestoneAnimateOn_AfterFirst}">
                                                    <Decorator Style="{StaticResource H_Style_MilestoneFlip}">
                                                        <ContentControl Template="{StaticResource H_Template_ItemsMilestone}" 
                                                            Content="{Binding SelectedMilestone, NotifyOnTargetUpdated=True}" Tag="True"/>
                                                    </Decorator>
                                                </Decorator>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                    </Grid>
                                </FZMaterial>
                            </Decorator>


                        </Grid>

                    </Grid>
                </Grid>
                <Decorator Height="14" />
                <StackPanel Orientation="Horizontal">
                    <Decorator x:Name="menu_wrapper" Margin="10">
                    <Decorator Margin="-10">
                    <WrapListBox x:Name="menu"
                                 ItemsSource="{Binding ItemsView}"
                                 ScrollOrientation="Vertical"
                                 Width="{Convert {StaticResource H_ItemWidth}, Converter={LinearTransformConverter Scale={StaticResource H_ItemsH}, Add={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale={StaticResource H_ItemsH}}}}}"
                                 Height="{Convert {StaticResource H_ItemHeight}, Converter={LinearTransformConverter Scale={StaticResource H_ItemsV}, Add={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale={StaticResource H_ItemsV}}}}}"
                                 HorizontalAlignment="Center"
                                 Template="{StaticResource A_ControlTemplate_Carousel_Default}"
                                 ItemContainerStyle="{StaticResource H_ContainerStyle_CollectionItem}"
                                 EmptyItemStyle="{StaticResource H_ContainerStyle_CollectionItem_Empty}"
                                 ItemTemplate="{StaticResource H_Template_CollectionCampaignItem}"
                                 ItemWidth="{Convert {StaticResource H_ItemWidth}, Converter={LinearTransformConverter Add={StaticResource H_ItemGap}}}"
                                 ItemHeight="{Convert {StaticResource H_ItemHeight}, Converter={LinearTransformConverter Add={StaticResource H_ItemGap}}}"
                                 SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                                 SelectedIndex="{Binding SelectedIndex, Mode=OneWayToSource}"
                                 FocusOnPageFocusGained.SelectorSelectedItem="True"
                                 Margin="{Margin 
                                    Left={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale=-0.5}}, 
                                    Top={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale=-0.5}},
                                    Right={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale=-0.5}},
                                    Bottom={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale=-0.5}}
                                    }">
                        <WrapListBox.Resources>
                            <Thickness x:Key="H_Dynamic_CarouselInnerClip">12</Thickness>
                            <Thickness x:Key="H_Dynamic_CarouselOuterClip">16</Thickness>
                        </WrapListBox.Resources>
                    </WrapListBox>
                    </Decorator></Decorator>
                    <ScrollBar Style="{StaticResource A_Style_ScrollBar_Default}"
                               Margin="10,0,0,0"
                               Panel.ZIndex="0"
                               Minimum="{Binding ScrollWindowMin, ElementName=menu}"
                               Maximum="{Binding ScrollWindowMax, ElementName=menu}"
                               Value="{Binding ScrollWindowValue, ElementName=menu, Mode=TwoWay}"
                               ViewportSize="{Binding ScrollWindowSize, ElementName=menu}" />
                </StackPanel>
            </StackPanel>
        </Border>

        <Control Template="{StaticResource H_Template_RewardWidget}" />
    </Grid>
</Page>
