<UserControl
    x:Class="ColorPicker.Controls.ColorPickerControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:helpers="clr-namespace:ColorPicker.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:p="clr-namespace:ColorPicker.Properties"
    AutomationProperties.Name="{x:Static p:Resources.Color_Palette}"
    FocusManager.IsFocusScope="True"
    KeyboardNavigation.TabNavigation="Once"
    TabIndex="3"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style TargetType="{x:Type Slider}">
            <Setter Property="MinWidth" Value="104" />
            <Setter Property="MinHeight" Value="21" />
            <Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Slider}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <TickBar
                                x:Name="TopTick"
                                Grid.Row="0"
                                Height="6"
                                Fill="Transparent"
                                Placement="Top"
                                SnapsToDevicePixels="True"
                                Visibility="Collapsed" />
                            <Border
                                x:Name="TrackBackground"
                                Grid.Row="1"
                                Height="8"
                                Margin="0"
                                Background="{TemplateBinding Background}"
                                BorderThickness="0"
                                CornerRadius="4" />
                            <Track x:Name="PART_Track" Grid.Row="1">
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Command="Slider.DecreaseLarge">
                                        <RepeatButton.Style>
                                            <Style TargetType="{x:Type RepeatButton}">
                                                <Setter Property="IsTabStop" Value="False" />
                                                <Setter Property="Focusable" Value="False" />
                                                <Setter Property="SnapsToDevicePixels" Value="True" />
                                                <Setter Property="OverridesDefaultStyle" Value="True" />
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                            <Border Background="Transparent" />
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </RepeatButton.Style>
                                    </RepeatButton>
                                </Track.DecreaseRepeatButton>
                                <Track.Thumb>
                                    <Thumb x:Name="Thumb">
                                        <Thumb.Style>
                                            <Style TargetType="{x:Type Thumb}">
                                                <Setter Property="Height" Value="20" />
                                                <Setter Property="Width" Value="20" />
                                                <Setter Property="SnapsToDevicePixels" Value="True" />
                                                <Setter Property="OverridesDefaultStyle" Value="True" />
                                                <Setter Property="BorderBrush" Value="{DynamicResource ControlElevationBorderBrush}" />
                                                <Setter Property="Foreground" Value="Black" />
                                                <Setter Property="BorderThickness" Value="1" />
                                                <Setter Property="Background" Value="{DynamicResource SliderOuterThumbBackground}" />
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="{x:Type Thumb}">
                                                            <Border
                                                                Background="{TemplateBinding Background}"
                                                                BorderBrush="{TemplateBinding BorderBrush}"
                                                                BorderThickness="{TemplateBinding BorderThickness}"
                                                                CornerRadius="16">
                                                                <Ellipse
                                                                    x:Name="Ellipse"
                                                                    Width="12"
                                                                    Height="12"
                                                                    Fill="{TemplateBinding Foreground}"
                                                                    Stroke="Transparent"
                                                                    StrokeThickness="0" />
                                                            </Border>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </Thumb.Style>
                                    </Thumb>
                                </Track.Thumb>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Command="Slider.IncreaseLarge">
                                        <RepeatButton.Style>
                                            <Style TargetType="{x:Type RepeatButton}">
                                                <Setter Property="IsTabStop" Value="False" />
                                                <Setter Property="Focusable" Value="False" />
                                                <Setter Property="SnapsToDevicePixels" Value="True" />
                                                <Setter Property="OverridesDefaultStyle" Value="True" />
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                            <Border Background="Transparent" />
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </RepeatButton.Style>
                                    </RepeatButton>

                                </Track.IncreaseRepeatButton>
                            </Track>
                            <TickBar
                                x:Name="BottomTick"
                                Grid.Row="2"
                                Height="6"
                                Fill="Transparent"
                                Placement="Bottom"
                                SnapsToDevicePixels="True"
                                Visibility="Collapsed" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="TickPlacement" Value="TopLeft">
                                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="BottomRight">
                                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="Both">
                                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
                                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True" />
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Border
        BorderBrush="{DynamicResource SurfaceStrokeColorDefaultBrush}"
        BorderThickness="1"
        CornerRadius="{DynamicResource ControlCornerRadius}">
        <Grid
            x:Name="PickerPanel"
            Height="248"
            HorizontalAlignment="Stretch"
            ClipToBounds="True"
            Opacity="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="36" />
                <RowDefinition Height="36" />
                <RowDefinition Height="*" />
                <RowDefinition Height="36" />
                <RowDefinition Height="36" />
            </Grid.RowDefinitions>

            <Button
                x:Name="colorVariation1Button"
                Grid.Column="0"
                helpers:ControlHelper.CornerRadius="4,4,0,0"
                AutomationProperties.Name="{x:Static p:Resources.Lightest_color}"
                Background="LightPink"
                Click="ColorVariationButton_Click"
                Style="{DynamicResource ColorShadeButtonStyle}"
                TabIndex="3"
                ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
            <Button
                x:Name="colorVariation2Button"
                Grid.Row="1"
                AutomationProperties.Name="{x:Static p:Resources.Lighter_color}"
                Background="LightPink"
                Click="ColorVariationButton_Click"
                Style="{DynamicResource ColorShadeButtonStyle}"
                ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
            <Button
                x:Name="colorVariation3Button"
                Grid.Row="3"
                AutomationProperties.Name="{x:Static p:Resources.Darker_color}"
                Background="LightPink"
                Click="ColorVariationButton_Click"
                Style="{DynamicResource ColorShadeButtonStyle}"
                ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />
            <Button
                x:Name="colorVariation4Button"
                Grid.Row="4"
                helpers:ControlHelper.CornerRadius="0,0,4,4"
                AutomationProperties.Name="{x:Static p:Resources.Darkest_color}"
                Background="LightPink"
                Click="ColorVariationButton_Click"
                Style="{DynamicResource ColorShadeButtonStyle}"
                ToolTipService.ToolTip="{x:Static p:Resources.Select_color}" />

            <Button
                x:Name="CurrentColorButton"
                Grid.RowSpan="5"
                Height="104"
                Margin="0,72,0,72"
                VerticalAlignment="Top"
                AutomationProperties.HelpText="{x:Static p:Resources.Selected_color_helptext}"
                AutomationProperties.Name="{x:Static p:Resources.Selected_color}"
                Click="CurrentColorButton_Click"
                Style="{DynamicResource ColorShadeButtonStyle}"
                ToolTipService.ToolTip="{x:Static p:Resources.Selected_color_tooltip}">

                <Popup
                    x:Name="DetailsFlyout"
                    Margin="24,0,0,0"
                    AllowsTransparency="True"
                    Closed="DetailsFlyout_Closed"
                    Opened="DetailsFlyout_Opened"
                    Placement="Top"
                    StaysOpen="False">
                    <Border
                        Padding="15"
                        Background="{DynamicResource ApplicationBackgroundBrush}"
                        BorderBrush="{DynamicResource SurfaceStrokeColorFlyoutBrush}"
                        BorderThickness="1"
                        CornerRadius="16">
                        <Grid x:Name="detailsGrid" KeyboardNavigation.TabNavigation="Contained">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="44" />
                                <ColumnDefinition Width="86" />
                                <ColumnDefinition Width="86" />
                                <ColumnDefinition Width="86" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="8" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="8" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="12" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="12" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <TextBlock
                                VerticalAlignment="Center"
                                Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Text="H"
                                TextAlignment="Center" />

                            <Slider
                                x:Name="HueGradientSlider"
                                Grid.Column="1"
                                Grid.ColumnSpan="3"
                                VerticalAlignment="Center"
                                AutomationProperties.Name="{x:Static p:Resources.Hue_slider}"
                                IsMoveToPointEnabled="True"
                                Maximum="289"
                                Minimum="0"
                                ValueChanged="HueGradientSlider_ValueChanged" />

                            <TextBlock
                                Grid.Row="2"
                                VerticalAlignment="Center"
                                Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Text="S"
                                TextAlignment="Center" />

                            <Slider
                                x:Name="SaturationGradientSlider"
                                Grid.Row="2"
                                Grid.Column="1"
                                Grid.ColumnSpan="3"
                                AutomationProperties.Name="{x:Static p:Resources.Saturation_slider}"
                                IsMoveToPointEnabled="True"
                                Maximum="289"
                                Minimum="0"
                                ValueChanged="SaturationGradientSlider_ValueChanged">
                                <Slider.Background>
                                    <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1,0.5">
                                        <GradientStop x:Name="SaturationStartColor" Color="Black" />
                                        <GradientStop x:Name="SaturationStopColor" Offset="1" Color="Red" />
                                    </LinearGradientBrush>
                                </Slider.Background>
                            </Slider>

                            <TextBlock
                                Grid.Row="4"
                                VerticalAlignment="Center"
                                Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Text="V"
                                TextAlignment="Center" />

                            <Slider
                                x:Name="ValueGradientSlider"
                                Grid.Row="4"
                                Grid.Column="1"
                                Grid.ColumnSpan="3"
                                AutomationProperties.Name="{x:Static p:Resources.Value_slider}"
                                IsMoveToPointEnabled="True"
                                Maximum="289"
                                Minimum="0"
                                ValueChanged="ValueGradientSlider_ValueChanged">
                                <Slider.Background>
                                    <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1,0.5">
                                        <GradientStop x:Name="ValueStartColor" Color="Black" />
                                        <GradientStop x:Name="ValueStopColor" Offset="1" Color="Red" />
                                    </LinearGradientBrush>
                                </Slider.Background>
                            </Slider>

                            <TextBlock
                                Grid.Row="6"
                                VerticalAlignment="Center"
                                Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Text="RGB"
                                TextAlignment="Center" />

                            <TextBox
                                x:Name="RNumberBox"
                                Grid.Row="6"
                                Grid.Column="1"
                                AutomationProperties.Name="{x:Static p:Resources.Red_value}"
                                PreviewTextInput="TextBox_PreviewTextInput"
                                TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />
                            <TextBox
                                x:Name="GNumberBox"
                                Grid.Row="6"
                                Grid.Column="2"
                                Margin="4,0,0,0"
                                AutomationProperties.Name="{x:Static p:Resources.Green_value}"
                                PreviewTextInput="TextBox_PreviewTextInput"
                                TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />
                            <TextBox
                                x:Name="BNumberBox"
                                Grid.Row="6"
                                Grid.Column="3"
                                Margin="4,0,0,0"
                                AutomationProperties.Name="{x:Static p:Resources.Blue_value}"
                                PreviewTextInput="TextBox_PreviewTextInput"
                                TextBoxBase.TextChanged="RGBNumberBox_TextChanged" />

                            <TextBlock
                                Grid.Row="8"
                                Width="38"
                                VerticalAlignment="Center"
                                Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Text="HEX"
                                TextAlignment="Center" />
                            <TextBox
                                x:Name="HexCode"
                                Grid.Row="8"
                                Grid.Column="1"
                                Grid.ColumnSpan="3"
                                HorizontalAlignment="Stretch"
                                AutomationProperties.Name="{x:Static p:Resources.Hex_value}"
                                CharacterCasing="Lower"
                                GotKeyboardFocus="HexCode_GotKeyboardFocus"
                                MaxLength="7"
                                TextChanged="HexCode_TextChanged"
                                TextWrapping="Wrap" />

                            <Button
                                x:Name="OKButton"
                                Grid.Row="9"
                                Grid.ColumnSpan="4"
                                Margin="0,32,0,0"
                                HorizontalAlignment="Stretch"
                                AutomationProperties.Name="{x:Static p:Resources.Select}"
                                Click="OKButton_Click"
                                Content="{x:Static p:Resources.Select}"
                                Style="{StaticResource CustomAccentButtonStyle}" />

                        </Grid>
                    </Border>
                </Popup>
            </Button>




        </Grid>

    </Border>
</UserControl>
