ColorControl

ColorControl is a slider based control for selecting a Color value.

ColorControl defines a single dependency property Color and a single routed event ColorChanged.

Using ColorControl is as simple as placing it in the visual tree and binding to the Color property.

Following is the default Template for ColorControl, which you may use as a starting point for customizing.

<ControlTemplate TargetType="{x:Type ctrls:ColorControl}">
    <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="2.5*" />
            </Grid.ColumnDefinitions>
 
            <Canvas ClipToBounds="True" Grid.RowSpan="4" Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}">
                <Canvas.Background>
                    <DrawingBrush>
                        <DrawingBrush.Drawing>
                            <DrawingGroup>
                                <GeometryDrawing>
                                    <GeometryDrawing.Geometry>
                                        <RectangleGeometry Rect="0,0,100,100" />
                                    </GeometryDrawing.Geometry>
                                    <GeometryDrawing.Brush>
                                        <SolidColorBrush Color="{Binding ElementName=HueSlider, Path=Value, Converter={StaticResource hueToColorConverter}}" />
                                    </GeometryDrawing.Brush>
                                </GeometryDrawing>
                                <GeometryDrawing>
                                    <GeometryDrawing.Geometry>
                                        <RectangleGeometry Rect="0,0,100,100" />
                                    </GeometryDrawing.Geometry>
                                    <GeometryDrawing.Brush>
                                        <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                                            <GradientStop Offset="0.0" Color="Black" />
                                            <GradientStop Offset="1.0" Color="{Binding ElementName=HueSlider, Path=Value, Converter={StaticResource hueToColorConverter}}" />
                                        </LinearGradientBrush>
                                    </GeometryDrawing.Brush>
                                </GeometryDrawing>
                                <DrawingGroup PresentationOptions:Freeze="True">
                                    <GeometryDrawing>
                                        <GeometryDrawing.Geometry>
                                            <RectangleGeometry Rect="0,0,100,100" />
                                        </GeometryDrawing.Geometry>
                                        <GeometryDrawing.Brush>
                                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                                <GradientStop Offset="0.0" Color="White" />
                                                <GradientStop Offset="1" Color="Black" />
                                            </LinearGradientBrush>
                                        </GeometryDrawing.Brush>
                                    </GeometryDrawing>
                                    <DrawingGroup.OpacityMask>
                                        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                            <GradientStop Offset="0.0" Color="#FF000000" />
                                            <GradientStop Offset="1" Color="#00000000" />
                                        </LinearGradientBrush>
                                    </DrawingGroup.OpacityMask>
                                </DrawingGroup>
                            </DrawingGroup>
                        </DrawingBrush.Drawing>
                    </DrawingBrush>
                </Canvas.Background>
 
                <Grid Name="SVValueMarker">
                    <Ellipse Width="8" Height="8" Stroke="White" StrokeThickness="1" />
                    <Ellipse Width="10" Height="10" Stroke="Black" StrokeThickness="1" />
                    <Ellipse Width="12" Height="12" Stroke="White" StrokeThickness="1" />
                </Grid>
 
            </Canvas>
 
            <Slider x:Name="HueSlider" Width="16" Margin="5,0,0,0" Grid.RowSpan="4" Grid.Column="1" Minimum="0" Maximum="360"
                    Orientation="Vertical" IsDirectionReversed="True" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Value}" />
 
            <Grid Grid.Column="2" Margin="5,0,0,0" VerticalAlignment="Top">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="A" VerticalAlignment="Center"/>
                <Border Grid.Column="1" Margin="5,0" Background="{StaticResource CheckerboardBrush}" Height="14" VerticalAlignment="Center" />
                <Slider x:Name="AlphaSlider" Margin="5,0" Grid.Column="1" Height="14" VerticalAlignment="Center" Orientation="Horizontal" Minimum="0" Maximum="255" />
                <TextBox Grid.Column="2" Width="30" Text="{Binding ElementName=AlphaSlider, Path=Value, Mode=TwoWay, StringFormat=N0}" />
            </Grid>
 
            <Grid Grid.Column="2" Margin="5,0,0,0" Grid.Row="1" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="R" VerticalAlignment="Center" />
                <Slider x:Name="RedSlider" Margin="5,0" Grid.Column="1" Height="14" VerticalAlignment="Center" Orientation="Horizontal" Minimum="0" Maximum="255" />
                <TextBox Width="30" Grid.Column="2" ctrls:TextBoxBehavior.UpdateOnEnter="True" 
                            Text="{Binding ElementName=RedSlider, Path=Value, Mode=TwoWay, StringFormat=N0}" />
            </Grid>
            <Grid Grid.Column="2" Margin="5,0,0,0" Grid.Row="2" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="G" VerticalAlignment="Center"/>
                <Slider x:Name="GreenSlider" Margin="5,0" Grid.Column="1" Height="14" VerticalAlignment="Center" Orientation="Horizontal" Minimum="0" Maximum="255" />
                <TextBox Width="30" Grid.Column="2" ctrls:TextBoxBehavior.UpdateOnEnter="True" 
                            Text="{Binding ElementName=GreenSlider, Path=Value, Mode=TwoWay, StringFormat=N0}" />
            </Grid>
            <Grid Grid.Column="2" Margin="5,0,0,0" Grid.Row="3" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="B" VerticalAlignment="Center"/>
                <Slider x:Name="BlueSlider" Margin="5,0" Grid.Column="1" Height="14" VerticalAlignment="Center" Orientation="Horizontal" Minimum="0" Maximum="255" />
                <TextBox Width="30" Grid.Column="2" ctrls:TextBoxBehavior.UpdateOnEnter="True" 
                            Text="{Binding ElementName=BlueSlider, Path=Value, Mode=TwoWay, StringFormat=N0}" />
            </Grid>
        </Grid>
    </Border>
