<Window x:Class="CustomControlsClient.ColorPickerTwoWays"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ColorPickerTwoWays" Height="300" Width="300"
        xmlns:lib="clr-namespace:CustomControls;assembly=CustomControls"
    >
  <Window.Resources>    
      <ControlTemplate x:Key="FancyColorPickerTemplate">
        <Border Background="LightGoldenrodYellow"
                BorderBrush="Black"
                BorderThickness="1">
          <Grid>            
            <Grid.RowDefinitions>
              <RowDefinition></RowDefinition>
              <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition></ColumnDefinition>
              <ColumnDefinition Width="Auto"></ColumnDefinition>
              <ColumnDefinition Width="Auto"></ColumnDefinition>
              <ColumnDefinition Width="Auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Grid.Resources>
              <Style TargetType="{x:Type Slider}">
                <Setter Property="Orientation" Value="Vertical"></Setter>
                <Setter Property="TickPlacement" Value="TopLeft"></Setter>
                <Setter Property="TickFrequency" Value="10"></Setter>
                <Setter Property="Minimum" Value="0"></Setter>
                <Setter Property="Maximum" Value="255"></Setter>
                <Setter Property="Margin" Value="5"></Setter>
              </Style>
              <Style TargetType="{x:Type TextBlock}">
                <Setter Property="Margin" Value="3"></Setter>                
                <Setter Property="FontSize" Value="10"></Setter>
              </Style>
            </Grid.Resources>

            <Ellipse Grid.Column="0" Grid.RowSpan="2" 
                       Margin="10" Height="120" Stroke="LightGray" StrokeThickness="5">
              <Ellipse.Fill>
                <SolidColorBrush Color="{Binding Path=Color,
                       RelativeSource={RelativeSource TemplatedParent}}"></SolidColorBrush>
              </Ellipse.Fill>
            </Ellipse>

                          
              <Slider Name="PART_RedSlider" Grid.Column="1"></Slider>
            <TextBlock Grid.Row="1" Grid.Column="1">RED</TextBlock>
            <Slider Name="PART_GreenSlider" Grid.Column="2"></Slider>
            <TextBlock Grid.Row="1" Grid.Column="2">GREEN</TextBlock>
              <Slider Name="PART_BlueSlider" Grid.Column="3"></Slider>
            <TextBlock Grid.Row="1" Grid.Column="3">BLUE</TextBlock>
                

          </Grid>

        </Border>
      </ControlTemplate>
    
  </Window.Resources>
  <StackPanel>
    <lib:ColorPicker
      Name="colorPicker1" Margin="2" Padding="3" Color="AliceBlue"></lib:ColorPicker>
    <lib:ColorPicker 
      Name="colorPicker2" Template="{StaticResource FancyColorPickerTemplate}" Color="{Binding ElementName=colorPicker1,Path=Color,Mode=TwoWay}"
      Margin="5,20,5,5" ></lib:ColorPicker>
    
  </StackPanel>
</Window>
