<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>

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

            <System:Double x:Key="A_Double_ZOffset_Selected">-5</System:Double>

            <Color x:Key="A_Color_CustomColor_Outline">#55000000</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="A_Style_SelectionHighlight_Small" TargetType="local:FZMaterial" BasedOn="{StaticResource A_Style_FZMaterial_FlatPanel_HighlightPill}" />
            <Style x:Key="A_Style_SelectionHighlight_Large" TargetType="local:FZMaterial" BasedOn="{StaticResource A_Style_FZMaterial_FlatPanel_HighlightPill_Large}" />


            <Style x:Key="A_Style_GlassBackground" TargetType="local:FZMaterial">
                <Setter Property="Color" Value="{StaticResource A_Color_WhiteGlass}" />
                <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetGlass_High}" />
            </Style>

            <Style x:Key="A_Style_ColorScrollViewer" TargetType="{x:Type ScrollViewer}">
                <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
                <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollViewer}">
                            <Grid ClipToBounds="false">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>

                                <ScrollBar x:Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1"
                                            Margin="5,0,5,-25" Minimum="0" Maximum="{TemplateBinding ScrollableWidth}" Value="{TemplateBinding HorizontalOffset}"
                                            ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                            Style="{StaticResource A_Style_ScrollBar_Default}" ClipToBounds="false"
                                            VerticalAlignment="Bottom" />

                                <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                                                        ClipToBounds="False"
                                                        Content="{TemplateBinding Content}"
                                                        CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsPC}"
                                 Value="True">
                        <Setter Property="HorizontalScrollBarVisibility"
                                Value="Visible" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>

            <Style x:Key="A_Style_Control_LargeColorEmptyItemStyle" TargetType="Control">
                <Setter Property="Focusable" Value="False"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <local:FZMaterial Width="78.92" Height="214" Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}"  Color="{StaticResource A_Color_GlassPanel_Interactive}" Margin="1.5,0,1.5,0">
                                <local:FZMaterial Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}"  Color="{StaticResource A_Color_GlassPanel_NonInteractive}" Margin="2"/>
                            </local:FZMaterial>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <ControlTemplate x:Key="A_ControlTemplate_SmallRectangles" TargetType="{x:Type local:CommonListBox}">
                <ScrollViewer Focusable="False" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled">
                    <WrapPanel IsItemsHost="True" Orientation="Vertical"/>
                </ScrollViewer>
            </ControlTemplate>

            <ControlTemplate x:Key="A_ControlTemplate_Control_ScrollArrow_Left" TargetType="Control">
                <Grid Width="78.75" Height="214.5">
                    <local:FZMaterial ImageSource="/ForzaUI;component/Textures/Anthem/Icons/Livery/Vinyl_Arrow.png" Width="44" Height="48"
                                              HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>

            <ControlTemplate x:Key="A_ControlTemplate_LargeRectangles" TargetType="{x:Type local:CommonListBox}">
                <Grid Height="214" Margin="0,0,0,0">
                    <StackPanel x:Name="EmptyLargeColourSlots" VerticalAlignment="Top" Orientation="Horizontal" Focusable="False">
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                        <Control Style="{StaticResource A_Style_Control_LargeColorEmptyItemStyle}"/>
                    </StackPanel>
                    <local:FZScrollViewer Style="{StaticResource A_Style_ColorScrollViewer}"
                                          Focusable="False"
                                          VerticalScrollBarVisibility="Disabled"
                                          VerticalAlignment="Stretch"
                                          TopScrollOffset="78.75"
                                          Orientation="Horizontal"
                                          BottomScrollOffset="78.75"
                                          CanContentScroll="True"
                                          Width="1640"
                                          local:FZScrollViewer.IsAtTop="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:FZScrollViewer.IsAtTop), Mode=OneWayToSource}"
                                          local:FZScrollViewer.IsAtBottom="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:FZScrollViewer.IsAtBottom), Mode=OneWayToSource}"
                                          KeyboardNavigation.DirectionalNavigation="Contained"
                                          KeepSelectionOnScreen="True">
                        <VirtualizingStackPanel Orientation="Horizontal"
                                                VirtualizingStackPanel.VirtualizationMode="Recycling"
                                                IsItemsHost="True"/>
                    </local:FZScrollViewer>
                    <Grid x:Name="ScrollIndicators">
                        <Control Template="{StaticResource A_ControlTemplate_Control_ScrollArrow_Left}" Focusable="False"
                                 Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:FZScrollViewer.IsAtTop), Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}"
                                 HorizontalAlignment="Left" Margin="0,0,0,0"  />
                        <Control Template="{StaticResource A_ControlTemplate_Control_ScrollArrow_Left}" Focusable="False"
                                 Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:FZScrollViewer.IsAtBottom), Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}"
                                 HorizontalAlignment="Right" Margin="0,0,-5,0" RenderTransformOrigin="0.5,0.5">
                            <Control.RenderTransform>
                                <RotateTransform Angle="180"/>
                            </Control.RenderTransform>
                        </Control>
                    </Grid>
                </Grid>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsPC, RelativeSource={RelativeSource AncestorType=Page}}"
                                 Value="True">
                        <Setter TargetName="ScrollIndicators"
                                Property="Visibility"
                                Value="Collapsed"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

            <Style x:Key="A_Style_ListBox_Color" TargetType="{x:Type local:CommonListBox}">
                <Setter Property="Template" Value="{StaticResource A_ControlTemplate_SmallRectangles}"/>
                <Style.Triggers>
                    <Trigger Property="Tag">
                        <Trigger.Value>
                            <local:ColorType>SpecialColor</local:ColorType>
                        </Trigger.Value>
                        <Setter Property="Template" Value="{StaticResource A_ControlTemplate_LargeRectangles}"/>
                    </Trigger>
                    <Trigger Property="Tag">
                        <Trigger.Value>
                            <local:ColorType>ManufacturerColor</local:ColorType>
                        </Trigger.Value>
                        <Setter Property="Template" Value="{StaticResource A_ControlTemplate_LargeRectangles}"/>
                    </Trigger>
                    <Trigger Property="Tag">
                        <Trigger.Value>
                            <local:ColorType>PreviousColor</local:ColorType>
                        </Trigger.Value>
                        <Setter Property="Template" Value="{StaticResource A_ControlTemplate_LargeRectangles}"/>
                    </Trigger>
                </Style.Triggers>
            </Style>

            <ControlTemplate x:Key="A_ControlTemplate_SmallColorItem" TargetType="{x:Type ListBoxItem}">
                <Grid x:Name="Grid_Container" Width="78.75" Height="20.75" 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" Margin="-5" IsHitTestVisible="False">
                        <local:FZMaterial x:Name="DropShadow"
                                          Style="{StaticResource A_Style_FZMaterial_ShadowBase}" Width="96" Height="36" Margin="6,5,0,0" />
                        <local:FZMaterial Style="{StaticResource A_Style_SelectionHighlight_Small}"/>
                    </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.15"
                                                ScaleY="1.15" />
                            </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="78.92" Height="214" x:Name="Grid_Container" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Margin="1.5,0,1.5,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" Margin="-6" IsHitTestVisible="False">
                        <local:FZMaterial x:Name="DropShadow"
                                          Style="{StaticResource A_Style_FZMaterial_ShadowBase}" Width="95" Height="221" Margin="6,5,0,0" />
                        <local:FZMaterial Style="{StaticResource A_Style_SelectionHighlight_Small}" />
                    </Grid>

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

                        <local:FZMaterial Margin="0,0,0,54" Height="44" VerticalAlignment="Bottom"
                                                      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}"
                                          GreedyMeasure="True"
                                          Visibility="{Binding PreviewImage, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" />

                        <local:FZMaterial ImageSource="/ForzaUI;component/Textures/Anthem/Paintshop/NoColorItem.png" Stretch="UniformToFill"
                                          Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor}"
                                          Visibility="{Binding IsClearColor, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" />
                    </Grid>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Setter Property="RenderTransform"
                                TargetName="Grid_Container">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1.12" ScaleY="1.12"/>
                            </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" TargetType="{x:Type ListBoxItem}" >
                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                <Setter Property="ClipToBounds" Value="False"/>
                <Setter Property="Tag" Value="{Binding Tag, RelativeSource={RelativeSource AncestorType=ListBox}}"/>
                <Setter Property="Template" Value="{StaticResource A_ControlTemplate_SmallColorItem}"/>
                <Setter Property="local:FocusOnMouseOverBehaviour.Self"
                        Value="True" />
                <Setter Property="local:FocusOnMouseOverBehaviour.SoundName"
                        Value="/Master/UI/UI_Nav_Toggle" />
                <Style.Triggers>
                    <Trigger Property="Tag">
                        <Trigger.Value>
                            <local:ColorType>SpecialColor</local:ColorType>
                        </Trigger.Value>
                        <Setter Property="Template" Value="{StaticResource A_ControlTemplate_LargeColorItem}"/>
                    </Trigger>
                    <Trigger Property="Tag">
                        <Trigger.Value>
                            <local:ColorType>ManufacturerColor</local:ColorType>
                        </Trigger.Value>
                        <Setter Property="Template" Value="{StaticResource A_ControlTemplate_LargeColorItem}"/>
                    </Trigger>
                    <Trigger Property="Tag">
                        <Trigger.Value>
                            <local:ColorType>PreviousColor</local:ColorType>
                        </Trigger.Value>
                        <Setter Property="Template" Value="{StaticResource A_ControlTemplate_LargeColorItem}"/>
                    </Trigger>
                    <DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource AncestorType=local:CommonListBox}}"
                                 Value="True">
                        <Setter Property="local:FocusOnMouseOverBehaviour.SoundName"
                                Value="{x:Null}"/>
                    </DataTrigger>
                </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" 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" Margin="-3" IsHitTestVisible="False">
                                            <local:FZMaterial x:Name="DropShadow" Style="{StaticResource A_Style_FZMaterial_ShadowBase}"/>
                                            <local:FZMaterial Style="{StaticResource A_Style_SelectionHighlight_Small}" />
                                        </Grid>
                                        <Grid Margin="3">
                                            <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.5,0" EndPoint="0.5,1">
                                                                <GradientStop Color="{Binding PrimaryColor}"
                                                          Offset="0" />
                                                                <GradientStop Color="{Binding SecondaryColor}"
                                                          Offset="1" />
                                                            </LinearGradientBrush>
                                                        </Border.BorderBrush>
                                                        <Rectangle Margin="-1,-8">
                                                            <Rectangle.Fill>
                                                                <LinearGradientBrush StartPoint="0.5,0"
                                                                EndPoint="0.5,1">
                                                                    <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="0,0,0,54" Height="44" VerticalAlignment="Bottom"
                                                      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 ImageSource="/ForzaUI;component/Textures/Anthem/Paintshop/NoColorItem.png"
                                                          Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor}"
                                                          Visibility="{Binding IsClearColor, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                                                          Width="80"
                                                          ClipToBounds="True" />
                                        </Grid>
                                    </Grid>
                                </local:FZMaterial>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsKeyboardFocused" Value="True">
                                    <Setter Property="RenderTransform"
                                            TargetName="Grid_Container">
                                        <Setter.Value>
                                            <ScaleTransform ScaleX="1.12"
                                                            ScaleY="1.12" />
                                        </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>
        </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="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="LayoutRoot" Style="{StaticResource A_Style_Border_ScenePadding}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="ColorStateGroup">
                    <VisualState x:Name="HideCustomColor">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CustomColorContainer">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="EmptyCustomColorContainer">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid>
                <StackPanel VerticalAlignment="Bottom" Margin="0,0,0,20"> 
                    <Grid Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}" Margin="0,0,0,18">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" MaxWidth="1403"/>
                            <ColumnDefinition Width="14"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <local:ItemsSelector x:Name="PART_ItemsSelector_ColorType"
                                             MaxWidth="1250" Style="{StaticResource A_Style_TextTabMenuList}"
                                             ItemsSource="{Binding CategoryItems}"
                                             Focusable="False"
                                             PageSize="1"
                                             VerticalAlignment="Bottom"
                                             HorizontalAlignment="Left"
                                             Grid.Column="0"
                                             local:RoutedEventCommand.Action="{Binding ElementName=ButtonBarDisableMouseCursorMovement}"
                                             local:RoutedEventCommand.Action2="{Binding ElementName=ButtonBarEnableMouseCursorMovement}"
                                             SelectedIndex="0"/>

                        <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_FlatPanel_Tile}" Grid.Column="2" Height="73"
                                    Color="{StaticResource A_Color_Header_Background}"
                                    HorizontalAlignment="Right" 
                                    Visibility="{Binding Text, ElementName=Textblock_Title, Converter={StaticResource A_StringVisConverter}}">
                            <local:FZTextBlock x:Name="Textblock_Title" Style="{StaticResource A_Style_FZTextBlock_HeaderBlock}"
                                        Text="{Binding Path=SelectedItem.DisplayName, ElementName=PART_CommonListBox_PaintMenu}"
                                        CapHeight="24" TextWrapping="Wrap"
                                        Focusable="False" />
                        </local:FZMaterial>
                    </Grid>

                    <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_2}"
                           Height="236"
                           Margin="0,0,0,18"
                           HorizontalAlignment="Stretch"
                           local:RoutedEventCommand.Action="{Binding ElementName=ButtonBarDisableMouseCursorMovement}"
                           local:RoutedEventCommand.Action2="{Binding ElementName=ButtonBarEnableMouseCursorMovement}">
                        <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassPanel_Pill}">
                            <StackPanel Orientation="Horizontal"
                                    KeyboardNavigation.DirectionalNavigation="Contained"
                                    KeyboardNavigation.TabNavigation="Contained"
                                    KeyboardNavigation.ControlTabNavigation="Contained"
                                    Height="216" Margin="10">
                                <Grid x:Name="CustomColorContainer" Panel.ZIndex="100" Width="86" Margin="-2">
                                    <Control x:Name="PART_Control_CustomColorItem" Style="{StaticResource A_Style_CustomColorControl}" DataContext="{Binding CustomColor}" Visibility="Visible"/>
                                </Grid>

                                <Decorator x:Name="EmptyCustomColorContainer" Width="35" Visibility="Collapsed"/>

                                <Grid x:Name="ColorItemList" VerticalAlignment="Center" Margin="20,0,0,0" Height="214" Width="1634">
                                    <local:CommonListBox x:Name="PART_CommonListBox_PaintMenu" Style="{StaticResource A_Style_ListBox_Color}"
                                        ItemContainerStyle="{StaticResource A_Style_ColorItem}" ItemsSource="{Binding SelectedItem, ElementName=PART_ItemsSelector_ColorType}" ClipToBounds="False" RenderTransformOrigin="0.5,0.5"
                                        Tag="{Binding SelectedItem.CarColorType, ElementName=PART_ItemsSelector_ColorType}"/>
                                </Grid>
                            </StackPanel>
                        </local:FZMaterial>
                    </Decorator>
                </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>
