<Page xmlns:local="clr-namespace:ForzaUI;assembly="
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:System="clr-namespace:System;assembly=mscorlib"
      x:Class="ForzaUI.A_SkillTree" 
      mc:Ignorable="d"
      Style="{StaticResource A_Style_Page_Generic}"
      DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <local:UIPageTransitionManager.TransitionManager>
        <local:UIPageTransitionManager Preset="{StaticResource A_UIPageTransitionManagerPreset_Menu}"/>
    </local:UIPageTransitionManager.TransitionManager>

    <Page.Resources>
        <Color x:Key="A_Color_Perk_Owned">#FF00B592</Color>
        <Color x:Key="A_Color_Perk_Locked">#80E8E8E8</Color>
        <Color x:Key="A_Color_Perk_Unlocked">#FFFFFFFF</Color>
        <Color x:Key="A_Color_Perk_UsesBackground_Locked">#C0969696</Color>
        <Color x:Key="A_Color_Perk_UsesBackground_Unlocked">#969696</Color>
        <Color x:Key="A_Color_Perk_UsesBackground_UsesAvailable">#FFFFFF</Color>
        <Color x:Key="A_Color_Perk_UsesText_UsesAvailableSelected">#FF3302</Color>
        <Color x:Key="A_Color_Perk_UsesText_UsesAvailableUnselected">#8DFFFFFF</Color>
        <Color x:Key="A_Color_Perk_IconOwned">#FFFFFF</Color>
        <Color x:Key="A_Color_Perk_IconNotOwned">#4D404040</Color>
        <Color x:Key="A_Color_Perk_CostInfoText">#FF00B592</Color>

        <System:Double x:Key="A_Double_SkillPerkTile_Height">121</System:Double>
        <System:Double x:Key="A_Double_SkillPerkTile_Width">121</System:Double>
        <System:Double x:Key="A_Double_SkillPerkTile_CenterX">69</System:Double>

        <System:Double x:Key="A_Double_LargeGlowMaxOpacity">0.8</System:Double>
        <System:Double x:Key="A_Double_CurrentItemGlowMaxOpacity">0.8</System:Double>
        <System:Double x:Key="A_Double_NextItemGlowMaxOpacity">0.8</System:Double>

        <CornerRadius x:Key="A_CornerRadius_SkillPerkTile">9</CornerRadius>
        <CornerRadius x:Key="A_CornerRadius_SkillPerkTile_TopOnly">9,9,0,0</CornerRadius>
        <CornerRadius x:Key="A_CornerRadius_SkillPerkTile_BottomOnly">0,0,9,9</CornerRadius>

        <Thickness x:Key="A_Thickness_SkillPerkTile_Margin">2,2,2,2</Thickness>

        <Style x:Key="A_Style_FZMaterial_SkillPerkTile_Background" TargetType="local:FZMaterial" >
            <Setter Property="Color" Value="{StaticResource A_Color_Perk_Unlocked}" />
            <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetGlassRoundtangle_GlassPanel_OuterAll}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsTemporary}" Value="True">
                    <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetGlassRoundtangle_GlassPanel_OuterTopOnly}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_FZMaterial_SkillPerkTile_Background_Flipped"
               BasedOn="{StaticResource A_Style_FZMaterial_SkillPerkTile_Background}"
               TargetType="local:FZMaterial">
            <Setter Property="Color" Value="{StaticResource A_Color_Perk_Owned}" />
        </Style>

        <Style x:Key="A_Style_FZMaterial_SkillPerkTile_Uses_Flipped" TargetType="{x:Type local:FZMaterial}">
            <Setter Property="Color" Value="{StaticResource A_Color_Perk_UsesBackground_UsesAvailable}" />
            <Setter Property="Height" Value="28" />
            <Setter Property="Visibility" Value="{Binding IsTemporary, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" />
            <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetGlassRoundtangle_GlassPanel_OuterBottomOnly}" />
        </Style>

        <Style x:Key="A_Style_FZMaterial_SkillPerkTile_Uses" TargetType="{x:Type local:FZMaterial}" BasedOn="{StaticResource A_Style_FZMaterial_SkillPerkTile_Uses_Flipped}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding UsesRemaining}" Value="0">
                    <Setter Property="Color" Value="{StaticResource A_Color_Perk_UsesBackground_Unlocked}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding IsUnlocked}" Value="False">
                    <Setter Property="Color" Value="{StaticResource A_Color_Perk_UsesBackground_Locked}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_FZTextBlock_SkillPerkUses_Tile_Flipped" TargetType="{x:Type local:FZTextBlock}" BasedOn="{StaticResource A_Style_FZTextBlock_Heading_Tight}">
            <Setter Property="Color" Value="{StaticResource A_Color_Perk_UsesText_UsesAvailableSelected}" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="CapHeight" Value="17" />
        </Style>

        <Style x:Key="A_Style_FZTextBlock_SkillPerkUses_Tile" TargetType="{x:Type local:FZTextBlock}" BasedOn="{StaticResource A_Style_FZTextBlock_SkillPerkUses_Tile_Flipped}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsUnlocked}" Value="False">
                    <Setter Property="Opacity" Value="0" />
                </DataTrigger>
                <DataTrigger Binding="{Binding UsesRemaining}" Value="0">
                    <Setter Property="Color" Value="{StaticResource A_Color_Perk_UsesText_UsesAvailableUnselected}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_FZMaterial_ItemIcon" TargetType="{x:Type local:FZMaterial}">
            <Setter Property="Color" Value="{StaticResource A_Color_Perk_IconOwned}" />
            <Setter Property="ImageSource" Value="{Binding SmallIconPath}"/>
            <Setter Property="MaxHeight" Value="128"/>
            <Setter Property="MaxWidth" Value="128"/>
            <Setter Property="Stretch" Value="Uniform"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Opacity" Value="1"/>
        </Style>

        <local:FZMaterialPresetRoundtangleStroke x:Key="A_FZMaterialPresetRoundtangleStroke_GradientHighlight_CarMastery_HighlightAll"
                                                 BasedOn="{StaticResource A_FZMaterialPresetRoundtangleStroke_Rollover}"
                                                 CornerRadius="{StaticResource A_CornerRadius_Highlight_All}"
                                                 Thickness="6"/>

        <Style x:Key="A_Style_FZMaterial_SkillItemShadow"
               TargetType="{x:Type local:FZMaterial}"
               BasedOn="{StaticResource A_Style_FZMaterial_ShadowBase}">
            <Setter Property="Preset">
                <Setter.Value>
                    <local:FZMaterialPresetSelfShadow Softness="20" />
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="A_Style_ListBoxItem_SkillPerk" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Margin" Value="{StaticResource A_Thickness_SkillPerkTile_Margin}"/>
            <Setter Property="Width" Value="{StaticResource A_Double_SkillPerkTile_Width}"/>
            <Setter Property="Height" Value="{StaticResource A_Double_SkillPerkTile_Height}"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Panel.ZIndex" Value="0" />
            <Setter Property="local:RecursiveFocusOnMouseOverBehaviour.Self" Value="True" />
            <Setter Property="local:SetSelectedOnMouseOverBehaviour.Self" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <ControlTemplate.Resources>

                            <!-- Duration should be A_Duration_Button_Select -->
                            <local:UIStoryboard x:Key="SelectItemStory">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Grid_Container">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.06">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Grid_Container">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.06">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemHighlight">
                                    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FlippedItemHighlight">
                                    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemSoftShadow">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.6">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ItemSoftShadow">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.4">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ItemSoftShadow">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1.4">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </local:UIStoryboard>

                            <local:UIStoryboard x:Key="DeselectItemStory" DurationOverride="0:0:0.36">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Grid_Container">
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Grid_Container">
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemHighlight">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FlippedItemHighlight">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemSoftShadow">
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ItemSoftShadow">
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ItemSoftShadow">
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </local:UIStoryboard>

                            <local:UIStoryboard x:Key="PurchaseItemStory" FillBehavior="Stop">
                                <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:AudioEvent.SoundName)" Storyboard.TargetName="PurchaseAudioEvent">
                                    <DiscreteStringKeyFrame KeyTime="0:0:0.0" Value=""/>
                                    <DiscreteStringKeyFrame KeyTime="0:0:0.25" Value="/Master/UI/Perks/HZ2_SFX_HUD_Perks_Activate_01" />
                                </StringAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemHighlightContainer" Duration="0:0:2.9" FillBehavior="Stop">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="1" />
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="0" />
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FlippedItemHighlightContainer" Duration="0:0:2.9" FillBehavior="Stop">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0" />
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:2.4" Value="1" />
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Angle" Storyboard.TargetName="PanelRotation3D" Duration="0:0:2.9" FillBehavior="Stop">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.16" Value="0" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.66" Value="-180">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseInOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="OffsetZ" Storyboard.TargetName="PanelTranslation3D">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.16" Value="-40">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseInOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:1.0" Value="-40" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:1.23" Value="0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseIn" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:2.5" Value="0" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.86" Value="0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Grid_Container">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="1.06" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:1.23" Value="1.0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:2.5" Value="1.0" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.86" Value="1.06">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Grid_Container">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="1.06" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:1.23" Value="1.0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:2.5" Value="1.0" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.86" Value="1.06">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FlippedItemContent" Duration="0:0:2.9" FillBehavior="Stop">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Hidden}" />
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Visible}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemContent" Duration="0:0:2.9" FillBehavior="Stop">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}" />
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Hidden}" />
                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LargeGlow">
                                    <LinearDoubleKeyFrame KeyTime="0:0:1.2" Value="0" />
                                    <LinearDoubleKeyFrame KeyTime="0:0:1.26" Value="{StaticResource A_Double_LargeGlowMaxOpacity}" />
                                    <LinearDoubleKeyFrame KeyTime="0:0:1.6" Value="{StaticResource A_Double_LargeGlowMaxOpacity}" />
                                    <LinearDoubleKeyFrame KeyTime="0:0:2.0" Value="0" />
                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="LargeGlow">
                                    <LinearDoubleKeyFrame KeyTime="0:0:1.2" Value="0" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:1.26" Value="9" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.0" Value="16">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="LargeGlow">
                                    <LinearDoubleKeyFrame KeyTime="0:0:1.2" Value="0" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:1.26" Value="9" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.0" Value="16">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemSoftShadowContainer">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.16" Value="0.5">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseInOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:1.0" Value="0.5" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:1.23" Value="0.0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseIn" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:2.5" Value="0.0" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.86" Value="1.0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ItemSoftShadowContainer">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.16" Value="1.1">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseInOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseIn" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.66" Value="1.1">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:1.0" Value="1.1" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:1.23" Value="0.66">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseIn" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:2.5" Value="0.66" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.86" Value="1.0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ItemSoftShadowContainer">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.16" Value="1.1">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseInOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:1.0" Value="1.1" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:1.23" Value="1.0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseIn" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:2.5" Value="1.0" />
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.86" Value="1.0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemGlow">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0" />
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:1.23" Value="{StaticResource A_Double_CurrentItemGlowMaxOpacity}" />
                                    <LinearDoubleKeyFrame KeyTime="0:0:1.73" Value="{StaticResource A_Double_CurrentItemGlowMaxOpacity}" />
                                    <LinearDoubleKeyFrame KeyTime="0:0:2.290" Value="0" />
                                </DoubleAnimationUsingKeyFrames>

                                <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:EventFire.EventName)" Storyboard.TargetName="EventFire">
                                    <DiscreteStringKeyFrame KeyTime="0:0:0" Value=""/>
                                    <DiscreteStringKeyFrame KeyTime="0:0:1.23" Value="UnlockReady"/>
                                    <DiscreteStringKeyFrame KeyTime="0:0:2.9" Value="PurchaseComplete"/>
                                    <DiscreteStringKeyFrame KeyTime="0:0:3.2" Value=""/>
                                </StringAnimationUsingKeyFrames>
                            </local:UIStoryboard>

                            <local:UIStoryboard x:Key="UnlockItemStory" FillBehavior="Stop">
                                <!-- The adjacent item state change is normally triggered by UnlockReady,
                                     but it isn't when using SkillPerks/EnableAnimationTesting.
                                     Use this to force the change via storyboard. -->
                               <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemGlow">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0" />
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:1.23" Value="{StaticResource A_Double_NextItemGlowMaxOpacity}" />
                                    <LinearDoubleKeyFrame KeyTime="0:0:2.290" Value="0" />
                                </DoubleAnimationUsingKeyFrames>

                            </local:UIStoryboard>

                        </ControlTemplate.Resources>

                        <local:FZButton Style="{StaticResource A_Style_Button_EmptyButton}"
                                        Command="{Binding OnPerkItemSelectedCommand, RelativeSource={RelativeSource AncestorType=Page}}">
                            <Grid>
                                <Grid x:Name="ItemSoftShadowContainer" IsHitTestVisible="False">
                                    <Grid.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform />
                                        </TransformGroup>
                                    </Grid.RenderTransform>
                                    <local:FZMaterial x:Name="ItemSoftShadow" Style="{StaticResource A_Style_FZMaterial_SkillItemShadow}" Color="#70000000" Margin="-5" Opacity="0" RenderTransformOrigin="0.5,0.5">
                                        <local:FZMaterial.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform/>
                                                <SkewTransform/>
                                                <RotateTransform/>
                                                <TranslateTransform />
                                            </TransformGroup>
                                        </local:FZMaterial.RenderTransform>
                                    </local:FZMaterial>
                                </Grid>

                                <Grid x:Name="Grid_Container" RenderTransformOrigin="0.5,0.5" local:ZPanel.ZOffset="0.0">
                                    <Grid.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Grid.RenderTransform>
                                    <local:ZPanel.Transform>
                                        <Transform3DGroup>
                                            <RotateTransform3D CenterX="{StaticResource A_Double_SkillPerkTile_CenterX}">
                                                <RotateTransform3D.Rotation>
                                                    <AxisAngleRotation3D x:Name="PanelRotation3D" Axis="0,-1,0" Angle="0" />
                                                </RotateTransform3D.Rotation>
                                            </RotateTransform3D>
                                            <TranslateTransform3D x:Name="PanelTranslation3D" OffsetZ="0" />
                                            <TranslateTransform3D x:Name="SelectionTranslation3D" OffsetZ="0" />
                                        </Transform3DGroup>
                                    </local:ZPanel.Transform>

                                    <Grid x:Name="EmptyItemStyle"
                                          Visibility="{Binding IsValid, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}">
                                        <Grid>
                                            <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_FlatPanel_Tile}"
                                                              Opacity="0.3" />
                                            <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassPanel_Pill}"
                                                              Margin="2"
                                                              Color="{StaticResource A_Color_GlassPanel_Interactive}" />
                                        </Grid>
                                    </Grid>

                                    <Grid Visibility="{Binding IsValid, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
                                        <Grid x:Name="ItemContent"
                                              Visibility="Visible">
                                            <Grid x:Name="ItemHighlightContainer">
                                                <local:FZMaterial x:Name="ItemHighlight"
                                                                  Preset="{StaticResource A_FZMaterialPresetRoundtangleStroke_GradientHighlight_CarMastery_HighlightAll}"
                                                                  Opacity="0"
                                                                  Margin="-5"/>
                                            </Grid>

                                            <DockPanel>
                                                <local:FZMaterial x:Name="ItemUsesBackground"
                                                                  Style="{StaticResource A_Style_FZMaterial_SkillPerkTile_Uses}"
                                                                  DockPanel.Dock="Bottom">
                                                    <local:FZTextBlock Text="{Binding UsesRemaining, Converter={StaticResource A_NumUnitConverter_ShowUnit_0dp}}"
                                                                       Style="{StaticResource A_Style_FZTextBlock_SkillPerkUses_Tile}"/>
                                                </local:FZMaterial>
                                                <local:FZMaterial x:Name="ItemBackground"
                                                                  Style="{StaticResource A_Style_FZMaterial_SkillPerkTile_Background}" />
                                            </DockPanel>

                                            <local:FZMaterial x:Name="ItemIcon"
                                                              Style="{StaticResource A_Style_FZMaterial_ItemIcon}"
                                                              Color="{StaticResource A_Color_Perk_IconNotOwned}" />
                                        </Grid>

                                        <Grid x:Name="FlippedItemContent"
                                              Visibility="Hidden">
                                            <local:ZPanel.Transform>
                                                <Transform3DGroup>
                                                    <RotateTransform3D CenterX="{StaticResource A_Double_SkillPerkTile_CenterX}">
                                                        <RotateTransform3D.Rotation>
                                                            <AxisAngleRotation3D Axis="0,-1,0" Angle="180" />
                                                        </RotateTransform3D.Rotation>
                                                    </RotateTransform3D>
                                                </Transform3DGroup>
                                            </local:ZPanel.Transform>

                                            <Grid x:Name="FlippedItemHighlightContainer">
                                                <local:FZMaterial x:Name="FlippedItemHighlight"
                                                                  Preset="{StaticResource A_FZMaterialPresetRoundtangleStroke_GradientHighlight_CarMastery_HighlightAll}"
                                                                  Opacity="0"
                                                                  Margin="-5"/>
                                            </Grid>

                                            <DockPanel>
                                                <local:FZMaterial x:Name="FlippedItemUsesBackground"
                                                                  Style="{StaticResource A_Style_FZMaterial_SkillPerkTile_Uses_Flipped}"
                                                                  DockPanel.Dock="Bottom">
                                                    <local:FZTextBlock Text="{Binding UsesTotal, Converter={StaticResource A_NumUnitConverter_ShowUnit_0dp}}"
                                                                       Style="{StaticResource A_Style_FZTextBlock_SkillPerkUses_Tile_Flipped}"/>
                                                </local:FZMaterial>
                                                <local:FZMaterial x:Name="FlippedItemBackground"
                                                                  Style="{StaticResource A_Style_FZMaterial_SkillPerkTile_Background_Flipped}"/>
                                            </DockPanel>

                                            <local:FZMaterial x:Name="FlippedItemIcon"
                                                          Style="{StaticResource A_Style_FZMaterial_ItemIcon}"/>
                                        </Grid>
                                    </Grid>

                                    <local:FZMaterial x:Name="HitTestMaterial"
                                                      Opacity="0.0f" />

                                </Grid>

                                <local:FZMaterial x:Name="ItemGlow" 
                                                      RenderTransformOrigin="0.5, 0.5"
                                                      ImageSource="/ForzaUI;component/Textures/Anthem/Highlights/Square_Glow.png"
                                                      Opacity="0"
                                                      Color="#F3FFFFFF"
                                                      IsHitTestVisible="False"
                                                  Preset="{StaticResource A_FZMaterialPresetAdditive}">
                                    <local:FZMaterial.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1.85" ScaleY="1.85" />
                                            <SkewTransform />
                                            <RotateTransform />
                                            <TranslateTransform />
                                        </TransformGroup>
                                    </local:FZMaterial.RenderTransform>
                                </local:FZMaterial>

                                <local:FZMaterial x:Name="LargeGlow" 
                                                  RenderTransformOrigin="0.5, 0.5"
                                                  Opacity="0"
                                                  Color="#9AFFFFFF"
                                                  Preset="{StaticResource A_FZMaterialPresetAdditive}"
                                                  ImageSource="/ForzaUI;component/Textures/Anthem/HUD/SkillsLargeGlow.png"
                                                  local:ZPanel.DisableClipping="True">
                                    <local:FZMaterial.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="0" ScaleY="0"/>
                                            <SkewTransform />
                                            <RotateTransform />
                                            <TranslateTransform />
                                        </TransformGroup>
                                    </local:FZMaterial.RenderTransform>
                                </local:FZMaterial>

                                <local:AudioEvent x:Name="PurchaseAudioEvent" />
                                <local:EventFire x:Name="EventFire" />
                            </Grid>
                        </local:FZButton>

                        <ControlTemplate.Triggers>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding (Selector.IsSelected), RelativeSource={RelativeSource Self}}" Value="True" />
                                    <Condition Binding="{Binding IsValid}" Value="True" />
                                </MultiDataTrigger.Conditions>
                                <MultiDataTrigger.ExitActions>
                                    <BeginStoryboard x:Name="HideSelected_BeginStoryboard" HandoffBehavior="SnapshotAndReplace" Storyboard="{StaticResource DeselectItemStory}"/>
                                </MultiDataTrigger.ExitActions>
                                <MultiDataTrigger.EnterActions>
                                    <BeginStoryboard x:Name="ShowSelected_BeginStoryboard" HandoffBehavior="SnapshotAndReplace" Storyboard="{StaticResource SelectItemStory}"/>
                                </MultiDataTrigger.EnterActions>
                            </MultiDataTrigger>

                            <DataTrigger Binding="{Binding IsUnlocked}" Value="False">
                                <Setter TargetName="ItemBackground" Property="Color" Value="{StaticResource A_Color_Perk_Locked}" />
                            </DataTrigger>

                            <DataTrigger Binding="{Binding IsUnlocked}" Value="True">
                                <Setter TargetName="ItemIcon" Property="Color" Value="#969696" />
                            </DataTrigger>

                            <DataTrigger Binding="{Binding IsOwned}" Value="True">
                                <Setter TargetName="ItemBackground" Property="Color" Value="{StaticResource A_Color_Perk_Owned}" />
                                <Setter TargetName="ItemIcon" Property="Color" Value="{StaticResource A_Color_Perk_IconOwned}" />
                            </DataTrigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Selector.IsSelected" Value="True">
                    <Setter Property="Panel.ZIndex" Value="3"/>
                </Trigger>
                <DataTrigger Binding="{Binding IsValid}" Value="False">
                    <Setter Property="IsEnabled" Value="False"/>
                    <Setter Property="IsHitTestVisible" Value="False"/>
                    <Setter Property="Panel.ZIndex" Value="0"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <ControlTemplate x:Key="A_ControlTemplate_CommonListBox_SkillPerksTemplate"
                         TargetType="{x:Type local:CommonListBox}">
            <StackPanel>
                <WrapPanel Orientation="Horizontal" IsItemsHost="True"/>
            </StackPanel>
        </ControlTemplate>

        <Style x:Key="A_Style_ListBox_CarMastery"
               TargetType="{x:Type local:CommonListBox}"
               BasedOn="{StaticResource A_Style_ListBox_TextMenu_Default}">
            <Setter Property="MaxWidth" Value="500" />
            <Setter Property="DataContext" Value="{Binding SelectedPage}" />
            <Setter Property="local:FocusOnPageFocusGained.SelectorSelectedItem" Value="True" />
            <Setter Property="local:SelectorSelectedItem.FocusWhenContainersGenerated" Value="True" />
            <Setter Property="ItemContainerStyle" Value="{StaticResource A_Style_ListBoxItem_SkillPerk}"/>
            <Setter Property="Template" Value="{StaticResource A_ControlTemplate_CommonListBox_SkillPerksTemplate}" />
            <Setter Property="ItemsSource" Value="{Binding Collection}" />
            <Setter Property="SelectedItem" Value="{Binding SelectedItem}" />
        </Style>

        <Style x:Key="A_Style_FZTextBlock_DescriptionPanelHeader"
               TargetType="local:FZTextBlock"
               BasedOn="{StaticResource A_Style_FZTextBlock_HeaderBlock}">
            <Setter Property="CapHeight" Value="15" />
            <Setter Property="FontFamily" Value="Horizon_C" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="Margin" Value="16,0" />
        </Style>

        <Style x:Key="A_Style_AutoScrollPanel_PerkDescription" BasedOn="{StaticResource A_Style_AutoScrollPanel_Masked}" TargetType="local:AutoScrollPanel">
            <Style.Resources>
                <ControlTemplate x:Key="A_ControlTemplate_AutoscrollTemplate_Dynamic">
                    <local:FZTextBlock Text="{Binding Description}"
                                       Style="{StaticResource A_Style_FZTextBlock_DescriptionBlockBody}"
                                       Margin="0"
                                       CapHeight="15"
                                       TextWrapping="Wrap" />
                </ControlTemplate>
            </Style.Resources>
        </Style>

        <local:MappingConverter x:Key="A_Converter_VisibleWhenUsesRemaining"
                                Default="{x:Static Visibility.Visible}">
            <local:MappingConverterEntry Key="0" Value="{x:Static Visibility.Collapsed}" />
            <local:MappingConverterEntry Key="-1" Value="{x:Static Visibility.Collapsed}" />
        </local:MappingConverter>

        <ImageSource x:Key="A_BitmapImage_PerkPointIcon">/ForzaUI;component/Textures/Anthem/Icons/InfoBoxes/Perk.png</ImageSource>

        <ControlTemplate x:Key="A_ControlTemplate_InfoBox_CarMasteryCost"
                         TargetType="{x:Type ContentControl}">
            <DockPanel>
                <local:FZMaterial DockPanel.Dock="Left"
                                  Width="{TemplateBinding Height}"
                                  Style="{StaticResource A_Style_FZMaterial_FlatPanel_LeftHeaderPanel}"
                                  Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterLeftOnly}">
                    <local:FZMaterial ImageSource="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
                </local:FZMaterial>
                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_FlatPanel_TileRight}"
                                  Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterRightOnly}">
                    <ContentPresenter Margin="12,0"/>
                </local:FZMaterial>
            </DockPanel>
        </ControlTemplate>

        <Style x:Key="A_Style_ContentControl_CostInfoBox"
               TargetType="ContentControl">
            <Setter Property="Template"
                    Value="{StaticResource A_ControlTemplate_InfoBox_CarMasteryCost}" />
            <Setter Property="Tag"
                    Value="{StaticResource A_BitmapImage_PerkPointIcon}" />
            <Setter Property="MinWidth"
                    Value="244" />
            <Setter Property="Height"
                    Value="90" />
        </Style>

        <Style x:Key="A_Style_FZMaterial_CostInfoBoxShadow"
               TargetType="local:FZMaterial"
               BasedOn="{StaticResource A_Style_FZMaterial_TitleShadow}">
        </Style>

        <Style x:Key="A_Style_FZTextBlock_CostInfoBox_PerkPoints"
               TargetType="local:FZTextBlock"
               BasedOn="{StaticResource A_Style_FZTextBlock_HorizonA}">
            <Setter Property="CapHeight"
                    Value="40" />
            <Setter Property="Color"
                    Value="{StaticResource A_Color_Perk_CostInfoText}" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
        </Style>

        <Style x:Key="A_Style_FZTextBlock_CostInfoBox_PerkPointsDesc"
               TargetType="local:FZTextBlock"
               BasedOn="{StaticResource A_Style_FZTextBlock_HorizonA}">
            <Setter Property="CapHeight"
                    Value="18" />
            <Setter Property="Color"
                    Value="{StaticResource A_Color_Tile_Text}" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
            <Setter Property="TextWrapping"
                    Value="Wrap" />
            <Setter Property="Margin"
                    Value="-34,0,0,0" />
        </Style>

        <Style x:Key="A_Style_FZRun_Markup_USES"
               TargetType="local:FZRun">
            <Setter Property="FontFamily" Value="Horizon_A"/>
            <Setter Property="FontSize" Value="{StaticResource A_Double_FontSize_Minimum}"/>
            <Setter Property="Color" Value="{StaticResource A_Color_Perk_UsesText_UsesAvailableSelected}" />
            <Setter Property="CapHeight" Value="15" />
        </Style>
    </Page.Resources>

    <Grid x:Name="LayoutRoot">
        <!-- Background Blur -->
       <Control Style="{StaticResource A_Style_Control_ScreenBackground_WhitespaceTintOnly}" />
        
        <local:PlayerBarControl x:Name="TopBar" Style="{StaticResource A_Style_PlayerBarControl}" Focusable="False" />
        <ContentControl x:Name="BottomBar" Style="{StaticResource A_Style_ButtonBar}">
            <ContentControl x:Name="DefaultHelpPanel"
                    local:ControllerButtonPanel.ADescription="{local:Loc HelpButtons.IDS_Select}"
                    local:ControllerButtonPanel.BDescription="{local:Loc HelpButtons.IDS_Back}"
                    Style="{StaticResource A_Style_ContentControl_DefaultButtonBar}"
                    Focusable="False" />
        </ContentControl>

        <Border Style="{StaticResource A_Style_Border_ScenePadding}">
            <Grid Style="{StaticResource A_Style_FrameworkElement_ScreenTilt}">
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Left">

                    <!-- Title -->
                    <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}">
                        <ContentControl Content="{Binding Title, Converter={StaticResource A_StringToUpper}}"
                                        Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}" 
                                        local:BindingProxy.A="/ForzaUI;component/Textures/Anthem/Icons/Titles/Skills.png"
                                        HorizontalAlignment="Left"/>
                    </Decorator>

                    <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}" Visibility="Collapsed">
                        <local:ItemsSelector x:Name="PART_Pages"
                                             ItemsSource="{Binding Pages}"
                                             SelectedItem="{Binding SelectedPage}"
                                             Style="{StaticResource A_Style_ItemsSelector_TabTitle}"
                                             Focusable="False"
                                             local:AttachedRoutedEventCommand.RoutedEvent="Selector.SelectionChanged"
                                             local:AttachedRoutedEventCommand.Command="{Binding OnPageChangedCommand}" />
                    </Decorator>

                    <DockPanel>
                        <Grid Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_2}">
                            <StackPanel Orientation="Horizontal">
                                <StackPanel>
                                    <local:CommonListBox Focusable="False"
                                                         HorizontalAlignment="Left"
                                                         Style="{StaticResource A_Style_ListBox_CarMastery}"
                                                         AllowSelectionOfDisabledItems="False"
                                                         local:AttachedRoutedEventCommand.RoutedEvent="Selector.SelectionChanged"
                                                         local:AttachedRoutedEventCommand.Command="{Binding OnSelectionChangedCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=Page}}"
                                                         x:Name="PART_ItemSelector" />
                                    <DockPanel Margin="0,12,0,0"
                                               Width="500"
                                               HorizontalAlignment="Left"
                                               DataContext="{Binding SelectedItem, ElementName=PART_ItemSelector}"
                                               Panel.ZIndex="-10">
                                        <ContentControl Style="{StaticResource A_Style_ContentControl_Header_Custom}"
                                                        Height="49"
                                                        DockPanel.Dock="Top">
                                            <Grid>
                                                <Decorator>
                                                    <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_DescriptionPanelHeader}"
                                                                       Text="{Binding Name}" />
                                                </Decorator>
                                            </Grid>
                                        </ContentControl>
                                        <Grid>
                                            <ContentControl Template="{StaticResource A_ControlTemplate_SidePanelContent}"
                                                            Height="136">
                                                <Grid>
                                                    <Decorator Margin="18">
                                                        <local:AutoScrollPanel Style="{StaticResource A_Style_AutoScrollPanel_PerkDescription}"
                                                                               AnimationContext="{Binding Type}"
                                                                               Focusable="False" />
                                                    </Decorator>
                                                </Grid>
                                            </ContentControl>

                                            <Decorator>
                                                <local:FZMaterial Color="#FFFFFF"
                                                                  Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterBottomOnly}"
                                                                  MinHeight="49"
                                                                  Visibility="{Binding UsesRemaining, Converter={StaticResource A_Converter_VisibleWhenUsesRemaining}, FallbackValue=Collapsed}"
                                                                  VerticalAlignment="Bottom">
                                                    <local:FZTextBlock DataContext="{Binding SelectedItem, ElementName=PART_ItemSelector}"
                                                                       local:TextBlockInlineMarkup.Markup="{Binding RemainingText}"
                                                                       local:TextBlockInlineMarkup.ResourceBaseName="A_Style_FZRun_Markup_"
                                                                       Style="{StaticResource A_Style_FZTextBlock_HorizonD}"
                                                                       Color="{StaticResource A_Color_Tile_Text}"
                                                                       VerticalAlignment="Center"
                                                                       CapHeight="15"
                                                                       Margin="16" />
                                                </local:FZMaterial>
                                            </Decorator>
                                        </Grid>
                                    </DockPanel>
                                </StackPanel>
                                <Grid VerticalAlignment="Bottom"
                                      Margin="6,0,0,0"
                                      Panel.ZIndex="-10">
                                    <Decorator>
                                        <StackPanel>
                                            <ContentControl Style="{StaticResource A_Style_ContentControl_CostInfoBox}"
                                                            Margin="0,0,0,5"
                                                            DataContext="{Binding SelectedItem, ElementName=PART_ItemSelector}">
                                                <StackPanel Orientation="Horizontal">
                                                    <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_CostInfoBoxShadow}"
                                                                      x:Name="CostTextMaterial">
                                                        <StackPanel Orientation="Horizontal">
                                                            <Grid>
                                                                <local:FZTextBlock Text="{Binding Cost, FallbackValue=0}"
                                                                                   Style="{StaticResource A_Style_FZTextBlock_CostInfoBox_PerkPoints}" />
                                                                <local:FZTextBlock Text="{Binding PerkPointsOwned, RelativeSource={RelativeSource AncestorType=Page}}"
                                                                                   Style="{StaticResource A_Style_FZTextBlock_CostInfoBox_PerkPoints}"
                                                                                   Visibility="Hidden" />
                                                            </Grid>
                                                            <Decorator Width="55" />
                                                        </StackPanel>
                                                    </local:FZMaterial>
                                                    <local:FZTextBlock Text="{local:Loc PerksMenu.IDS_PerkCost}"
                                                                       Style="{StaticResource A_Style_FZTextBlock_CostInfoBox_PerkPointsDesc}" />
                                                </StackPanel>
                                            </ContentControl>
                                            <ContentControl Style="{StaticResource A_Style_ContentControl_CostInfoBox}">
                                                <StackPanel Orientation="Horizontal">
                                                    <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_CostInfoBoxShadow}">
                                                        <StackPanel Orientation="Horizontal">
                                                            <Grid>
                                                                <local:FZTextBlock Text="{Binding PerkPointsOwned}"
                                                                                   Style="{StaticResource A_Style_FZTextBlock_CostInfoBox_PerkPoints}" />
                                                                <local:FZTextBlock DataContext="{Binding SelectedItem, ElementName=PART_ItemSelector}"
                                                                                   Text="{Binding Cost, FallbackValue=0}"
                                                                                   Style="{StaticResource A_Style_FZTextBlock_CostInfoBox_PerkPoints}"
                                                                                   Visibility="Hidden" />
                                                            </Grid>
                                                            <Decorator Width="55" />
                                                        </StackPanel>
                                                    </local:FZMaterial>
                                                    <local:FZTextBlock Text="{local:Loc PerksMenu.IDS_AvailablePoints}"
                                                                       Style="{StaticResource A_Style_FZTextBlock_CostInfoBox_PerkPointsDesc}" />
                                                </StackPanel>
                                            </ContentControl>
                                        </StackPanel>
                                    </Decorator>
                                </Grid>
                            </StackPanel>
                        </Grid>
                    </DockPanel>
                </StackPanel>
            </Grid>
        </Border>
    </Grid>
</Page>
