<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>
        <ColorAlias x:Key="A_Color_Perk_Owned" Color="{StaticResource H_Color_Primary_Pink}"/>
        <Color x:Key="A_Color_Perk_Unlocked">#4D000000</Color>
        <ColorAlias x:Key="A_Color_Perk_UsesText_UsesAvailableSelected" Color="{StaticResource H_Color_Primary_Green}"/>
        <ColorAlias x:Key="A_Color_Perk_UsesText_UsesAvailableUnselected" Color="{StaticResource H_Color_Primary_Green}"/>
        <ColorAlias x:Key="A_Color_Perk_IconOwned" Color="{StaticResource H_Color_Primary_White}"/>
        <ColorAlias x:Key="A_Color_Perk_IconNotOwned" Color="{StaticResource H_Color_Primary_White}" />
        <Color x:Key="A_Color_Perk_UsesBackground_Unlocked">#AEA2AE</Color>
        <Color x:Key="A_Color_Perk_UsesBackground_UsesAvailable">#D6D1D7</Color>
            
        <System:Double x:Key="A_Double_SkillPerkTile_Height">90</System:Double>
        <System:Double x:Key="A_Double_SkillPerkTile_Width">90</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>

        <System:Double x:Key="A_Double_SkillPointsIcon_Size">40</System:Double>

        <Thickness x:Key="A_Thickness_SkillPerkTile_Margin">13</Thickness>

        <Style x:Key="A_Style_FZMaterial_GlassBackground" TargetType="{x:Type FZMaterial}">
            <Setter Property="Color" Value="{StaticResource A_Color_Perk_Unlocked}"/>
            <Setter Property="Preset" Value="{StaticResource H_Roundtangle_Outer_2px}"/>
        </Style>

        <Style x:Key="A_Style_FZMaterial_CarThumbnail" TargetType="local:FZMaterial" >
            <Setter Property="ImageSource" Value="{Binding CarThumbnailPath}" />
            <Setter Property="Stretch" Value="Uniform" />
        </Style>

        <Style x:Key="A_Style_FZRun_Markup_DescBox_HIGHLIGHT" TargetType="local:FZRun">
            <Setter Property="Color"  Value="{StaticResource H_Color_Primary_Green}"/>
            <Setter Property="FontFamily"  Value="Horizon_C"/>
        </Style>

        <MappingConverter x:Key="A_MappingConverter_Skill_Desc">
            <MappingConverterEntry Key="{NoCase CREDITS}" Value="{StaticResource A_Style_FZRun_TextMenu_CREDITS}" />
            <MappingConverterEntry Key="{NoCase HIGHLIGHT}" Value="{StaticResource A_Style_FZRun_Markup_DescBox_HIGHLIGHT}" />
        </MappingConverter>

        <Style x:Key="A_Style_FZTextBlock_ThumbnailBox_CarYear"
               TargetType="local:FZTextBlock"
               BasedOn="{StaticResource A_Style_FZTextBlock_HorizonB}">
            <Setter Property="CapHeight"
                    Value="34" />
            <Setter Property="Color"
                    Value="{StaticResource H_Color_Primary_White}" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
        </Style>

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

        <Style x:Key="A_Style_FZTextBlock_ThumbnailBox_CarRarity"
               TargetType="local:FZTextBlock"
               BasedOn="{StaticResource A_Style_FZTextBlock_HorizonB}">
            <Setter Property="CapHeight"
                    Value="19" />
            <Setter Property="Color"
                    Value="{Binding Rarity, Converter={StaticResource A_Converter_CarRarityToTextColor}}" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
            <Setter Property="HorizontalAlignment"
                    Value="Center" />
        </Style>

        <Style x:Key="A_Style_FZTextBlock_ThumbnailBox_CarName"
               TargetType="local:FZTextBlock"
               BasedOn="{StaticResource A_Style_FZTextBlock_HorizonB}">
            <Setter Property="CapHeight"
                    Value="34" />
            <Setter Property="Color"
                    Value="{StaticResource H_Color_Primary_White}" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
            <Setter Property="HorizontalAlignment"
                    Value="Left" />
            <Setter Property="MaxWidth"
                    Value="570" />
        </Style>

        <Style x:Key="A_Style_FZTextBlock_Desc_BottomBoxDesc" TargetType="local:FZTextBlock"
               BasedOn="{StaticResource A_Style_FZTextBlock_HorizonD}">
            <Setter Property="CapHeight"
                    Value="14" />
            <Setter Property="Color"
                    Value="{StaticResource H_Color_Primary_White}" />
            <Setter Property="HorizontalAlignment"
                    Value="Left" />
        </Style>

        <CornerRadius x:Key="A_Stroke_CornerRadius_Divider">2,2,2,2</CornerRadius>
        <FZMaterialPresetRoundtangle x:Key="A_Roundtangle_InstantPerkReward_Background"
                                     CornerRadius="{Binding ActualWidth, 
                                                    Converter={MathOperationConverter Operation=Divide}, 
                                                    ConverterParameter={StaticResource A_Stroke_CornerRadius_Divider}, 
                                                    RelativeSource={RelativeSource AncestorType=FZMaterial}}"/>

        <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 H_Roundtangle_Outer_2px}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsInstantReward}" Value="True">
                    <Setter Property="Preset" Value="{StaticResource A_Roundtangle_InstantPerkReward_Background}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_FZMaterial_SkillPerkTile_Uses" TargetType="{x:Type local:FZMaterial}">
            <Setter Property="Color" Value="{StaticResource A_Color_Perk_UsesText_UsesAvailableUnselected}" />
            <Setter Property="Height" Value="28" />
            <Setter Property="Visibility" Value="{Binding IsTemporary, Converter={StaticResource A_FZBooleanToVisibilityConverter}, FallbackValue=Collapsed}" />
            <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetGlassRoundtangle_GlassPanel_OuterBottomOnly3px}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsUnlocked}" Value="True">
                    <Setter Property="Color" Value="{StaticResource H_Color_Primary_Black}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding UsesRemaining}" Value="0">
                    <Setter Property="Color" Value="{StaticResource A_Color_Perk_UsesBackground_UsesAvailable}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding IsUnlocked}" Value="False">
                    <Setter Property="Color" Value="{StaticResource H_Color_Glass_Purple_60pc}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_FZTextBlock_SkillPerkUses_Tile" TargetType="{x:Type local:FZTextBlock}" BasedOn="{StaticResource A_Style_FZTextBlock_HorizonC}">
            <Setter Property="Color" Value="{StaticResource A_Color_Perk_UsesText_UsesAvailableSelected}" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="CapHeight" Value="16" />
            
            <Style.Triggers>
                <DataTrigger Binding="{Binding UsesRemaining}" Value="0">
                    <Setter Property="Color" Value="{StaticResource A_Color_Perk_UsesText_UsesAvailableUnselected}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding IsOwned}" Value="False">
                    <Setter Property="Color" Value="{StaticResource A_Color_Perk_IconNotOwned}" />
                    <Setter Property="Opacity" Value="0.5" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_StackPanel_PerksPoints" TargetType="StackPanel">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsOwned}" Value="True">
                    <Setter Property="Opacity" Value="0.5" />
                </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="75"/>
            <Setter Property="MaxWidth" Value="75"/>
            <Setter Property="Stretch" Value="Uniform"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Opacity" Value="1"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsUnlocked}" Value="False">
                    <Setter Property="Color" Value="{StaticResource A_Color_Perk_IconNotOwned}"/>
                    <Setter Property="Opacity" Value="0.5"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <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="15" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsInstantReward}" Value="True">
                    <Setter Property="Preset">
                        <Setter.Value>
                            <local:FZMaterialPresetSelfShadow Softness="15"
                                                              CornerRadius="{Binding ActualWidth, Converter={MathOperationConverter Operation=Divide}, 
                                                              ConverterParameter={StaticResource A_Stroke_CornerRadius_Divider}, 
                                                              RelativeSource={RelativeSource AncestorType=FZMaterial}}" />
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_StrokeHighlightControl_PerkHighlight" TargetType="StrokeHighlightControl"
            BasedOn="{StaticResource H_Style_StrokeHighlight_Animated}">
            <Setter Property="ContentRadius" Value="2"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsInstantReward}" Value="True">
                    <Setter Property="ContentRadius" Value="{Binding ActualWidth, 
                                                    Converter={MathOperationConverter Operation=Divide}, 
                                                    ConverterParameter={StaticResource A_Stroke_CornerRadius_Divider}, 
                                                    RelativeSource={RelativeSource Self}}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        
        <KeyTime x:Key="A_KeyTime_GlowOn_Start">0:0:0.1</KeyTime>
        <KeyTime x:Key="A_KeyTime_GlowOn_End">0:0:0.2</KeyTime>
        <KeyTime x:Key="A_KeyTime_GlowOff">0:0:0.5</KeyTime>

        <KeyTime x:Key="A_KeyTime_PlaySkillUnlockedSound">0:0:0</KeyTime>
        
        <KeyTime x:Key="A_KeyTime_UnlockAnimation_Finished">0:0:0.8</KeyTime>

        <Duration x:Key="A_Duration_PurchaseItemStoryNoGlow_Duration">0:0:0.2</Duration>

        <Style x:Key="A_Style_ScreenReadSkillPerk" BasedOn="{StaticResource A_Style_Button_EmptyButton}" TargetType="{x:Type local:FZButton}">
            <Setter Property="ScreenReader.Line" Value="{Binding (MultiStringFormatter.Output), RelativeSource={RelativeSource Self}, Converter={StaticResource H_TextForDisplayToTextForScreenReader}}"/>
            <Setter Property="ScreenReader.LineType" Value="SelectedItem"/>
            <Setter Property="ScreenReader.Event" Value="OnFocus"/>
            <Setter Property="ScreenReader.ControlType" Value="Button"/>
        </Style>

        <Style x:Key="A_Style_ScreenReadSkillPerk_Unowned" BasedOn="{StaticResource A_Style_ScreenReadSkillPerk}" TargetType="{x:Type local:FZButton}">
            <Setter Property="local:MultiStringFormatter.Format" Value="{}{0}, {1}, {2} {3}"/>
            <Setter Property="local:MultiStringFormatter.Param0" Value="{Binding Name}"/>
            <Setter Property="local:MultiStringFormatter.Param1" Value="{Binding DescriptionScreenReader}"/>
            <Setter Property="local:MultiStringFormatter.Param2" Value="{local:Loc PerksMenu.IDS_PerkCost}"/>
            <Setter Property="local:MultiStringFormatter.Param3" Value="{Binding Cost}"/>
        </Style>

        <Style x:Key="A_Style_ScreenReadSkillPerk_Owned" BasedOn="{StaticResource A_Style_ScreenReadSkillPerk}" TargetType="{x:Type local:FZButton}">
            <Setter Property="MultiStringFormatter.Format" Value="{}{0}, {1}, {2}"/>
            <Setter Property="MultiStringFormatter.Param0" Value="{Binding Name}"/>
            <Setter Property="MultiStringFormatter.Param1" Value="{Binding DescriptionScreenReader}"/>
            <Setter Property="MultiStringFormatter.Param2" Value="{local:Loc PerksMenu.IDS_Owned}"/>
        </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.Opacity)" Storyboard.TargetName="ItemSoftShadow">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.7">
                                        <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.2">
                                        <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.2">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </local:UIStoryboard>

                            <local:UIStoryboard x:Key="DeselectItemStory" DurationOverride="0:0:0.36">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemSoftShadow">
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </local:UIStoryboard>

                            <local:UIStoryboard x:Key="PART_PurchaseItemGlow" FillBehavior="Stop">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LargeGlow">
                                    <LinearDoubleKeyFrame KeyTime="0:0:0.0" Value="0" />
                                    <LinearDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOn_Start}" Value="{StaticResource A_Double_LargeGlowMaxOpacity}" />
                                    <LinearDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOn_End}" Value="{StaticResource A_Double_LargeGlowMaxOpacity}" />
                                    <LinearDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOff}" Value="0" />
                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="LargeGlow">
                                    <LinearDoubleKeyFrame KeyTime="0:0:0.0" Value="0" />
                                    <EasingDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOn_Start}" Value="9" />
                                    <EasingDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOff}" 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:0.0" Value="0" />
                                    <EasingDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOn_Start}" Value="9" />
                                    <EasingDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOff}" Value="16">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </local:UIStoryboard>

                            <local:UIStoryboard x:Key="PART_PurchaseItemStoryNoGlow" FillBehavior="Stop">
                                <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:AudioEvent.SoundName)" Storyboard.TargetName="PurchaseAudioEvent">
                                    <DiscreteStringKeyFrame KeyTime="0:0:0.0" Value=""/>
                                    <DiscreteStringKeyFrame KeyTime="{StaticResource A_KeyTime_PlaySkillUnlockedSound}" Value="/Master/UI/Perks/HZ2_SFX_HUD_Perks_Activate_01" />
                                </StringAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemHighlightContainer" Duration="{StaticResource A_Duration_PurchaseItemStoryNoGlow_Duration}" FillBehavior="Stop">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="1" />
                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOn_Start}" Value="0" />
                                </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="{StaticResource A_KeyTime_GlowOn_End}" Value="1.0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOn_End}" Value="1.0" />
                                    <EasingDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOff}" 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="{StaticResource A_KeyTime_GlowOn_End}" Value="1.0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOn_End}" Value="1.0" />
                                    <EasingDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOff}" Value="1.06">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CircleEase />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemContent" Duration="{StaticResource A_Duration_PurchaseItemStoryNoGlow_Duration}" FillBehavior="Stop">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}" />
                                    <DiscreteObjectKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOn_Start}" Value="{x:Static Visibility.Hidden}" />
                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ItemGlow">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="0" />
                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOn_Start}" Value="{StaticResource A_Double_CurrentItemGlowMaxOpacity}" />
                                    <LinearDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOn_End}" Value="{StaticResource A_Double_CurrentItemGlowMaxOpacity}" />
                                    <LinearDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOff}" Value="0" />
                                </DoubleAnimationUsingKeyFrames>

                                <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:EventFire.EventName)" Storyboard.TargetName="EventFire">
                                    <DiscreteStringKeyFrame KeyTime="0:0:0" Value=""/>
                                    <DiscreteStringKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOn_Start}" Value="UnlockReady"/>
                                    <DiscreteStringKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOff}" Value="PurchaseComplete"/>
                                    <DiscreteStringKeyFrame KeyTime="{StaticResource A_KeyTime_UnlockAnimation_Finished}" Value=""/>
                                </StringAnimationUsingKeyFrames>
                            </local:UIStoryboard>
                            <local:UIStoryboard x:Key="PART_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="{StaticResource A_KeyTime_GlowOn_Start}" Value="{StaticResource A_Double_NextItemGlowMaxOpacity}" />
                                    <LinearDoubleKeyFrame KeyTime="{StaticResource A_KeyTime_GlowOff}" Value="0" />
                                </DoubleAnimationUsingKeyFrames>
                            </local:UIStoryboard>
                        </ControlTemplate.Resources>

                        <local:FZButton Style="{StaticResource A_Style_ScreenReadSkillPerk_Unowned}"
                                        Command="{Binding OnPerkItemSelectedCommand, RelativeSource={RelativeSource AncestorType=Page}}"
                                        x:Name="perk_button"
                                        IsSfxEnabled="False"> <!-- Forte Bug 4256044: we only want one sound to play for this button, and there's some convoluted custom logic already in the Command handler in SkillTree.cpp to play the 'rejected' sound, so having it play the 'accepted' sound too -->
                            <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="{StaticResource H_Color_Primary_Black}" 
                                                      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 Visibility="{Binding IsValid, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
                                        <Grid x:Name="ItemContent" 
                                              Visibility="Visible">
                                            <Grid x:Name="ItemHighlightContainer">
                                                <StrokeHighlightControl x:Name="ItemHighlight" 
                                                                        Style="{StaticResource A_Style_StrokeHighlightControl_PerkHighlight}"
                                                                        IsEnabled="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource TemplatedParent}}">
                                                </StrokeHighlightControl>
                                            </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>
                                                <Grid>
                                                    <local:FZMaterial x:Name="ItemBackground"
                                                                      Style="{StaticResource A_Style_FZMaterial_SkillPerkTile_Background}" />

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

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

                                </Grid>

                                <local:FZMaterial x:Name="ItemGlow" 
                                                  RenderTransformOrigin="0.5, 0.5"
                                                  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>
                                    <FZMaterial.Style>
                                        <Style TargetType="{x:Type FZMaterial}">
                                            <Setter Property="ImageSource" Value="/ForzaUI;component/Textures/Anthem/Highlights/Square_Glow.png"/>
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding IsInstantReward}" Value="True">
                                                    <Setter Property="ImageSource" Value="/ForzaUI;component/Textures/Anthem/Highlights/Circle_Glow.png"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </FZMaterial.Style>
                                </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>
                            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                                <Trigger.EnterActions>
                                    <RaiseRoutedEvent RoutedEvent="Selector.Selected"/>
                                </Trigger.EnterActions>
                            </Trigger>
                            <Trigger Property="Selector.IsSelected" Value="True">
                                <Setter TargetName="perk_button" Property="FocusSelf.WhenTrue" Value="True" />
                            </Trigger>
                            <DataTrigger Binding="{Binding IsOwned}" Value="True">
                                <Setter TargetName="perk_button" Property="Style" Value="{StaticResource A_Style_ScreenReadSkillPerk_Owned}"/>
                            </DataTrigger>
                            <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="True">
                                <Setter TargetName="ItemIcon" Property="Color" Value="{StaticResource A_Color_Perk_UsesBackground_Unlocked}" />
                                <Setter TargetName="ItemIcon" Property="Opacity" Value="1" />
                                <Setter TargetName="ItemBackground" Property="Color" Value="{StaticResource H_Color_Primary_White}" />
                            </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}">
            <WrapPanel Orientation="Horizontal" 
                       IsItemsHost="True"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"/>
        </ControlTemplate>

        <Style x:Key="A_Style_ListBox_CarMastery" TargetType="{x:Type local:CommonListBox}"
               BasedOn="{StaticResource A_Style_ListBox_TextMenu_Default}">
            <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}" />
            <Setter Property="Panel.ZIndex" Value="10"/>
        </Style>

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

        <AutoScrollSettings x:Key="A_AutoScrollSettings_PerkDescription"
            InitialPause="0:0:01.00"
            ScrollSeparation="60"
            ScrollOrientation="Vertical"
            Speed="30"/>

        <Style x:Key="A_Style_FZTextBlock_AutoScroll_PerkDescription" BasedOn="{StaticResource A_Style_FZTextBlock_DescriptionBlockBody}" TargetType="local:FZTextBlock">
            <Setter Property="Text" Value="{Binding Description}" />
            <Setter Property="MarkupConverter" Value="{StaticResource A_MappingConverter_Skill_Desc}" />
            <Setter Property="CapHeight" Value="14" />
            <Setter Property="TextWrapping" Value="Wrap" />
            <Setter Property="AutoScroll" Value="{StaticResource A_AutoScrollSettings_PerkDescription}" />
            <Setter Property="AutoScroll.AllowScrolling" Value="True" />
        </Style>

        <ControlTemplate x:Key="A_ControlTemplate_InfoBox_CarMasteryCost" TargetType="{x:Type ContentControl}">
            <local:FZMaterial Color="{StaticResource H_Color_Primary_Black}"
                              Preset="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}">
                <ContentPresenter />
            </local:FZMaterial>
        </ControlTemplate>

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

        <Style x:Key="A_Style_ContentControl_CostInfoBox" TargetType="ContentControl">
            <Setter Property="Template" Value="{StaticResource A_ControlTemplate_InfoBox_CarMasteryCost}" />
            <Setter Property="Tag" Value="{StaticResource H_Roundtangle_Outer_2px}" />
            <Setter Property="Height" Value="44" />
        </Style>

        <MappingConverter x:Key="H_Converter_SkillTree_RarityToPreset" Default="{StaticResource A_FZMaterialPresetGlassRoundtangle_GlassPanel_OuterAll1px}">
            <MappingConverterEntry Key="{x:Static XAMLRarity.HorizonEdition}" Value="{StaticResource H_Preset_CarSelect_HorizonEdition}" />
        </MappingConverter>

        <Style x:Key="A_Style_FZMaterial_RarityMaterialBox" TargetType="local:FZMaterial">
            <Setter Property="Preset" Value="{Binding Rarity, Converter={StaticResource H_Converter_SkillTree_RarityToPreset}}" />
            <Setter Property="Color" Value="{Binding Rarity, Converter={StaticResource A_Converter_RarityToColor}}" />

        </Style>

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

        <Style x:Key="A_Style_FZTextBlock_CostInfoBox_PerkPointsDesc" TargetType="local:FZTextBlock"
               BasedOn="{StaticResource A_Style_FZTextBlock_HorizonC}">
            <Setter Property="CapHeight" Value="18" />
            <Setter Property="Color" Value="{StaticResource H_Color_Primary_White}" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Margin" Value="25,0,0,0" />
            <Setter Property="Text" Value="{local:Loc PerksMenu.IDS_PerkCost}" />
            <Setter Property="MaxWidth" Value="300"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsOwned}" Value="True">
                    <Setter Property="Text" Value="{local:Loc PerksMenu.IDS_Owned}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <ItemsPanelTemplate x:Key="A_ItemsPanel_PerkTree">
            <AutoSizeCanvas IsItemsHost="True"/>
        </ItemsPanelTemplate>

        <Double x:Key="A_Double_PerkTreeGridSize">116</Double>
        <Double x:Key="A_Double_One">1</Double>
        <Double x:Key="A_Double_Half">0.5</Double>

        <MultiConverter x:Key="A_PerkTreeCoordToSize">
            <MultiConverterEntry Converter="{MathOperationConverter Operation=Multiply}"
                                 Parameter="{StaticResource A_Double_PerkTreeGridSize}"
                                 TargetType="{Type Double}"/>
        </MultiConverter>
        <MultiConverter x:Key="A_PerkTreeCoordToHalfSize">
            <MultiConverterEntry Converter="{StaticResource A_PerkTreeCoordToSize}"
                                 TargetType="{Type Double}"/>
            <MultiConverterEntry Converter="{MathOperationConverter Operation=Multiply}"
                                 Parameter="{StaticResource A_Double_Half}"
                                 TargetType="{Type Double}"/>
        </MultiConverter>

        <Style x:Key="A_Style_PerkTreeConnection_ContainerStyle" TargetType="{Type FrameworkElement}">
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Canvas.Left" Value="{Binding Column, Converter={StaticResource A_PerkTreeCoordToSize}}"/>
            <Setter Property="Canvas.Top" Value="{Binding Row, Converter={StaticResource A_PerkTreeCoordToSize}}"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
        </Style>

        <MappingConverter x:Key="A_Converter_PerkLine_ActivationState">
            <MappingConverterEntry Key="{x:Static PerkActivationState.Disabled}" Value="{StaticResource A_Color_Perk_Unlocked}"/>
            <MappingConverterEntry Key="{x:Static PerkActivationState.Active}" Value="{StaticResource H_Color_Primary_White}"/>
            <MappingConverterEntry Key="{x:Static PerkActivationState.Purchased}" Value="{StaticResource H_Color_Primary_Black}"/>
        </MappingConverter>

        <DataTemplate x:Key="A_Template_PerkTreeConnection">
            <FZMaterial>
                <FZMaterial.Style>
                    <Style TargetType="{Type FZMaterial}">
                        <Setter Property="Color" Value="{Binding ActivationState, Converter={StaticResource A_Converter_PerkLine_ActivationState}}"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ConnectionType}" Value="{x:Static PerkConnectionType.Horizontal}">
                                <Setter Property="Margin" Value="-112,0,0,0"/>
                                <Setter Property="Height" Value="3"/>
                                <Setter Property="Width" Value="26"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding ConnectionType}" Value="{x:Static PerkConnectionType.Vertical}">
                                <Setter Property="Margin" Value="0,0,0,-116"/>
                                <Setter Property="Width" Value="3"/>
                                <Setter Property="Height" Value="26"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </FZMaterial.Style>
            </FZMaterial>
        </DataTemplate>
    </Page.Resources>

    <Grid x:Name="PART_LayoutRoot">
        <!-- Background Blur -->
        <Control Style="{StaticResource A_Style_Control_ScreenBackground}" />
        <PageInputHandler
            x:Name="UnlockAllPerks"
            Command="{Binding UnlockAllPerksCommand}"
            Button="Y" />
        
        <local:PlayerBarControl x:Name="TopBar" Style="{StaticResource A_Style_PlayerBarControl}" Focusable="False" />
        <ContentControl x:Name="BottomBar" Style="{StaticResource A_Style_ButtonBar}">
            <ContentControl x:Name="PART_DefaultHelpPanel"
                    local:ControllerButtonPanel.ADescription="{local:Loc HelpButtons.IDS_Select}"
                    local:ControllerButtonPanel.BDescription="{local:Loc HelpButtons.IDS_Back}"
                    local:ControllerButtonPanel.YDescription="{local:Loc HelpButtons.IDS_UnlockAll}"
                    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="Center">

                    <!-- Title -->
                    <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}">
                        <ContentControl Content="{local:Loc PerksMenu.IDS_CarMastery}"
                                        Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}" 
                                        HorizontalAlignment="Left"/>
                    </Decorator>

                    <DockPanel>
                        <Grid Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}">
                            <DockPanel Width="1306" Height="777">
                                <StackPanel>
                                    <Grid>
                                        <FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassBackground}" 
                                                    Width="486"
                                                    Height="468"/>
                                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="468">
                                            <CommonListBox Focusable="False"
                                                           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" />
                                            <ItemsControl x:Name="Connections"
                                                          ItemsSource="{Binding Connections}"
                                                          ItemsPanel="{StaticResource A_ItemsPanel_PerkTree}"
                                                          ItemContainerStyle="{StaticResource A_Style_PerkTreeConnection_ContainerStyle}"
                                                          ItemTemplate="{StaticResource A_Template_PerkTreeConnection}"
                                                          Focusable="False">
                                                <ItemsControl.RenderTransform>
                                                    <TranslateTransform
                                                        X="{Convert {StaticResource A_Double_One}, Converter={StaticResource A_PerkTreeCoordToHalfSize}}"
                                                        Y="{Binding X, RelativeSource={RelativeSource Self}}"/>
                                                </ItemsControl.RenderTransform>
                                            </ItemsControl>
                                        </Grid>
                                    </Grid>
                                    <DockPanel Width="486"
                                               HorizontalAlignment="Left"
                                               DataContext="{Binding SelectedItem, ElementName=PART_ItemSelector}"
                                               Panel.ZIndex="-10">
                                        <ContentControl Style="{StaticResource A_Style_ContentControl_Header_Custom}"
                                                        Height="50"
                                                        DockPanel.Dock="Top"
                                                        HorizontalContentAlignment="Left"
                                                        Margin="0,3,0,4">
                                            <Grid>
                                                <Decorator>
                                                    <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_DescriptionPanelHeader}"
                                                                       Text="{Binding Name}"/>
                                                </Decorator>
                                            </Grid>
                                        </ContentControl>
                                        <StackPanel>
                                            <Grid>
                                                <FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassBackground}"
                                                            Height="160"
                                                            Margin="0"
                                                            Preset="{StaticResource H_Roundtangle_TopOnly_2px}"/>
                                                <Grid VerticalAlignment="Top">
                                                    <Decorator Margin="22,25,22,0" MaxHeight="85">
                                                        <FZTextBlock Style="{StaticResource A_Style_FZTextBlock_AutoScroll_PerkDescription}" />
                                                    </Decorator>
                                                </Grid>
                                                <Grid
                                                    VerticalAlignment="Bottom"
                                                    Margin="26,0,0,30"
                                                    Visibility ="{Binding IsTemporary, Converter={StaticResource A_FZBooleanToVisibilityConverter}, FallbackValue=Collapsed}">
                                                    <local:FZTextBlock DataContext="{Binding SelectedItem, ElementName=PART_ItemSelector}"
                                                                        Text="{Binding RemainingText}"
                                                                        MarkupConverter="{StaticResource A_MappingConverter_Skill_Desc}"
                                                                        Style="{StaticResource A_Style_FZTextBlock_Desc_BottomBoxDesc}" 
                                                                        Opacity="1"/>
                                                </Grid>
                                            </Grid>
                                            <ContentControl Style="{StaticResource A_Style_ContentControl_CostInfoBox}"
                                                            Margin="0,0,0,4"
                                                            DataContext="{Binding SelectedItem, ElementName=PART_ItemSelector}"
                                                            Tag="{StaticResource H_Roundtangle_BottomOnly_2px}">
                                                <DockPanel>
                                                    <local:FZTextBlock DockPanel.Dock="Left" Style="{StaticResource A_Style_FZTextBlock_CostInfoBox_PerkPointsDesc}" />
                                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Style="{StaticResource A_Style_StackPanel_PerksPoints}">
                                                        <Grid>
                                                            <local:FZTextBlock Text="{Binding Cost, FallbackValue=0}" Style="{StaticResource A_Style_FZTextBlock_CostInfoBox_PerkPoints}" />
                                                        </Grid>
                                                        <local:FZMaterial ImageSource="{StaticResource A_BitmapImage_PerkPointIcon}"
                                                                          Width="{StaticResource A_Double_SkillPointsIcon_Size}"
                                                                          Height="{StaticResource A_Double_SkillPointsIcon_Size}"
                                                                          Color="{StaticResource H_Color_Primary_White}"
                                                                          Margin="0,0,19,0"/>
                                                    </StackPanel>
                                                </DockPanel>
                                            </ContentControl>
                                            <ContentControl Style="{StaticResource A_Style_ContentControl_CostInfoBox}">
                                                <DockPanel MultiStringFormatter.Format="{}{0} {1}"
                                                           MultiStringFormatter.Param0="{local:Loc PerksMenu.IDS_AvailablePoints}"
                                                           MultiStringFormatter.Param1="{Binding PerkPointsOwned, RelativeSource={RelativeSource AncestorType=Page}}"
                                                           ScreenReader.Line="{Binding (MultiStringFormatter.Output), RelativeSource={RelativeSource Self}}"
                                                           ScreenReader.LineType="ScreenDescription"
                                                           ScreenReader.Event="OnChange">
                                                    <local:FZTextBlock Text="{local:Loc PerksMenu.IDS_AvailablePoints}"
                                                                       Style="{StaticResource A_Style_FZTextBlock_CostInfoBox_PerkPointsDesc}" 
                                                                       DockPanel.Dock="Left"/>
                                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                                                        <Grid>
                                                            <local:FZTextBlock Text="{Binding PerkPointsOwned, RelativeSource={RelativeSource AncestorType=Page}}"
                                                                               Style="{StaticResource A_Style_FZTextBlock_CostInfoBox_PerkPoints}"
                                                                               Color="{StaticResource H_Color_Primary_Yellow}" />
                                                        </Grid>
                                                        <local:FZMaterial ImageSource="{StaticResource A_BitmapImage_PerkPointIcon}"
                                                                          Width="{StaticResource A_Double_SkillPointsIcon_Size}"
                                                                          Height="{StaticResource A_Double_SkillPointsIcon_Size}"
                                                                          Color="{StaticResource H_Color_Primary_Yellow}"
                                                                          Margin="0,0,19,0"/>
                                                    </StackPanel>
                                                </DockPanel>
                                            </ContentControl>
                                        </StackPanel>
                                    </DockPanel>
                                </StackPanel>
                                <Decorator x:Name="Spacer" Width="4"/>
                                <StackPanel Panel.ZIndex="-10"
                                            DockPanel.Dock="Right">
                                    <Grid>
                                        <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassBackground}" 
                                                          Width="816"
                                                          Height="777">
                                                          
                                        </local:FZMaterial>
                                        <StackPanel Orientation="Vertical">
                                            <DockPanel>
                                                <StackPanel Orientation="Vertical" Margin="21,19,21,0" MaxWidth="654">
                                                    <local:FZTextBlock Text="{Binding CarName}" Margin="0,0,0,11"
                                                                        Style="{StaticResource A_Style_FZTextBlock_ThumbnailBox_CarName}" />
                                                    <Viewbox StretchDirection="DownOnly" MaxWidth="570" Stretch="Uniform" HorizontalAlignment="Left">
                                                        <StackPanel Orientation="Horizontal" 
                                                                    MultiStringFormatter.Format="{}{0} {1} {2}"
                                                                    MultiStringFormatter.Param0="{Binding CarYear}"
                                                                    MultiStringFormatter.Param1="{Binding CarManufacturer}"
                                                                    MultiStringFormatter.Param2="{Binding CarName}"
                                                                    ScreenReader.Line="{Binding (MultiStringFormatter.Output), RelativeSource={RelativeSource Self}}"
                                                                    ScreenReader.LineType="ScreenSubtitle"
                                                                    ScreenReader.Event="OnLoad">
                                                            <local:FZTextBlock Text="{Binding CarYear}"
                                                                               Style="{StaticResource A_Style_FZTextBlock_ThumbnailBox_CarYear}"
                                                                               Margin="0,0,10,0"/>
                                                            <local:FZTextBlock Text="{Binding CarManufacturer}"
                                                                               Style="{StaticResource A_Style_FZTextBlock_ThumbnailBox_CarManufacturer}" />
                                                        </StackPanel>
                                                    </Viewbox>
                                                    <Grid HorizontalAlignment="Left"
                                                          Margin="-1,14,0,0">
                                                        <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_RarityMaterialBox}" />
                                                        <local:FZTextBlock Margin="7,6"
                                                                           Text="{Binding Rarity, Converter={StaticResource A_Converter_RarityToNameString}}"
                                                                           Style="{StaticResource A_Style_FZTextBlock_ThumbnailBox_CarRarity}" />
                                                    </Grid>
                                                </StackPanel>
                                                <Control Style="{StaticResource H_Style_TemplatedElement_CarClassBadge_White}"
                                                         HorizontalAlignment="Right"
                                                         VerticalAlignment="Top"
                                                         DockPanel.Dock="Right"
                                                         Margin="0,19,16,0"
                                                         BindingProxy.A="{Binding CarPerformanceIndex}"
                                                         BindingProxy.B="{Binding CarClassID}" />
                                            </DockPanel>
                                        </StackPanel>
                                        <Grid Margin="0,0,0,-98" VerticalAlignment="Center" >
                                            <FZMaterial ImageSource="/ForzaUI;component/Textures/Data_Bound/Anthem/SkillPerks/backing_dots.png"
                                                        Margin="16,0"
                                                        Width="790"
                                                        Height="380"/>
                                            
                                            <FZMaterial Style="{StaticResource A_Style_FZMaterial_CarThumbnail}" 
                                                        Height="369"
                                                        Margin="0,0,0,50"/>
                                        </Grid>
                                    </Grid>
                                </StackPanel>
                            </DockPanel>
                        </Grid>
                    </DockPanel>
                </StackPanel>
            </Grid>
        </Border>
    </Grid>
</Page>