</ControlTemplate>

Here is the Style for the Sliders:

<Style TargetType="Slider">
    <Style.Resources>
        <ControlTemplate x:Key="VerticalThumbTemplate" TargetType="Thumb">
            <Grid Background="Transparent" Margin="-1,-6" VerticalAlignment="Center" HorizontalAlignment="Stretch">
                <Path HorizontalAlignment="Left" Stroke="White" Fill="Black" Data="M 0,0 L 0,11 5,5 Z" />
                <Path HorizontalAlignment="Right" Stroke="White" Fill="Black" Data="M 0,5 L 5,0 5,10 Z" />
            </Grid>
        </ControlTemplate>
    </Style.Resources>
    <Setter Property="IsMoveToPointEnabled" Value="True"/>
    <Setter Property="BorderBrush" Value="LightGray" />
    <Setter Property="BorderThickness" Value="1,1,1,0" />
    <Setter Property="SmallChange" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <Track Name="PART_Track">
                        <Track.Thumb>
                            <Thumb x:Name="Thumb">
                                <Thumb.Template>
                                    <ControlTemplate TargetType="Thumb">
                                        <Grid Background="Transparent" Margin="-6,0,-6,-6" VerticalAlignment="Bottom" HorizontalAlignment="Left">
                                            <Path Stroke="White" Fill="Black" Data="M 0,7 L 5.5,0 11,7" />
                                            <Path Stroke="Black" Fill="White" Data="M 1.5,7 L 9.5,7 9.5,12 1.5,12 Z" />
                                        </Grid>
                                    </ControlTemplate>
                                </Thumb.Template>
                            </Thumb>
                        </Track.Thumb>
                    </Track>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Orientation" Value="Vertical">
                        <Setter TargetName="Thumb" Property="Template" Value="{StaticResource VerticalThumbTemplate}" />
                        <Setter Property="BorderThickness" Value="0" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The following resources are also used by ColorControl’s default Template:

<ctrls:HueToColorValueConverter x:Key="hueToColorConverter" />
 
<!-- Brush for drawing the checkered squares that are displayed underneath transparent colors. -->
<DrawingBrush x:Key="CheckerboardBrush" Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <GeometryDrawing Brush="White">
                <GeometryDrawing.Geometry>
                    <RectangleGeometry Rect="0,0 2,2" />
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
            <GeometryDrawing Brush="LightGray">
                <GeometryDrawing.Geometry>
                    <GeometryGroup>
                        <RectangleGeometry Rect="0,0 1,1" />
                        <RectangleGeometry Rect="1,1 1,1" />
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
            </GeometryDrawing>
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>

Related posts:

  1. Brush Control Quick Start Guide
  2. Circular Progress Control (WPF) Quick Start Guide
  3. WPF EnumPicker
  4. Rating Control for WPF Quick Start Guide
  5. WPF AdvGrid Quick Start Guide