<UserControl
    x:Class="FingerPaint.HslColorSelector"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FingerPaint"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <UserControl.Resources>
        <ControlTemplate x:Key="xySliderTemplate" TargetType="local:XYSlider">
            <Border>
                <Grid>
                    <ContentPresenter Name="ContentPresenterPart"
                                      Content="{TemplateBinding Content}" />
                    <Canvas>
                        <Path Name="CrossHairPart"
                              Fill="{TemplateBinding Foreground}"
                              Data="M 0 6 L -3 24 3 24 Z
                                    M 0 -6 L -3 -24 3 -24 Z
                                    M 6 0 L 24 -3 24 3 Z
                                    M -6 0 L -24 -2 -24 3 Z" />
                    </Canvas>
                </Grid>
            </Border>
        </ControlTemplate>

        <ControlTemplate x:Key="sliderTemplate" TargetType="Slider">
            <Grid>
                <Grid Name="HorizontalTemplate"
                      Background="Transparent"
                      Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Rectangle Name="HorizontalTrackRect"
                               Grid.Column="0"
                               Grid.ColumnSpan="3"
                               Fill="{TemplateBinding Background}"
                               Height="12"
                               VerticalAlignment="Top" />
                    
                    <Thumb Name="HorizontalThumb"
                           Grid.Column="1"
                           DataContext="{TemplateBinding Value}">
                        <Thumb.Template>
                            <ControlTemplate TargetType="Thumb">
                                <Path Fill="{TemplateBinding Foreground}"
                                      Data="M 0 24 L -3 48 3 48 Z" />
                            </ControlTemplate>
                        </Thumb.Template>
                    </Thumb>

                    <Rectangle Name="HorizontalDecreaseRect"
                               Grid.Column="2"
                               Fill="Transparent" />
                </Grid>
                
                <Grid Name="VerticalTemplate"
                      Background="Transparent"
                      Width="48">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <Rectangle Name="VerticalTrackRect"
                               Grid.Row="0"
                               Grid.RowSpan="3"
                               Fill="{TemplateBinding Background}"
                               Width="12"
                               HorizontalAlignment="Left" />

                    <Thumb Name="VerticalThumb"
                           Grid.Row="1"
                           DataContext="{TemplateBinding Value}">
                        <Thumb.Template>
                            <ControlTemplate TargetType="Thumb">
                                <Path Fill="{TemplateBinding Foreground}"
                                      Data="M 24 0 L 48 -3 48 3 Z" />
                            </ControlTemplate>
                        </Thumb.Template>
                    </Thumb>

                    <Rectangle Name="VerticalDecreaseRect"
                               Grid.Row="2"
                               Fill="Transparent" />
                </Grid>
            </Grid>
        </ControlTemplate>
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <local:XYSlider x:Name="xySlider"
                        Grid.Row="0"
                        Template="{StaticResource xySliderTemplate}"
                        ValueChanged="OnXYSliderValueChanged">
            <Image Name="hsImage"
                   Stretch="None" />
        </local:XYSlider>

        <Slider Name="slider"
                Grid.Row="1"
                Orientation="Horizontal"
                Template="{StaticResource sliderTemplate}"
                Width="256"
                Margin="0 12"
                ValueChanged="OnSliderValueChanged">
            <Slider.Background>
                <LinearGradientBrush StartPoint="0 0" EndPoint="1 0">
                    <GradientStop Offset="0" Color="Black" />
                    <GradientStop x:Name="sliderGradientStop" Offset="0.5" />
                    <GradientStop Offset="1" Color="White" />
                </LinearGradientBrush>
            </Slider.Background>
        </Slider>

        <TextBlock Name="txtblk"
                   Grid.Row="2"                   
                   HorizontalAlignment="Center"
                   TextAlignment="Center"
                   FontSize="24" />
    </Grid>
</UserControl>
