<UserControl x:Class="WPFColorPickerLib.ColorPicker"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="328" Width="525" MinHeight="305" MinWidth="482">
  <UserControl.Resources>
    <DrawingBrush x:Key="CheckerboardBrush"
        Stretch="None" TileMode="Tile" AlignmentX="Left" AlignmentY="Top"
        Viewport="0,0,10,10" ViewportUnits="Absolute">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="sc# 1,1,1">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,10,10" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <GeometryDrawing Brush="sc# 0.5,0.5,0.5">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,5,5" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <GeometryDrawing Brush="sc# 0.5,0.5,0.5">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="5,5,5,5" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </UserControl.Resources>

  <Grid Background="White" MouseWheel="AlphaSlider_MouseWheel" MouseUp="CanvasImage_MouseUp" Height="329" Width="479">
    <Grid.RowDefinitions>
      <RowDefinition Height="35"/>
      <RowDefinition Height="200"/>
      <RowDefinition Height="64"/>
      <RowDefinition Height="6*" />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Height="35"
                    HorizontalAlignment="Stretch" Orientation="Horizontal"
                    Background="Black">
      <Label Content="Pick swatch type" Foreground="White" FontWeight="Bold"
                   VerticalAlignment="Center"/>
      <Image x:Name="ImgSqaure1" Height="20" Width="20"
                   Source="Images/ColorSwatchSquare1.png" Margin="45,0,0,0"
                   ToolTip="Color Swatch Square 1"
                   MouseLeftButtonDown="Swatch_MouseLeftButtonDown"/>
      <Image x:Name="ImgSqaure2" Height="20" Width="20"
                   Source="Images/ColorSwatchSquare2.png" Margin="5,0,0,0"
                   ToolTip="Color Swatch Square 2"
                   MouseLeftButtonDown="Swatch_MouseLeftButtonDown"/>
      <Image x:Name="ImgCircle1" Height="20" Width="20"
                   Source="Images/ColorSwatchCircle.png" Margin="5,0,0,0"
                   ToolTip="Color Swatch Circle"
                   MouseLeftButtonDown="Swatch_MouseLeftButtonDown"/>
    </StackPanel>
    <Grid x:Name="MainGrid"
          Grid.Row="1" MouseDown="CanvasImage_MouseDown"
          MouseUp="CanvasImage_MouseUp" Margin="0,0,0,34" Grid.RowSpan="2">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="170"/>
        <ColumnDefinition Width="164"/>
        <ColumnDefinition Width="176"/>
      </Grid.ColumnDefinitions>

      <!-- Colorbox, Column1-->
      <Grid Grid.Column="0" Grid.Row="0" Margin="10,30,0,0" >
        
        <Border BorderBrush="Black"
                BorderThickness="2"
                HorizontalAlignment="Center"
                VerticalAlignment="Top"
                Background="White"
                Width="154"
                Height="154">
        </Border>
        <!-- Selection, Column 0-->
          <Image x:Name="ColorImage"
                 Width="150"
                 Height="150"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Top"
                 Margin="2"/>
          
          <Canvas x:Name="canvasImage"
                Width="150"
                Height="150"
                HorizontalAlignment="Center"
                Background="Transparent"
                VerticalAlignment="Top"
                Margin="2"
                MouseDown="CanvasImage_MouseDown"
                MouseUp="CanvasImage_MouseUp"
                MouseMove="CanvasImage_MouseMove">
            <Ellipse x:Name="ellipsePixel"
                   Width="8"
                   Height="8"
                   Stroke="Black"
                   Fill="White"
                   Canvas.Left="0"
                   Canvas.Top="0"/>
          </Canvas>
      </Grid>

      <!-- Preview, Column 1-->
      <StackPanel Grid.Column="1" Orientation="Vertical" Grid.ColumnSpan="2" Margin="0,0,169,0" MouseDown="CanvasImage_MouseDown" MouseUp="CanvasImage_MouseUp">
        <Label Content="Preview" Margin="5,0,0,0" HorizontalAlignment="Left"
                       Foreground="Black" FontWeight="Bold" VerticalAlignment="Center"/>

        <Border Margin="4,5,10,0" Width="154" Height="154"
                        HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="2"
                        Background="{StaticResource CheckerboardBrush}">
          <InkPresenter Name="previewPresenter"
                                  Margin="0"
                                  Width="150"
                                  Height="150"
                                  MouseDown="CanvasImage_MouseDown"
                                  MouseUp="CanvasImage_MouseUp"
                                  Strokes="AOcBAxdIEESAgYAERYQBGwIAJAFGhAEbAgAkAQUBOBkgMgkA9P8CAekiOkUzCQD4nwIBWiA6RTgIAP4DAAAAgH8RAACAPx8JEQAAAAAAAPA/CpYBNIfm3uajgcQgUUiUkjUelEal0KkUBh0HichlM1mtJotZp9JodDl8jk8ZgcBiUOjUYl08m0+l0+lFCjksjESAh+kg6auNwaEwSBQiEQyLRKTRiVSiUSSORyLQ6JQSBIPFYnKZTL5fOZfMZXL4/H47DYLBYHFoJLIpEo9GgIP3OB5PlxLCJiZmU1MISSi4SJiS74+D4+4o" />
        </Border>
      </StackPanel>

      <!-- TextBoxes, Column 2-->
      <StackPanel Grid.Column="2" Orientation="Vertical" Margin="0,0,28,0">

        <StackPanel Orientation="Horizontal" Margin="0,30,0,0">
          <Label Content="A" Margin="5,0,0,0" HorizontalAlignment="Left"
                            Foreground="Black" FontWeight="Bold" VerticalAlignment="Center"/>
          <Border CornerRadius="5" BorderBrush="Black" Background="White"
                            BorderThickness="2" Width="50" Height="30">
            <TextBox x:Name="txtAlpha" BorderThickness="0" Background="White"
                            BorderBrush="Transparent" Margin="5,1,5,1" IsReadOnly="False" TextAlignment="Center" Padding="0,5,0,0" IsTabStop="False" TextChanged="txtAlpha_TextChanged" />
          </Border>
          <Border CornerRadius="5" BorderBrush="Black" Background="LightGray"
                            BorderThickness="2" Margin="10,0,0,0" Width="50" Height="30">
            <TextBox x:Name="txtAlphaHex" BorderThickness="0"
                            Background="LightGray" BorderBrush="Transparent"
                            Margin="5,1,5,1" IsReadOnly="True" TextAlignment="Center" Padding="0,5,0,0" IsTabStop="False"/>
          </Border>
        </StackPanel>

        <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
          <Label Content="R" Margin="5,0,0,0" HorizontalAlignment="Left"
                            Foreground="Black" FontWeight="Bold" VerticalAlignment="Center"/>
          <Border CornerRadius="5" BorderBrush="Black" Background="White"
                            BorderThickness="2" Width="50" Height="30">
            <TextBox x:Name="txtRed" BorderThickness="0" Background="White"
                            BorderBrush="Transparent" Margin="5,1,5,1" IsReadOnly="False" TextAlignment="Center" Padding="0,5,0,0" IsTabStop="False" TextChanged="txtAlpha_TextChanged" />
          </Border>
          <Border CornerRadius="5" BorderBrush="Black" Background="LightGray"
                            BorderThickness="2" Margin="10,0,0,0" Width="50" Height="30">
            <TextBox x:Name="txtRedHex" BorderThickness="0" Background="LightGray"
                            BorderBrush="Transparent" Margin="5,1,5,1" IsReadOnly="True" TextAlignment="Center" Padding="0,5,0,0" IsTabStop="False"/>
          </Border>
        </StackPanel>

        <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
          <Label Content="G" Margin="5,0,0,0" HorizontalAlignment="Left"
                            Foreground="Black" FontWeight="Bold"
                            VerticalAlignment="Center"/>
          <Border CornerRadius="5" BorderBrush="Black" Background="White"
                            BorderThickness="2" Width="50" Height="30">
            <TextBox x:Name="txtGreen" BorderThickness="0"
                            Background="White" BorderBrush="Transparent"
                            Margin="5,1,5,1" IsReadOnly="False" TextAlignment="Center" Padding="0,5,0,0" IsTabStop="False" TextChanged="txtAlpha_TextChanged" />
          </Border>
          <Border CornerRadius="5" BorderBrush="Black" Background="LightGray"
                            BorderThickness="2" Margin="10,0,0,0" Width="50" Height="30">
            <TextBox x:Name="txtGreenHex" BorderThickness="0"
                            Background="LightGray" BorderBrush="Transparent"
                            Margin="5,1,5,1" IsReadOnly="True" TextAlignment="Center" Padding="0,5,0,0" IsTabStop="False"/>
          </Border>
        </StackPanel>

        <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
          <Label Content="B" Margin="5,0,0,0" HorizontalAlignment="Left"
                           Foreground="Black" FontWeight="Bold"
                           VerticalAlignment="Center"/>
          <Border CornerRadius="5" BorderBrush="Black" Background="White"
                           BorderThickness="2" Width="50" Height="30">
            <TextBox x:Name="txtBlue" BorderThickness="0" Background="White"
                           BorderBrush="Transparent" Margin="5,1,5,1" IsReadOnly="False" TextAlignment="Center" Padding="0,5,0,0" IsTabStop="False" TextChanged="txtAlpha_TextChanged" />
          </Border>
          <Border CornerRadius="5" BorderBrush="Black" Background="LightGray"
                            BorderThickness="2" Margin="10,0,0,0" Width="50" Height="30">
            <TextBox x:Name="txtBlueHex" BorderThickness="0"
                            Background="LightGray" BorderBrush="Transparent"
                            Margin="5,1,5,1" IsReadOnly="True" TextAlignment="Center" Padding="0,5,0,0" IsTabStop="False"/>
          </Border>
        </StackPanel>

        <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
          <Border CornerRadius="5" Margin="22,0,0,0" Background="LightGray"
                            BorderBrush="Black" BorderThickness="2" Width="112" Height="30">
            <TextBox x:Name="txtAll" BorderThickness="0" Background="LightGray"
                            BorderBrush="Transparent" Margin="5,1,5,1" IsReadOnly="True" TextAlignment="Center" Padding="0,5,0,0" IsTabStop="False"/>
          </Border>
        </StackPanel>
      </StackPanel>
    </Grid>

    <!--AlphaSlider-->
    <Border x:Name="AlphaBorder"
                Grid.Row="2"
                Grid.ColumnSpan="2"
                BorderBrush="Black"
                Height="40"
                BorderThickness="2"
                CornerRadius="5"
                MouseWheel="AlphaSlider_MouseWheel"
                Margin="10,5,10,5">
      <Slider x:Name="AlphaSlider"
                    Orientation="Horizontal"
                    Minimum="0"
                    Maximum="255"
                    SmallChange="1"
                    LargeChange="25"
                    VerticalAlignment="Center"
                    Margin="5"
                    Value="255"
                    ValueChanged="AlphaSlider_ValueChanged"/>
    </Border>
  </Grid>
</UserControl>
