One of the neat controls in our WPF Elements control suite is the color picker. Color pickers are a great addition to your WPF tool box as they are useful in all sorts of different applications. Rather than providing a single color picker control with options to display different parts, we provide several color picking components that you can piece together to create whatever color picking UI that you need. Most of these components can even be used standalone as simple color picker controls. Using data templates, you can also include additional functionality. The main components are:
The ColorPicker which displays a palette of colors that the user can select.
The HsvColorPicker which is modelled from the Expression Blend color picker.
The ChannelColor picker which provides sliders and numeric up downs for editing individual color channels such as R,G,B and Alpha.
And the DropDownColorPicker which always displays the selected color but hides away the actual color picker UI until the user wants to edit it. Below is an image of the default set up of the DropDownColorPicker. Notice that it includes all the other components I’ve mentioned above which creates a UI for the user to select a color in almost any way they like.
By changing the header template and drop down template, you can create a different color picker UI that suites the requirements of your application.
The Color Text Box
Based on customer feedback we have added a couple of new features to this color picker suite. The first feature is a whole new component: the ColorTextBox. This control lets the user view and edit the selected color as a hexadecimal value. This is fantastic for applications designed for users who are used to editing colors as hexadecimal values such as web developers or graphic designers. The parser supports common hexadecimal color formats such as hash or no hash, 8 digits for including the alpha channel, 6 digits for opaque colors and 3 digits for shorthand formatting (e.g. #123 would be treated as #112233).
In terms of displaying the selected color, there are a few options for specifying how the selected color gets encoded. If AlwaysShowAlphaHexEncoding is true, the encoded color will always be displayed with 8 digits. If this is false, the alpha encoding will not be displayed if the color is fully opaque. IsHashSymbolDisplayed lets you specify if the hash prefix is included in the displayed string. by setting IsMinimizeHexEncodingEnabled to true, the hex encoding will be shortened to 3 digits where possible.
A couple of other useful properties are: SelectAllOnEntry and UpdateSelectedColorWhileEditing. If SelectAllOnEntry is true, all the text will be selected when the control gains focus. This can be convenient for quickly getting in and editing or copying the entire color value. UpdateSelectedColorWhileEditing is true by default which means the selected color value changes in real time as the user is editing the hex value. By setting this to false, the selected color will only be updated when the control loses focus or the enter key is pressed.
HSV Color Sliders
The other new feature we have added are additional sliders to the ChannelColorPicker control for editing the HSV values of a color. By default, the ChannelColorPicker will still only display the RGB and Alpha sliders. You can use these 3 new properties to change which sliders get displayed: IsRgbVisible, IsHsvVisible and IsAlphaVisible.
Customization
As I mentioned before, you can use a data template to piece together the various color picker components to create your own color picker UI. Here I’ll give you an example of how to make a custom DropDownColorPicker UI. Lets start with the header template. This is to customize the appearance of the selected color display that is not hidden in the drop down. The default template simply displays the selected color in a TextBlock with an appropriate english name. Lets use the new ColorTextBox control giving the users an option to edit the color as a hexadecimal value without needing to open the drop down. Here is the code for this template which includes a border element to visualize the selected color alongside the ColorTextBox.
<ms:ColorToBrushConverter x:Key="ColorToBrush" /> <DataTemplate x:Key="HeaderTemplate"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Border Background="{Binding SelectedColor, Converter={StaticResource ColorToBrush}}" BorderBrush="Black" BorderThickness="1" Margin="2,0,6,0" SnapsToDevicePixels="True" Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" /> <ms:ColorTextBox Grid.Column="1" BorderThickness="0" SelectedColor="{Binding SelectedColor, Mode=TwoWay}" VerticalAlignment="Center" IsHashSymbolDisplayed="True" IsMinimizeHexEncodingEnabled="True" SelectAllOnEntry="True" UpdateSelectedColorWhileEditing="False" /> </Grid> </DataTemplate>
Next is the drop down template. Here I’ve taken the default template and modified it to include the new HSV color sliders and another ColorTextBox. Most of the controls are in the MoreColorsTemplate which defines what to display in the “More Colors” secondary popup. The drop down template includes a color palette and a MoreColorsButton. You can use this code as a starting point for making your own UI.
<DataTemplate x:Key="MoreColorsTemplate"> <DockPanel> <Border Background="{StaticResource MenuBackground}" DockPanel.Dock="Bottom"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <Button Content="OK" Width="80" Margin="5" Command="{x:Static ms:MoreColorsButtonCommands.AcceptColor}" /> <Button Content="Cancel" Width="80" Margin="5" Command="{x:Static ms:MoreColorsButtonCommands.CancelColor}" /> </StackPanel> </Border> <Border Height="1" Background="{StaticResource Border}" DockPanel.Dock="Bottom" /> <Grid DockPanel.Dock="Left" Margin="3,3,0,3"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <ms:HsvColorPicker x:Name="HSVPicker" Width="180" Height="180" SelectedColor="{Binding NewColor, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type ms:MoreColorsButton}}}" /> <ms:ColorTextBox Grid.Row="1" Margin="0,3,0,0" SelectedColor="{Binding NewColor, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type ms:MoreColorsButton}}}" IsHashSymbolDisplayed="True" /> </Grid> <Border BorderBrush="Black" Padding="1" Background="White" CornerRadius="2" Margin="5,2,5,3" Height="22" DockPanel.Dock="Bottom" BorderThickness="1"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Border Background="{Binding CurrentColor, Converter={StaticResource ColorToBrush}, RelativeSource={RelativeSource AncestorType={x:Type ms:MoreColorsButton}}}" /> <Border Background="{Binding NewColor, Converter={StaticResource ColorToBrush}, RelativeSource={RelativeSource AncestorType={x:Type ms:MoreColorsButton}}}" Grid.Column="1" /> </Grid> </Border> <ms:ChannelColorPicker Width="180" BorderThickness="0" Height="180" H="{Binding H, Mode=TwoWay, ElementName=HSVPicker}" IsHsvVisible="True" SelectedColor="{Binding NewColor, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type ms:MoreColorsButton}}}" /> </DockPanel> </DataTemplate>
<DataTemplate x:Key="DropDownTemplate"> <Border BorderBrush="{Binding BorderBrush}" BorderThickness="1"> <StackPanel> <ms:ColorPicker Palette="{Binding Palette}" SelectedColor="{Binding SelectedColor}" BorderThickness="0" /> <ms:MoreColorsButton CurrentColor="{Binding SelectedColor}" ContentTemplate="{StaticResource MoreColorsTemplate}" BorderThickness="0,1,0,0" /> </StackPanel> </Border> </DataTemplate>
And to finish it off, you can apply these templates to the DropDownColorPicker in your application:
<ms:DropDownColorPicker HeaderTemplate="{StaticResource HeaderTemplate}" DropDownTemplate="{StaticResource DropDownTemplate}" />
These new features are available right now in the current nightly build. If you are currently playing around with the trial version, or want to give it a try, you can download the free trial from here. If you are already a customer, you can download the latest nightly build from your account page.
If you have any questions about any of our WPF controls, come meet us in the forum.
You should join our newsletter! Sent monthly:
[...] WPF Elements: New Color Picker Features (Jason Fauchelle) [...]
Leave a Reply