<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_ColorSelect"
    mc:Ignorable="d"
    Style="{StaticResource A_Style_Page_Generic}"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <Page.Resources>
        <ResourceDictionary>
            <Color x:Key="H_Color_Toggle_Background">#FF8C8C8C</Color>

            <local:FZMaterialPresetRoundtangle x:Key="A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor"
                BasedOn="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}"
                CornerRadius="1"
                Unlit="True"/>

            <local:MappingConverter x:Key="A_Converter_ColorTypeToVisibility" Default="Visible" >
                <local:MappingConverterEntry Key="{x:Static local:ColorType.NormalColor}" Value="Collapsed"/>
                <local:MappingConverterEntry Key="{x:Static local:ColorType.TintColour}" Value="Collapsed"/>
            </local:MappingConverter>

            <MappingConverter x:Key="A_Map_ToggleEnabledToAlignment" Default="Right">
                <MappingConverterEntry Key="{StaticResource A_Boolean_False}" Value="Left"/>
            </MappingConverter>

            <MappingConverter x:Key="A_Map_ToggleEnabledToColor" Default="{StaticResource H_Color_Primary_Pink}">
                <MappingConverterEntry Key="{StaticResource A_Boolean_False}" Value="{StaticResource H_Color_Primary_White}"/>
            </MappingConverter>
            
            <!--System:Double x:Key="A_Double_ZOffset_Selected">-5</System:Double-->

            <Color x:Key="A_Color_CustomColor_Outline">#55000000</Color>
            <Color x:Key="A_Color_WhiteLineDivider">#30F5F5F5</Color>

            <!-- Brushes -->
            <SolidColorBrush x:Key="A_Brush_NoColorBrush" Color="{StaticResource A_Color_LargePanel_Background}" />
            <SolidColorBrush x:Key="A_Brush_ScrollBarBackground" Color="{StaticResource A_Color_Ribbon_Item_Separator}" />

            <Style x:Key="H_Style_StrokeHighlight_ColorSelect" 
                   TargetType="StrokeHighlightControl" BasedOn="{StaticResource H_Style_StrokeHighlight_Instant}">
                <Setter Property="ContentRadius" Value="1" />
            </Style>

            <Style x:Key="A_Style_ContentControl_ColorSelect_Header" BasedOn="{StaticResource A_Style_ContentControl_Header}"
                   TargetType="ContentControl">
                <Setter Property="Content" Value="{Binding SelectedItem.Title, ElementName=PART_ItemsSelector_ColorType}" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding SelectedItem.Title, ElementName=PART_ItemsSelector_ColorType}" Value="{local:Loc Livery.IDS_SpecialColors}">
                        <Setter Property="Content" Value="{Binding SelectedItem.DisplayName, ElementName=PART_CommonListBox_PaintMenu, FallbackValue={local:Loc Livery.IDS_SpecialColors}}" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>

            <Style x:Key="H_Style_TabBar_ColorSelect" BasedOn="{StaticResource H_Style_TabBar_SquareIcons}" TargetType="ItemsSelector">
                <Setter Property="Height" Value="48" />
                <Setter Property="DynamicData.Data">
                    <Setter.Value>
                        <DynamicDataSource>
                            <DynamicDataItem
                                Name="TabHeight"
                                DataType="Double"
                                Value="48" />
                            <DynamicDataItem
                                Name="NextOrPreviousWidth"
                                DataType="Double"
                                Value="66" />
                            <DynamicDataItem
                                Name="NextOrPreviousHeight"
                                DataType="Double"
                                Value="48" />
                            <DynamicDataItem
                                Name="ButtonWidth"
                                DataType="Double"
                                Value="48" />
                        </DynamicDataSource>
                    </Setter.Value>
                </Setter>
            </Style>

            <ControlTemplate x:Key="A_ControlTemplate_SmallColorItem" TargetType="{x:Type ListBoxItem}">
                <Grid x:Name="Grid_Container" Width="32" Height="28" RenderTransformOrigin="0.5,0.5" Margin="1.5,1.5,1.5,1.5">
                    <local:RoutedEventCommand x:Name="ColorSelectedRoutedEventCommand"
                                              RoutedEvent="UIElement.MouseLeftButtonUp"
                                              Command="{Binding SelectCommand, RelativeSource={RelativeSource AncestorType=Page}}" />

                    <Grid x:Name="Selection" IsHitTestVisible="False">
                        <local:FZMaterial x:Name="DropShadow"
                                          Style="{StaticResource A_Style_FZMaterial_ShadowBase}" Width="48" Height="44" Margin="6,5,0,0" />
                        <StrokeHighlightControl
                                x:Name="FocusHighlight"
                                Style="{StaticResource H_Style_StrokeHighlight_ColorSelect}"
                                IsEnabled="{Binding (Selector.IsSelected), FallbackValue=False, RelativeSource={RelativeSource TemplatedParent}}" />
                    </Grid>

                    <local:FZMaterial Color="{Binding PrimaryColor}"
                                      Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor}"
                                      local:RoutedEventCommand.Action="{Binding ElementName=ColorSelectedRoutedEventCommand}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsKeyboardFocused"
                             Value="True">
                        <Setter Property="RenderTransform"
                                TargetName="Grid_Container">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1.0"
                                                ScaleY="1.0" />
                            </Setter.Value>
                        </Setter>
                        <!--Setter Property="local:ZPanel.ZOffset"
                                TargetName="Grid_Container"
                                Value="{StaticResource A_Double_ZOffset_Selected}" /-->
                        <Setter Property="local:ZPanel.DisableClipping"
                                TargetName="Grid_Container"
                                Value="True" />
                        <Setter Property="local:ZPanel.ZIndex"
                                Value="1" />
                        <Setter Property="local:ZPanel.ZIndex" Value="1" />
                        <Setter Property="Visibility" Value="Visible" TargetName="Selection" />
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused"
                             Value="False">
                        <Setter Property="local:ZPanel.ZIndex" Value="0" />
                        <Setter Property="Visibility" Value="Hidden" TargetName="Selection" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

            <ControlTemplate x:Key="A_ControlTemplate_LargeColorItem" TargetType="{x:Type ListBoxItem}">
                <Grid Width="316" Height="56" x:Name="Grid_Container" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0">
                    <Grid.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Grid.RenderTransform>

                    <local:RoutedEventCommand x:Name="ColorSelectedRoutedEventCommand"
                                              RoutedEvent="UIElement.MouseLeftButtonUp"
                                              Command="{Binding SelectCommand, RelativeSource={RelativeSource AncestorType=Page}}" />

                    <Grid x:Name="Selection" IsHitTestVisible="False">
                        <local:FZMaterial x:Name="DropShadow"
                                          Style="{StaticResource A_Style_FZMaterial_ShadowBase}" Width="320" Height="56" Margin="6,5,0,0" />
                        <StrokeHighlightControl
                                x:Name="FocusHighlight"
                                Style="{StaticResource H_Style_StrokeHighlight_ColorSelect}"
                                IsEnabled="{Binding (Selector.IsSelected), FallbackValue=False, RelativeSource={RelativeSource TemplatedParent}}" />
                    </Grid>

                    <Grid x:Name="Grid_Color"
                          RenderTransformOrigin="0.5,0.5"
                          local:RoutedEventCommand.Action="{Binding ElementName=ColorSelectedRoutedEventCommand}">
                        <Grid Visibility="{Binding PreviewImage, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}">
                            <Border BorderThickness="3" CornerRadius="1" Visibility="{Binding IsClearColor, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}">
                                <Border.BorderBrush>
                                    <LinearGradientBrush StartPoint="0,0.5"
                                                         EndPoint="1,0.5">
                                        <GradientStop Color="{Binding PrimaryColor}"
                                                      Offset="0" />
                                        <GradientStop Color="{Binding SecondaryColor}"
                                                      Offset="1" />
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Rectangle Margin="-1">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0,0.5"
                                                         EndPoint="1,0.5">
                                            <GradientStop Color="{Binding PrimaryColor}"
                                                      Offset="0" />
                                            <GradientStop Color="{Binding SecondaryColor}"
                                                      Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Border>
                        </Grid>

                        <local:FZMaterial Margin="36,0,0,0" Width="10" HorizontalAlignment="Left"
                                                      Preset="{StaticResource A_FZMaterialPreset_Unlit}"
                                                      Color="{Binding StripeColor}"
                                                      Visibility="{Binding HasStripe, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" />

                        <local:FZMaterial ImageSource="{Binding PreviewImage}"
                                          Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor}"
                                          Visibility="{Binding PreviewImage, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" >
                            <local:FZMaterial.LayoutTransform>
                                <RotateTransform Angle="90"/>
                            </local:FZMaterial.LayoutTransform>
                        </local:FZMaterial>

                        <local:FZMaterial ImageSource="/ForzaUI;component/Textures/Anthem/Paintshop/NoColorItem.png"
                                          Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor}"
                                          Visibility="{Binding IsClearColor, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" >
                            <local:FZMaterial.LayoutTransform>
                                <RotateTransform Angle="90"/>
                            </local:FZMaterial.LayoutTransform>
                        </local:FZMaterial>
                    </Grid>
                </Grid>
                <ControlTemplate.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition
                                Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Self}}"
                                Value="True" />
                            <Condition
                                Binding="{Binding (ItemContainerGenerator.ItemForItemContainer), RelativeSource={RelativeSource Self}, Converter={StaticResource A_Converter_IsNotNull}}"
                                Value="True" />
                        </MultiDataTrigger.Conditions>
                        <Setter
                            Property="Selector.IsSelected"
                            Value="True" />
                        <Setter Property="RenderTransform"
                                TargetName="Grid_Container">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
                            </Setter.Value>
                        </Setter>
                        <!--Setter Property="local:ZPanel.ZOffset"
                                TargetName="Grid_Container"
                                Value="{StaticResource A_Double_ZOffset_Selected}" /-->
                        <Setter Property="local:ZPanel.DisableClipping"
                                TargetName="Grid_Container"
                                Value="True" />
                        <Setter Property="local:ZPanel.ZIndex" Value="1" />
                        <Setter Property="Visibility" Value="Visible" TargetName="Selection" />
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="False">
                        <Setter Property="local:ZPanel.ZIndex" Value="0" />
                        <Setter Property="Visibility" Value="Hidden" TargetName="Selection" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

            <Style x:Key="A_Style_ColorItem" BasedOn="{StaticResource A_Style_ListBoxItem_TextMenu_NoGaps}" TargetType="{x:Type ListBoxItem}" >
                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                <Setter Property="ClipToBounds" Value="False"/>
                <Setter Property="local:FocusOnMouseOverBehaviour.Self"
                  Value="True" />
                <Setter Property="local:FocusOnMouseOverBehaviour.SoundName"
                  Value="/Master/UI/UI_Nav_Toggle" />
            </Style>

            <Style x:Key="A_Style_ColorItemLarge" BasedOn="{StaticResource A_Style_ColorItem}" TargetType="{x:Type ListBoxItem}" >
                <Setter Property="Template" Value="{StaticResource A_ControlTemplate_LargeColorItem}"/>
            </Style>

            <Style x:Key="A_Style_ColorItemSmall" BasedOn="{StaticResource A_Style_ColorItem}" TargetType="{x:Type ListBoxItem}" >
                <Setter Property="Template" Value="{StaticResource A_ControlTemplate_SmallColorItem}"/>
            </Style>

            <Style x:Key="A_Style_ListBox_Color" BasedOn="{StaticResource A_Style_ListBox_TextMenu}" TargetType="{x:Type local:WrapListBox}">
                <Setter Property="EmptyItemStyle">
                    <Setter.Value>
                        <Style TargetType="Control">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate
                                    TargetType="{Type Control}">
                                        <FZMaterial 
                                            Margin="0,-4,0, 0}"
                                            Height="56"
                                            Color="{StaticResource H_Color_Glass_Purple_60pc}"
                                            Preset="{StaticResource H_GlassRoundtangle_Low_3px}"
                                            Visibility="{Binding Tag, RelativeSource={RelativeSource AncestorType=WrapListBox}, Converter={StaticResource A_Converter_ColorTypeToVisibility}}"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="ScrollOrientation" Value="Vertical"/>
                <Setter Property="OverrideAcrossNavigation" Value="True"/>
                <Setter Property="ItemWidth" Value="316"/>
                <Setter Property="ItemHeight" Value="60"/>
                <Setter Property="ItemContainerStyle" Value="{StaticResource A_Style_ColorItemLarge}"/>
                <Setter Property="Template" Value="{StaticResource A_ControlTemplate_Carousel_Default}"/>
                <Style.Triggers>
                    <Trigger Property="Tag">
                        <Trigger.Value>
                            <local:ColorType>NormalColor</local:ColorType>
                        </Trigger.Value>  
                        <Setter Property="ItemHeight" Value="31"/>
                        <Setter Property="ItemWidth" Value="35"/>
                        <Setter Property="Height" Value="620"/>
                        <Setter Property="Width" Value="315"/> 
                        <Setter Property="HorizontalAlignment" Value="Left"/>
                        <Setter Property="ItemContainerStyle" Value="{StaticResource A_Style_ColorItemSmall}"/>
                    </Trigger>
                    <Trigger Property="Tag">
                        <Trigger.Value>
                            <local:ColorType>TintColour</local:ColorType>
                        </Trigger.Value>
                        <Setter Property="ItemHeight" Value="31"/>
                        <Setter Property="ItemWidth" Value="35"/>
                        <Setter Property="Height" Value="620"/>
                        <Setter Property="Width" Value="315"/>
                        <Setter Property="HorizontalAlignment" Value="Left"/>
                        <Setter Property="ItemContainerStyle" Value="{StaticResource A_Style_ColorItemSmall}"/>
                    </Trigger>
                    <Trigger Property="Tag">
                        <Trigger.Value>
                            <local:ColorType>PreviousColor</local:ColorType>
                        </Trigger.Value>
                        <Setter Property="Height" Value="600"/>
                    </Trigger>
                    <Trigger Property="Tag">
                        <Trigger.Value>
                            <local:ColorType>FavoriteColor</local:ColorType>
                        </Trigger.Value>
                        <Setter Property="Height" Value="600"/>
                    </Trigger>
                </Style.Triggers>
            </Style>

            <Style x:Key="A_Style_CustomColorControl" TargetType="{x:Type Control}">
                <Setter Property="local:FocusOnMouseOverBehaviour.Self"
                        Value="True" />
                <Setter Property="local:FocusOnMouseOverBehaviour.SoundName"
                        Value="/Master/UI/UI_Nav_Toggle" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Control}">
                            <Grid x:Name="Grid_Container" Height="56" RenderTransformOrigin="0.5,0.5">

                                <local:RoutedEventCommand x:Name="ColorSelectedRoutedEventCommand"
                                                          RoutedEvent="UIElement.MouseLeftButtonUp"
                                                          Command="{Binding SelectCommand, RelativeSource={RelativeSource AncestorType=Page}}" />

                                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassPanel_Pill}"
                                                  Color="{StaticResource A_Color_CustomColor_Outline}"
                                                  local:RoutedEventCommand.Action="{Binding ElementName=ColorSelectedRoutedEventCommand}">
                                    <Grid>
                                        <Grid x:Name="Selection" IsHitTestVisible="False">
                                            <local:FZMaterial x:Name="DropShadow" Style="{StaticResource A_Style_FZMaterial_ShadowBase}"/>
                                            <StrokeHighlightControl
                                                x:Name="FocusHighlight"
                                                Style="{StaticResource H_Style_StrokeHighlight_ColorSelect}" />
                                        </Grid>
                                        <Grid >
                                            <Decorator Visibility="{Binding IsClearColor, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}">
                                                <Grid>
                                                    <Border BorderThickness="8" CornerRadius="2" Visibility="{Binding HasSecondaryColor, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
                                                        <Border.BorderBrush>
                                                            <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                                                <GradientStop Color="{Binding PrimaryColor}"
                                                          Offset="0" />
                                                                <GradientStop Color="{Binding SecondaryColor}"
                                                          Offset="1" />
                                                            </LinearGradientBrush>
                                                        </Border.BorderBrush>
                                                        <Rectangle Margin="-1">
                                                            <Rectangle.Fill>
                                                                <LinearGradientBrush StartPoint="0,0.5"
                                                                EndPoint="1,0.5">
                                                                    <GradientStop Color="{Binding PrimaryColor}"
                                                            Offset="0" />
                                                                    <GradientStop Color="{Binding SecondaryColor}"
                                                            Offset="1" />
                                                                </LinearGradientBrush>
                                                            </Rectangle.Fill>
                                                        </Rectangle>
                                                    </Border>
                                                    <local:FZMaterial Visibility="{Binding HasSecondaryColor, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}"
                                                          Color="{Binding PrimaryColor}"
                                                          Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor}" />
                                                </Grid>
                                            </Decorator>

                                            <local:FZMaterial Margin="36,0,0,0" Width="10" HorizontalAlignment="Left"
                                                      Color="{Binding StripeColor}"
                                                      Preset="{StaticResource A_FZMaterialPreset_Unlit}"
                                                      Visibility="{Binding HasStripe, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" />

                                            <local:FZMaterial x:Name="PreviewImage" ImageSource="{Binding PreviewImage}"
                                                          Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor}"
                                                          GreedyMeasure="True"
                                                          Visibility="Hidden" >
                                                <local:FZMaterial.LayoutTransform>
                                                    <RotateTransform Angle="90"/>
                                                </local:FZMaterial.LayoutTransform>
                                            </local:FZMaterial>

                                            <local:FZMaterial ImageSource="/ForzaUI;component/Textures/Anthem/Paintshop/NoColorItem.png"
                                                          Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor}"
                                                          Visibility="{Binding IsClearColor, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                                                          ClipToBounds="True" >
                                                <local:FZMaterial.LayoutTransform>
                                                    <RotateTransform Angle="90"/>
                                                </local:FZMaterial.LayoutTransform>
                                            </local:FZMaterial>
                                        </Grid>
                                    </Grid>
                                </local:FZMaterial>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsKeyboardFocused" Value="True">
                                    <Setter Property="RenderTransform"
                                            TargetName="Grid_Container">
                                        <Setter.Value>
                                            <ScaleTransform ScaleX="1.0"
                                                            ScaleY="1.0" />
                                        </Setter.Value>
                                    </Setter>
                                    <!--Setter Property="local:ZPanel.ZOffset"
                                            TargetName="Grid_Container"
                                            Value="{StaticResource A_Double_ZOffset_Selected}" /-->
                                    <Setter Property="local:ZPanel.ZIndex" Value="1"/>
                                    <Setter Property="Visibility" Value="Visible" TargetName="Selection" />
                                </Trigger>
                                <Trigger Property="IsKeyboardFocused" Value="False">
                                    <Setter Property="local:ZPanel.ZIndex" Value="0"/>
                                    <Setter Property="Visibility" Value="Hidden" TargetName="Selection" />
                                </Trigger>
                                <DataTrigger Binding="{Binding PreviewImage, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" Value="{x:Static Visibility.Visible}">
                                    <Setter Property="Visibility" Value="Visible" TargetName="PreviewImage" />
                                </DataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Thickness x:Key="A_Margin_MainContents_ShowCustomColor">0,0,0,0</Thickness>
            <Thickness x:Key="A_Margin_MainContents_HideCustomColor">0,90,0,0</Thickness>

            <MappingConverter x:Key="H_Markup_LiveryMaterial">
                <MappingConverterEntry Key="{NoCase highlight}">
                    <MappingConverterEntry.Value>
                        <Style TargetType="FZRun">
                            <Setter Property="Color" Value="{StaticResource H_Color_Primary_Green}"/>
                        </Style>
                    </MappingConverterEntry.Value>
                </MappingConverterEntry>
            </MappingConverter>

            <Style x:Key="A_Style_ContentControl_MaterialTypeSpinner" TargetType="{x:Type local:SpinnerControl}">
                <Setter Property="Height" Value="50"/>
                <Setter Property="Focusable" Value="False" />
                <Setter Property="WrapSelection" Value="True" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type local:SpinnerControl}">
                            <Grid x:Name="grid" HorizontalAlignment="Stretch">
                                <DockPanel>
                                    <Decorator Margin="10" DockPanel.Dock="Right" Visibility="{Binding IsEnabled, Converter={FZBooleanToVisibilityConverter UseHidden=True}, RelativeSource={RelativeSource TemplatedParent}}">
                                        <ControllerButtonControl HideBackground="True" Visibility="Visible" Button="RTrigger"
                                            Command="{TemplateBinding NextSelectCommand}"/>
                                    </Decorator>
                                    <local:FZTextBlock x:Name="TextBlock_Value"
                                                       MultiStringFormatter.Format="{Loc Livery.IDS_PaintFinishFormat}"
                                                       MultiStringFormatter.Param0="{Binding SelectedItem.DisplayName, RelativeSource={RelativeSource TemplatedParent}}"
                                                       Text="{Binding (MultiStringFormatter.Output), RelativeSource={RelativeSource Self}}"
                                                       Style="{DynamicResource A_Style_FZTextBlock_HorizonA}"
                                                       CapHeight="16"
                                                       Color="{StaticResource H_Color_Primary_White}"
                                                       MarkupConverter="{StaticResource H_Markup_LiveryMaterial}"
                                                       HorizontalAlignment="Left"
                                                       VerticalAlignment="Center" 
                                                       TextWrapping="NoWrap"
                                                       Stretch="None"
                                                       AutoScroll.AllowScrolling="True"
                                                       AutoScroll="{StaticResource H_AutoScrollSettings_Horizontal_Title}"
                                                       ScreenReader.Event="OnChange"
                                                       ScreenReader.ControlType="Spinner"
                                                       ScreenReader.LineType="SelectedItem"
                                                       ScreenReader.SelectedNumber="{Binding SelectedIndex, RelativeSource={RelativeSource AncestorType={x:Type local:SpinnerControl}}, Converter={StaticResource A_IndexToNumberConverter}, FallbackValue=0}"
                                                       ScreenReader.SelectedCount="{Binding ItemsSource.Count, RelativeSource={RelativeSource AncestorType={x:Type local:SpinnerControl}}, FallbackValue=0}"/>
                                </DockPanel>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <DataTrigger Binding="{Binding SelectedItem.CarColorType, ElementName=PART_ItemsSelector_ColorType}" Value="{x:Static local:ColorType.NormalColor}">
                                    <Setter Property="Visibility" Value="Visible" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding SelectedItem.CarColorType, ElementName=PART_ItemsSelector_ColorType}" Value="{x:Static local:ColorType.PreviousColor}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding SelectedItem.CarColorType, ElementName=PART_ItemsSelector_ColorType}" Value="{x:Static local:ColorType.ManufacturerColor}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding SelectedItem.CarColorType, ElementName=PART_ItemsSelector_ColorType}" Value="{x:Static local:ColorType.ManufacturerPreset}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding SelectedItem.CarColorType, ElementName=PART_ItemsSelector_ColorType}" Value="{x:Static local:ColorType.SpecialColor}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding SelectedItem.CarColorType, ElementName=PART_ItemsSelector_ColorType}" Value="{x:Static local:ColorType.TintColour}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding SelectedItem.CarColorType, ElementName=PART_ItemsSelector_ColorType}" Value="{x:Static local:ColorType.FavoriteColor}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </DataTrigger>
                                <Trigger Property="ItemsSource" Value="{x:Null}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Page.Resources>

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

    <Grid>
        <!-- Help Panel -->
        <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}"
                    Style="{StaticResource A_Style_ContentControl_DefaultButtonBar}" />
        </ContentControl>

        <Border x:Name="PART_LayoutRoot" Style="{StaticResource A_Style_Border_ScenePadding}"
                Padding="72,49">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="ColorStateGroup">
                    <VisualState x:Name="PART_HideCustomColor">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CustomColorContainer">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="MainContentsContainer">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource A_Margin_MainContents_HideCustomColor}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid>
                <StackPanel Name="MainContentsContainer"
                            VerticalAlignment="Top" 
                            HorizontalAlignment="Left"
                            Margin="{StaticResource A_Margin_MainContents_ShowCustomColor}">
                    <StackPanel Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}" Width="332" Focusable="False" HorizontalAlignment="Left">
                        <ContentControl
                            Style="{StaticResource A_Style_ContentControl_ColorSelect_Header}"
                            HorizontalAlignment="Left"
                            Width="{Binding ActualWidth, ElementName=PART_ItemsSelector_ColorType}"/>


                        <FZButtonsSelector
                            x:Name="PART_ItemsSelector_ColorType"
                            MaxWidth="1250"
                            Style="{StaticResource H_Style_TabBar_ColorSelect}"
                            ItemsSource="{Binding CategoryItems}"
                            local:RoutedEventCommand.Action="{Binding ElementName=ButtonBarDisableMouseCursorMovement}"
                            local:RoutedEventCommand.Action2="{Binding ElementName=ButtonBarEnableMouseCursorMovement}"/>

                    </StackPanel>

                    <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_2}"
                           Margin="0,0,18,0"
                           VerticalAlignment="Stretch"
                           local:RoutedEventCommand.Action="{Binding ElementName=ButtonBarDisableMouseCursorMovement}"
                           local:RoutedEventCommand.Action2="{Binding ElementName=ButtonBarEnableMouseCursorMovement}">
                        <StackPanel Width="332" UseLayoutRounding="False"
                                HorizontalAlignment="Left"
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                KeyboardNavigation.TabNavigation="Contained"
                                KeyboardNavigation.ControlTabNavigation="Contained">
                            <local:FZMaterial Style="{StaticResource H_Style_Container_GlassHighBlur_Description}">
                                <StackPanel x:Name="CustomColorContainer" Orientation="Vertical" Margin="8,0,8,8">
                                    <Grid Height="53">
                                        <local:FZTextBlock Style="{StaticResource H_Style_Text_DescriptionTitle}" 
                                                           HorizontalAlignment="Center" 
                                                           VerticalAlignment="Center"
                                                           FontFamily="Horizon_A"
                                                           CapHeight="16"
                                                           Text="{local:Loc Livery.IDS_CurrentColor}"  
                                                           Color="{StaticResource H_Color_Primary_White}" 
                                                           Margin="8,0"/>
                                    </Grid>
                                    <Control Focusable="True" x:Name="PART_Control_CustomColorItem" Style="{StaticResource A_Style_CustomColorControl}" DataContext="{Binding CustomColor}" Visibility="Visible"/>
                                </StackPanel>
                            </local:FZMaterial>
                            <Decorator Height="8"/>
                            <local:FZMaterial Style="{StaticResource H_Style_Container_GlassHighBlur_Description}">
                                <StackPanel Margin="8">
                                    <SpinnerControl x:Name="PART_MaterialTypeSelect"
                                                    Margin="1,0,1,4"
                                                    HorizontalAlignment="Left"
                                                    Width="313"
                                                    ItemsSource="{Binding MaterialTypeItems, Mode=TwoWay}"
                                                    SelectedIndex="{Binding MaterialTypeIndex, Mode=TwoWay}"
                                                    Style="{StaticResource A_Style_ContentControl_MaterialTypeSpinner}"
                                                    IsEnabled="{Binding IsKeyboardFocusWithin, ElementName=ColorItemList}">
                                    </SpinnerControl>

                                    <Grid>
                                        <Grid x:Name="ColorItemList" MaxHeight="660">
                                            <WrapListBox 
                                            x:Name="PART_CommonListBox_PaintMenu"
                                            ItemsSource="{Binding SelectedItem, ElementName=PART_ItemsSelector_ColorType}" 
                                            Style="{StaticResource A_Style_ListBox_Color}"
                                            SelectedItem="{Binding SelectedItem, RelativeSource={RelativeSource AncestorType=Page}, Mode=TwoWay}"
                                            ClipToBounds="False" 
                                            Tag="{Binding SelectedItem.CarColorType, ElementName=PART_ItemsSelector_ColorType}"/>
                                        </Grid>
                                        <ScrollBar
                                            HorizontalAlignment="Left"
                                            Margin="-20,0,0,0"
                                            Style="{StaticResource H_Style_ScrollBar}"
                                            Minimum="{Binding ScrollWindowMin, ElementName=PART_CommonListBox_PaintMenu}"
                                            Maximum="{Binding ScrollWindowMax, ElementName=PART_CommonListBox_PaintMenu}"
                                            Value="{Binding ScrollWindowValue, ElementName=PART_CommonListBox_PaintMenu, Mode=TwoWay}"
                                            ViewportSize="{Binding ScrollWindowSize, ElementName=PART_CommonListBox_PaintMenu}">
                                            <DynamicData.Data>
                                                <DynamicDataItem
                                                    Name="ScrollBarHideWhenNotNeeded"
                                                    DataType="Boolean"
                                                    Value="True" />
                                            </DynamicData.Data>
                                        </ScrollBar>
                                    </Grid>

                                </StackPanel>
                            </local:FZMaterial>
                        </Grid>
                    </Decorator>
                </StackPanel>
                <StackPanel Visibility="{Binding IsControllerActiveInput, Converter={StaticResource A_FZBooleanToVisibilityConverter}, RelativeSource={RelativeSource AncestorType=Page}}"
                            Margin="0,32,0,0">
                    <StackPanel Orientation="Horizontal"  HorizontalAlignment="Right"  Visibility="{Binding HasCamera, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
                        <FZMaterial Color="{StaticResource H_Color_Primary_White}" Height="48" Width="48">
                            <FZMaterial Color="{StaticResource H_Color_Primary_Black}"  Height="48" Width="48" ImageSource="/ForzaUI;component/Textures/Anthem/Paintshop/advanced_camera.png"/>
                        </FZMaterial>
                        <Grid 
                            Name="Advanced_Camera_Button_Prompt"
                            MinWidth="300" 
                            Height="48">
                            <FZMaterial 
                                    Color="{StaticResource H_Color_Glass_Purple_40pc}"
                                    Preset="{StaticResource H_GlassRoundtangle_1px}"/>
                            <DockPanel Margin="10,0,10,0">
                                <ControllerButtonControl
                                    Button="LTrigger"
                                    Description="{local:Loc HelpButtons.IDS_AdvancedCamera}"
                                    HideBackground="True"/>
                                <Grid>
                                    <FZMaterial
                                        Height="30"
                                        Width="43"
                                        Color="{Binding AdvancedCameraEnabled, Converter={StaticResource A_Map_ToggleEnabledToColor}}">
                                        <FZMaterial.Preset>
                                            <FZMaterialPresetRoundtangleStroke CornerRadius="14" Thickness="3.5" />
                                        </FZMaterial.Preset>
                                    </FZMaterial>
                                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                                        <FZMaterial
                                            Height="17"
                                            Width="30"
                                            Color="{StaticResource H_Color_Toggle_Background}">
                                            <FZMaterial.Preset>
                                                <FZMaterialPresetRoundtangle CornerRadius="8" />
                                            </FZMaterial.Preset>
                                        </FZMaterial>
                                        <FZMaterial
                           Height="18"
                           Width="18"
                           Color="{Binding AdvancedCameraEnabled, Converter={StaticResource A_Map_ToggleEnabledToColor}}"
                           HorizontalAlignment="{Binding AdvancedCameraEnabled, Converter={StaticResource A_Map_ToggleEnabledToAlignment},RelativeSource={RelativeSource FindAncestor, AncestorType=Page}}">
                                            <FZMaterial.Preset>
                                                <FZMaterialPresetRoundtangle CornerRadius="8" />
                                            </FZMaterial.Preset>
                                        </FZMaterial>
                                    </Grid>
                                </Grid>
                            </DockPanel>
                            <FZMaterial Color="#0fff" IsHitTestVisible="True" />
                        </Grid>
                    </StackPanel>
                    <FZMaterial Color="{StaticResource H_Color_Glass_Purple_20pc}" 
                Preset="{StaticResource H_GlassRoundtangle_1px}" 
                Height="48" 
                Width="219" 
                HorizontalAlignment="Right"
                Margin="0,3,0,0"
                Visibility="{Binding AdvancedCameraEnabled, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
                        <StackPanel Orientation="Horizontal">
                            <ControllerButtonControl
               Margin="10,0,0,0"
               Button="LThumb_UpDown"
               Description="{local:Loc HelpButtons.IDS_AdvancedCameraZoom}"
               HorizontalAlignment="Left"
               HideBackground="True"/>
                            <ControllerButtonControl
               Button="RThumb" 
               HorizontalAlignment="Right"
               Description="{local:Loc HelpButtons.IDS_AdvancedCameraPan}"
               HideBackground="True"/>
                        </StackPanel>
                    </FZMaterial>
                </StackPanel>
            </Grid>
        </Border>

        <local:RoutedEventCommand x:Name="ButtonBarDisableMouseCursorMovement"
                      RoutedEvent="UIElement.MouseEnter"
                      Command="{Binding DisableCameraFocus,RelativeSource={RelativeSource AncestorType=Page}}" />
        <local:RoutedEventCommand x:Name="ButtonBarEnableMouseCursorMovement"
                  RoutedEvent="UIElement.MouseLeave"
                  Command="{Binding EnableCameraFocus,RelativeSource={RelativeSource AncestorType=Page}}" />
    </Grid>
</Page>
