<UserControl x:Class="WPFColorPicker.UserControls.ColorPalette"
             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:usercontrols="clr-namespace:WPFColorPicker.UserControls"
             mc:Ignorable="d" 
             d:DesignHeight="500" d:DesignWidth="500">
    <UserControl.Resources>
        <!-- Change this to any pure hue i.e. no more than 2 rgb components set and at least 1 set to FF -->
        <Color x:Key="CurrentColor">red</Color>
        <LinearGradientBrush x:Key="HueBrush" StartPoint="0,0" EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF0000" Offset="0" />
                <GradientStop Color="#FFFF00" Offset="0.167" />
                <GradientStop Color="#00FF00" Offset="0.333" />
                <GradientStop Color="#00FFFF" Offset="0.5" />
                <GradientStop Color="#0000FF" Offset="0.667" />
                <GradientStop Color="#FF00FF" Offset="0.833" />
                <GradientStop Color="#FF0000" Offset="1" />
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
        <VisualBrush x:Key="LevelSaturationBrush" TileMode="None">
            <VisualBrush.Visual>
                <Canvas Background="Black" Width="1" Height="1" SnapsToDevicePixels="True">
                    <Rectangle Width="1" Height="1" SnapsToDevicePixels="True">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="White" Offset="0" />
                                    <GradientStop Color="{DynamicResource CurrentColor}" Offset="1" />
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                        <Rectangle.OpacityMask>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                    <GradientStop Color="#00FFFFFF" Offset="1"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Rectangle.OpacityMask>
                    </Rectangle>
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </UserControl.Resources>
    <Grid>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" UseLayoutRounding="True" HorizontalAlignment="Left" >
            <Border BorderBrush="#FFE1E1E1">
                <Canvas ClipToBounds="True" Background="Transparent" Name="Canvas1" Width="300" Height="300" MouseLeftButtonDown="Canvas1_MouseLeftButtonDown" RenderTransformOrigin="0.5,0.5" MouseMove="Canvas1_MouseMove">
                    <Rectangle Fill="{StaticResource LevelSaturationBrush}" Width="300" Height="300" SnapsToDevicePixels="True"/>
                    <Border Name="CircleColor" CornerRadius="7" Width="14" Height="14" MouseLeftButtonDown="CircleColor_MouseLeftButtonDown" MouseLeftButtonUp="CircleColor_MouseLeftButtonUp" Canvas.Left="100" Canvas.Top="100" BorderBrush="Black" BorderThickness="1" Padding="1">
                        <Ellipse Stroke="White"/>
                    </Border>
                </Canvas>
            </Border>
            <Slider Name="SliderColor" Width="20" Orientation="Vertical" Maximum="360" IsMoveToPointEnabled="True" Margin="10,0,0,0" ValueChanged="SliderColor_ValueChanged" FlowDirection="RightToLeft" IsDirectionReversed="True" Visibility="Hidden">
                <Slider.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF0000" Offset="0" />
                        <GradientStop Color="#FFFF00" Offset="0.167" />
                        <GradientStop Color="#00FF00" Offset="0.333" />
                        <GradientStop Color="#00FFFF" Offset="0.5" />
                        <GradientStop Color="#0000FF" Offset="0.667" />
                        <GradientStop Color="#FF00FF" Offset="0.833" />
                        <GradientStop Color="#FF0000" Offset="1" />
                    </LinearGradientBrush>
                </Slider.Background>
            </Slider>
            <Border Name="Bg" Width="20" Background="Black" Margin="10,0,0,0"/>
            <usercontrols:SliderColor Width="10" Maximum="360" Margin="10,0,0,0"/>
        </StackPanel>
    </Grid>
</UserControl>