PickerOptions.xaml

<Window x:Class="PickerOptions.PickerOptionsWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PickerOptions"
        mc:Ignorable="d"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="Transparent"
        Height="227" Width="350"
        MaxHeight="227" MaxWidth="350"
        MinHeight="227" MinWidth="350"
        Foreground="#FFD4D4D4"
        MouseDown="MainWindow_MouseDown"
        Topmost="True"
        WindowStartupLocation="CenterScreen"
        Title="MainWindow">

    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="0" ResizeBorderThickness="5"/>
    </WindowChrome.WindowChrome>

    <Border CornerRadius="10" BorderThickness="4">
        <Border.BorderBrush>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="#080808"/>
            </LinearGradientBrush>
        </Border.BorderBrush>

        <Grid>
            <Grid.Background>

                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="#080808"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="19"/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <!-- Close Button -->
            <Button Click="CloseButton_Click" HorizontalAlignment="Left" VerticalAlignment="Center" Width="12" Height="12" Margin="5,5,0,0">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Border x:Name="border" Background="#272727" CornerRadius="10"/>
                            <ContentPresenter HorizontalAlignment="Center" TextBlock.Foreground="gray" VerticalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Background" Value="Red"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>

            <!-- Minimize Button -->
            <Button Click="MinimizeButton_Click" HorizontalAlignment="Left" VerticalAlignment="Center" Width="12" Height="12" BorderBrush="{x:Null}" Margin="22,5,0,0">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Border x:Name="border" Background="#272727" CornerRadius="50"/>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Background" Value="#c79330"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>

            <Grid Grid.Row="1" x:Name="ColorPickerPanel" Visibility="Visible">
                <!--Color Picker Button-->
                <Grid Margin="18,14,298,160">
                    <Button Click="OpenColorPicker_Click" Style="{StaticResource CustomButtonStyle}">
                        <Image Source="icons/pick.png" Stretch="UniformToFill" Height="15" Width="15"/>
                    </Button>
                </Grid>

                <!--Color Editor Button-->
                <Grid Margin="53,14,263,160">
                    <Button Click="OpenColorEditor_Click" Style="{StaticResource CustomButtonStyle}">
                        <Image Source="icons/edit.png" Stretch="UniformToFill" Height="15" Width="15"/>
                    </Button>
                </Grid>

                <Border MouseLeftButtonDown="CopyHexValue" Grid.Row="1" Style="{StaticResource HoverBorderStyle}" CornerRadius="10" Margin="18,52,23,122">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="HEX" x:Name="hexTextBlock" VerticalAlignment="Center" Margin="10,0" FontFamily="Cascadia Code Light">
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Foreground" Value="Gray"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Border}}" Value="True">
                                            <Setter Property="Foreground" Value="White"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                        <Label x:Name="hexLabel" Content="HEX Value" Foreground="White" FontFamily="Cascadia Code Light" Background="Transparent" VerticalContentAlignment="Center" HorizontalContentAlignment="Left" Padding="12,0,0,0" Width="77" Height="16"/>
                    </StackPanel>
                </Border>

                <Border MouseLeftButtonDown="CopyRgbValue" Grid.Row="1" Style="{StaticResource HoverBorderStyle}" CornerRadius="10" Margin="18,87,23,87">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="RGB" x:Name="rgbTextBlock" VerticalAlignment="Center" Margin="10,0" FontFamily="Cascadia Code Light">
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Foreground" Value="Gray"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Border}}" Value="True">
                                            <Setter Property="Foreground" Value="White"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                        <Label x:Name="rgbLabel" Content="RGB Value" Foreground="White" FontFamily="Cascadia Code Light" Background="Transparent" VerticalContentAlignment="Center" HorizontalContentAlignment="Left" Padding="12,0,0,0" Height="16" Width="212"/>
                    </StackPanel>
                </Border>

                <Border MouseLeftButtonDown="CopyHslValue" Grid.Row="1" Style="{StaticResource HoverBorderStyle}" CornerRadius="10" Margin="18,123,23,51">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="HSL" x:Name="hslTextBlock" VerticalAlignment="Center" Margin="10,0" FontFamily="Cascadia Code Light">
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Foreground" Value="Gray"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Border}}" Value="True">
                                            <Setter Property="Foreground" Value="White"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                        <Label x:Name="hslLabel" Content="HSL Value" FontFamily="Cascadia Code Light" Foreground="White" Background="Transparent" VerticalContentAlignment="Center" HorizontalContentAlignment="Left" Padding="12,0,0,0" Height="16" Width="212"/>
                    </StackPanel>
                </Border>

                <Border MouseLeftButtonDown="CopyCmykValue" Grid.Row="1" Style="{StaticResource HoverBorderStyle}" CornerRadius="10" Margin="18,157,23,17">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="CMYK" x:Name="cmykTextBlock" VerticalAlignment="Center" Margin="10,0" FontFamily="Cascadia Code Light">
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Foreground" Value="Gray"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Border}}" Value="True">
                                            <Setter Property="Foreground" Value="White"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                        <Label x:Name="cmykLabel" Content="CMYK Value" Foreground="White" FontFamily="Cascadia Code Light" Background="Transparent" VerticalContentAlignment="Center" HorizontalContentAlignment="Left" Padding="5,0,0,0" Height="16" Width="212"/>
                    </StackPanel>
                </Border>

                <Rectangle x:Name="rect1" Margin="87,15,216,161" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Style="{StaticResource HoverRectangleStyle}"/>
                <Rectangle x:Name="rect2" Margin="126,15,178,161" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Style="{StaticResource HoverRectangleStyle}"/>
                <Rectangle x:Name="rect3" Margin="164,15,139,161" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Style="{StaticResource HoverRectangleStyle}"/>
                <Rectangle x:Name="rect4" Margin="203,15,100,161" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Style="{StaticResource HoverRectangleStyle}"/>
                <Rectangle x:Name="rect5" Margin="242,15,62,161" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Style="{StaticResource HoverRectangleStyle}"/>
                <Rectangle x:Name="rect6" Margin="280,15,23,161" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" Style="{StaticResource HoverRectangleStyle}"/>

            </Grid>

            <Grid Grid.Row="1" x:Name="ColorEditorPanel" Visibility="Collapsed">
                <Border x:Name="ColorDisplay" Height="64" Background="#080808" Margin="-4,8,-4,128"/>
                <Grid Margin="62,90,62,42">
                    <Slider x:Name="RedSlider" Minimum="0" Maximum="255" Background="red"
                            Style="{StaticResource RedSliderStyle}" IsMoveToPointEnabled="True"
                Tag="Red" ValueChanged="RGBSlider_ValueChanged" Margin="0,3,0,48"/>
                    <TextBlock Text="R" VerticalAlignment="Top" Margin="-15,4,226,0" Foreground="Gray" FontFamily="Cascadia Code Light"/>
                    <!--Red Value-->
                    <TextBlock x:Name="redValue" Text="0" VerticalAlignment="Top" Margin="227,4.5,-35,0" Foreground="Gray" FontFamily="Cascadia Code Light"/>

                    <Slider x:Name="GreenSlider" Minimum="0" Maximum="255" 
                            Style="{StaticResource GreenSliderStyle}" IsMoveToPointEnabled="True"
                Tag="Green" ValueChanged="RGBSlider_ValueChanged" Margin="0,27,0,26"/>
                    <TextBlock Text="G" VerticalAlignment="Center" Margin="-15,0,226,0" Foreground="Gray" FontFamily="Cascadia Code Light"/>
                    <!--Red Value-->
                    <TextBlock x:Name="greenValue" Text="0" VerticalAlignment="Center" Margin="227,0,-35,0" Foreground="Gray" FontFamily="Cascadia Code Light"/>

                    <Slider x:Name="BlueSlider" Minimum="0" Maximum="255" 
                            Style="{StaticResource BlueSliderStyle}" IsMoveToPointEnabled="True"
                Tag="Blue" ValueChanged="RGBSlider_ValueChanged" Margin="0,50,0,3"/>
                    <TextBlock Text="B" VerticalAlignment="Top" Margin="-15,50.5,226,0" Foreground="Gray" FontFamily="Cascadia Code Light"/>
                    <!--Red Value-->
                    <TextBlock x:Name="blueValue" Text="0" VerticalAlignment="Top" Margin="227,50,-35,0" Foreground="Gray" FontFamily="Cascadia Code Light"/>
                </Grid>

                <!--Hex Code-->
                <TextBlock Text="#000000" x:Name="hexCodeBlock" VerticalAlignment="Top" Margin="142,169,142,0" Foreground="White" FontSize="14" FontFamily="Cascadia Code Light"/>

                <!--Color Picker Button-->
                <Grid Margin="211,168,111,12">
                    <Button Click="CopyHexCode_Click" Style="{StaticResource CustomButtonStyle}" Margin="-6,-6,-6,-6">
                        <Image Source="icons/copy.png" Stretch="UniformToFill" Height="14" Width="14"/>
                    </Button>
                </Grid>

                <!-- Close Editor Button -->
                <Button Click="CloseEditorButton_Click" HorizontalAlignment="Left" VerticalAlignment="Top" Width="12" Height="12" BorderBrush="{x:Null}" Margin="324,-13,0,0">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <Border x:Name="border" Background="#272727" CornerRadius="50"/>
                                <ContentPresenter HorizontalAlignment="Center" TextBlock.FontSize="6" TextBlock.Foreground="#888888" Content="✖" VerticalAlignment="Center" Height="9"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="border" Property="Background" Value="#666666"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </Grid>

        </Grid>
    </Border>
</Window>