<PopupColorSliders
    xmlns:local="clr-namespace:ForzaUI"
    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_ColorSelectSliders"
    mc:Ignorable="d"
    Style="{StaticResource A_Style_Page_Generic}"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">
        
    <Page.Resources>
        <ResourceDictionary>            
            <local:NumUnitConverter x:Key="A_NumUnitConverter_ColorTuning" FractionDigits="2"/>
            
            <!-- Brushes -->
            <SolidColorBrush x:Key="A_Brush_NoColorBrush" Color="{StaticResource A_Color_LargePanel_Background}" />

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

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

            <Style x:Key="A_Style_FZTextBlock_SliderTitleLabel" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_HorizonA}">
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_White}" />
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="CapHeight" Value="18" />
                <Setter Property="Margin" Value="0,17,0,17" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_SliderItemLabel" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_HorizonB}" >
                <Setter Property="Color" Value="{StaticResource A_Color_TextMenu_Text_Default}" />
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="CapHeight" Value="18" />
             </Style>

            <Style x:Key="A_Style_FZTextBlock_SliderItemValue" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_HorizonA}" >
                <Setter Property="Color" Value="{StaticResource A_Color_TextMenu_Text_Default}" />
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="CapHeight" Value="18" />
             </Style>
  
          <Style x:Key="H_Style_StrokeHighlight_ColorSlider"
                 TargetType="StrokeHighlightControl" BasedOn="{StaticResource H_Style_StrokeHighlight_Animated}">
            <Setter Property="ContentRadius" Value="2"/>
          </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="Width"
                        Value="auto" />
                <Setter Property="Height"
                        Value="56" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Control}">
                            <Grid x:Name="Grid_Container" > 
                                    <Grid>
                                        <Decorator Visibility="{Binding IsClearColor, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}">
                                            <Grid>
                                                <Border BorderThickness="8" CornerRadius="0" 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,-8">
                                                        <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}" />
                                            <local:FZMaterial Name="FavoriteIconLarge" 
                                                              VerticalAlignment="Top" 
                                                              HorizontalAlignment="Right" 
                                                              Margin="0,-1,0,0" 
                                                              Visibility="{Binding IsFavorite, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                                                              ImageSource="/ForzaUI;component/Textures/Anthem/Paintshop/favorite_colour_icon_large.png" 
                                                              Width="33" 
                                                              Height="33"/>
                                        </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 Color="{StaticResource A_Color_TileEmpty_Background}" 
                                                          Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_LiveryColor}" 
                                                          Visibility="{Binding IsClearColor, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" 
                                                          ClipToBounds="True">
                                              <Grid Margin="4.75">
                                                    <Path Margin="-4,-6" Stretch="Fill" Data="M0,0 l-1,1" Stroke="{StaticResource A_Brush_NoColorBrush}" StrokeThickness="4"/>
                                                    <Path Margin="-4,-6" Stretch="Fill" Data="M0,0 l1,1" Stroke="{StaticResource A_Brush_NoColorBrush}" StrokeThickness="4"/>
                                              </Grid>
                                        </local:FZMaterial>
                                      
                                       <UniformGrid   VerticalAlignment="Bottom" Margin="0,0,0,-8">
                                                  <local:FZMaterial Color="Black" Height="8"/>
                                                  <local:FZMaterial Color="White" Height="8"/> 
                                      </UniformGrid > 
                                    </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_SliderButton" TargetType="{x:Type RepeatButton}">
                <Setter Property="SnapsToDevicePixels" Value="true"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="IsTabStop" Value="false"/>
                <Setter Property="Focusable" Value="false"/>
                <Setter Property="Template">
                    <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="Transparent" />
                    </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_ColorFineInsideThumb" TargetType="{x:Type FZMaterial}">
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_White}" />
                <!--<Style.Triggers>
                    <DataTrigger Binding="{Binding Name, RelativeSource={RelativeSource FindAncestor, AncestorType=Slider}}"
                           Value="PART_HueSlider">
                        <Setter Property="Color"
                          Value="{Binding SaturationColor}" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Name, RelativeSource={RelativeSource FindAncestor, AncestorType=Slider}}"
                           Value="SaturationSlider">
                        <Setter Property="Color"
                          Value="{Binding BrightnessColor}" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Name, RelativeSource={RelativeSource FindAncestor, AncestorType=Slider}}"
                           Value="BrightnessSlider">
                        <Setter Property="Color"
                          Value="{Binding CurrentColor.PrimaryColor}" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Name, RelativeSource={RelativeSource FindAncestor, AncestorType=Slider}}"
                           Value="HighlightHueSlider">
                        <Setter Property="Color"
                          Value="{Binding HighlightSaturationColor}" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Name, RelativeSource={RelativeSource FindAncestor, AncestorType=Slider}}"
                           Value="HighlightSaturationSlider">
                        <Setter Property="Color"
                          Value="{Binding HighlightBrightnessColor}" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Name, RelativeSource={RelativeSource FindAncestor, AncestorType=Slider}}"
                           Value="HighlightBrightnessSlider">
                        <Setter Property="Color"
                          Value="{Binding CurrentColor.SecondaryColor}" />
                    </DataTrigger>
                </Style.Triggers>-->
            </Style>

            <Style x:Key="A_Style_ColorFineTuneThumb" TargetType="{x:Type Thumb}">
                <Setter Property="OverridesDefaultStyle" Value="True"/>
                <Setter Property="Height" Value="36"/>
                <Setter Property="Width" Value="10"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Thumb}">
                            <Grid Margin="-2">
                                <local:FZMaterial x:Name="DropShadow" Style="{DynamicResource A_Style_FZMaterial_ShadowBase_Dynamic}">
                                    <local:FZMaterial.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="0.5" ScaleY="0.6"/>
                                        </TransformGroup>
                                    </local:FZMaterial.RenderTransform>
                                </local:FZMaterial>
                                <local:FZMaterial x:Name="Thumb" Style="{StaticResource A_Style_ColorFineInsideThumb}" Preset="{Roundtangle CornerRadius=4}" Margin="-1.5"/>
                                <local:FZMaterial x:Name="ThumbStroke" Preset="{RoundtangleStroke CornerRadius=4, Thickness=2}" Color="{StaticResource H_Color_Primary_Black}" Margin="-2"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_ColorFineTuneSlider" TargetType="{x:Type Slider}">
                <Setter Property="SmallChange" Value="0.005"/>
                <Setter Property="LargeChange" Value="0"/>
                <Setter Property="Focusable" Value="True"/>
                <Setter Property="Width" Value="auto"/>
                <Setter Property="Height" Value="90"/>
                <Setter Property="IsMoveToPointEnabled" Value="True" />
                <Setter Property="Orientation" Value="Horizontal" /> 

              <Setter Property="local:FocusOnMouseOverBehaviour.Self"
                      Value="True" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Slider}"  >
                            
                            <Grid x:Name="Grid_Container" RenderTransformOrigin="0.5,0.5">
                                <local:FZMaterial x:Name="DropShadow" Style="{DynamicResource A_Style_FZMaterial_ShadowBase_Dynamic}" Visibility="Collapsed">
                                    <local:FZMaterial.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                                        </TransformGroup>
                                    </local:FZMaterial.RenderTransform>
                                </local:FZMaterial>
                                <StrokeHighlightControl x:Name="FocusHighlight"
                                       Style="{StaticResource H_Style_StrokeHighlight_ColorSlider}"
                                       IsEnabled="false">
                              </Control>
                                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_FlatPanel_Tile}"
                                                  Preset="{StaticResource H_Roundtangle_Outer_2px}"/>
                                <Grid Margin="12,18,12,11"> 
                                    <local:FZTextBlock Text="{TemplateBinding Tag, Converter={StaticResource A_StringToUpper}}"
                                                       Style="{StaticResource A_Style_FZTextBlock_SliderItemLabel}"
                                                       VerticalAlignment="Top"
                                                       Stretch="Uniform" 
                                                       StretchDirection="DownOnly"
                                                       MaxWidth="150"
                                                       IsHitTestVisible="False" 
                                                       Margin="0,0,0,0"/>
                                    <local:FZMaterial Color="{StaticResource H_Color_Primary_Black}" 
                                                      Preset="{StaticResource H_Roundtangle_Outer_2px}" 
                                                      Grid.Column="1" 
                                                      VerticalAlignment="Bottom">
                                      
                                        <Border x:Name="TrackBackground" 
                                                Background="{TemplateBinding Background}" 
                                                Margin="2">
                                            <Track x:Name="PART_Track" 
                                                   Margin="0,-7,0,-7">
                                                <Track.DecreaseRepeatButton>
                                                    <RepeatButton Style="{StaticResource A_Style_SliderButton}"/>
                                                </Track.DecreaseRepeatButton>
                                                <Track.Thumb>

                                                    <Thumb x:Name="Thumb" Style="{StaticResource A_Style_ColorFineTuneThumb}">
                                                    </Thumb>
                                                </Track.Thumb>
                                                <Track.IncreaseRepeatButton>
                                                    <RepeatButton Style="{StaticResource A_Style_SliderButton}"/>
                                                </Track.IncreaseRepeatButton>
                                            </Track>
                                        </Border>
                                    </local:FZMaterial>
                                  
                                    <local:FZTextBlock 
                                      VerticalAlignment="Top"
                                      Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource A_NumUnitConverter_ColorTuning}}" 
                                      Style="{StaticResource A_Style_FZTextBlock_SliderItemValue}" 
                                      Stretch="Uniform" StretchDirection="DownOnly" MaxWidth="80" IsHitTestVisible="False"
                                      HorizontalAlignment="Right" 
                                      Margin="0,0,0,0"/>
                                </Grid>
                            </Grid>
                          
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsKeyboardFocused" Value="True">
                                    <Setter TargetName="FocusHighlight" Property="IsEnabled" Value="True" />
                                    <Setter TargetName="DropShadow" Property="Visibility" Value="Visible" />
                                    <Setter Property="Panel.ZIndex" Value="100"/>
                                </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>
        <ContentControl Style="{StaticResource A_Style_ButtonBar}"
                        x:Name="BottomBar">
            <ContentControl Name="PART_DefaultHelpPanel" VerticalAlignment="Bottom" HorizontalAlignment="Left" Focusable="False" 
                        Style="{StaticResource A_Style_ContentControl_DefaultButtonBar}" />
        </ContentControl>
        <Border x:Name="PART_LayoutRoot" Style="{StaticResource A_Style_Border_ScenePadding}">
            <Grid>
                <Grid Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}">

                    <StackPanel Orientation="Vertical" 
                        Width ="332"
                        HorizontalAlignment ="Left"
                        Margin ="0,-29,0,0">
                        <local:FZMaterial Style="{StaticResource H_Style_Container_DescriptionTitle}"
                                      Height="44.5">
                            <local:FZTextBlock Text="{Binding Title}"
                                    Style ="{StaticResource H_Style_Text_DescriptionTitle}"
                                    HorizontalAlignment ="Center"
                                    VerticalAlignment="Center">
                            </local:FZTextBlock>
                        </local:FZMaterial>
                        <Decorator Height="6" />
                    </StackPanel>

                    <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassPanel_Pill}" 
                              Height="Auto"
                              Width ="332"
                              VerticalAlignment="Top"
                              HorizontalAlignment="Left"
                              Margin="0,19,0,0"
                              Preset="{StaticResource H_GlassRoundtangle_1px}" >

                        <StackPanel Orientation="Vertical" Grid.Column="1" Margin="7.5, 0, 7.5, 7.5"  KeyboardNavigation.DirectionalNavigation="Contained">

                            <local:FZTextBlock Text="{local:Loc Livery.IDS_ColourCurrent}"
                                       Style ="{StaticResource A_Style_FZTextBlock_SliderTitleLabel}"/>
                            <Control x:Name="PART_Control_CustomColorItem" Style="{StaticResource A_Style_CustomColorControl}" DataContext="{Binding PreviousColor}" Focusable="False"/>
                            <Decorator Height="12" />
                            <Control x:Name="PART_Control_CustomColorItem2" Style="{StaticResource A_Style_CustomColorControl}" DataContext="{Binding CurrentColor}" Focusable="False" />
                            <local:FZTextBlock Text="{local:Loc Livery.IDS_Lowlight}" Style ="{StaticResource A_Style_FZTextBlock_SliderTitleLabel}"  Visibility="{Binding ShowHighlightMode, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"/>
                            <Decorator Height="12" Visibility="{Binding ShowHighlightMode, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}"/>
                            <StackPanel x:Name="ColorTuning" VerticalAlignment="Center">
                                <Slider x:Name="PART_HueSlider" Maximum="1" Value="{Binding Hue}" Style="{StaticResource A_Style_ColorFineTuneSlider}" 
                                    Tag="{local:Loc Livery.IDS_Hue}" Margin="0,0,0,3">
                                    <Slider.Background>
                                        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                            <GradientStop Color="#FFFF0000" Offset="0"/>
                                            <GradientStop Color="#FFFFFF00" Offset="0.167"/>
                                            <GradientStop Color="#FF00FF00" Offset="0.333"/>
                                            <GradientStop Color="#FF00FFFF" Offset="0.5"/>
                                            <GradientStop Color="#FF0000FF" Offset="0.667"/>
                                            <GradientStop Color="#FFFF00FF" Offset="0.833"/>
                                            <GradientStop Color="#FFFF0000" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Slider.Background>
                                </Slider>
                                <Slider x:Name="SaturationSlider" Maximum="1" Value="{Binding Saturation}" Style="{StaticResource A_Style_ColorFineTuneSlider}"
                                    Tag="{local:Loc Livery.IDS_Saturation}" Margin="0,0,0,3">
                                    <Slider.Background>
                                        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                            <GradientStop Color="White" Offset="0"/>
                                            <GradientStop Color="{Binding SaturationColor}" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Slider.Background>
                                </Slider>
                                <Slider x:Name="BrightnessSlider" Maximum="1" Value="{Binding Brightness}" Style="{StaticResource A_Style_ColorFineTuneSlider}"
                                    Tag="{local:Loc Livery.IDS_Brightness}">
                                    <Slider.Background>
                                        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                            <GradientStop Color="Black" Offset="0"/>
                                            <GradientStop Color="{Binding BrightnessColor}" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Slider.Background>
                                </Slider>
                            </StackPanel>
                            <local:FZTextBlock Text="{local:Loc Livery.IDS_Highlight}" Style ="{StaticResource A_Style_FZTextBlock_SliderTitleLabel}"
                                           Visibility="{Binding ShowHighlightMode, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"/>
                            <StackPanel x:Name="HighlightTuning" VerticalAlignment="Center"
                                    Visibility="{Binding ShowHighlightMode, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
                                <Slider x:Name="HighlightHueSlider" Maximum="1" Value="{Binding HighlightHue}" Style="{StaticResource A_Style_ColorFineTuneSlider}" 
                                    Tag="{local:Loc Livery.IDS_Hue}" Margin="0,0,0,3">
                                    <Slider.Background>
                                        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                            <GradientStop Color="#FFFF0000" Offset="0"/>
                                            <GradientStop Color="#FFFFFF00" Offset="0.167"/>
                                            <GradientStop Color="#FF00FF00" Offset="0.333"/>
                                            <GradientStop Color="#FF00FFFF" Offset="0.5"/>
                                            <GradientStop Color="#FF0000FF" Offset="0.667"/>
                                            <GradientStop Color="#FFFF00FF" Offset="0.833"/>
                                            <GradientStop Color="#FFFF0000" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Slider.Background>
                                </Slider>
                                <Slider x:Name="HighlightSaturationSlider" Maximum="1" Value="{Binding HighlightSaturation}" Style="{StaticResource A_Style_ColorFineTuneSlider}"
                                    Tag="{local:Loc Livery.IDS_Saturation}" Margin="0,0,0,3">
                                    <Slider.Background>
                                        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                            <GradientStop Color="White" Offset="0"/>
                                            <GradientStop Color="{Binding HighlightSaturationColor}" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Slider.Background>
                                </Slider>
                                <Slider x:Name="HighlightBrightnessSlider" Maximum="1" Value="{Binding HighlightBrightness}" Style="{StaticResource A_Style_ColorFineTuneSlider}"
                                    Tag="{local:Loc Livery.IDS_Brightness}">
                                    <Slider.Background>
                                        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                            <GradientStop Color="Black" Offset="0"/>
                                            <GradientStop Color="{Binding HighlightBrightnessColor}" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Slider.Background>
                                </Slider>
                            </StackPanel>
                        </StackPanel>
                    </local:FZMaterial>
                </Grid>
            </Grid>
        </Border>
    </Grid>
</PopupColorSliders>
