Introduction
Hi. We know a color picker is not available in WPF but you can create a custom color picker with a few available controls of WPF. This article explains how to create a custom color picker dialog box using WPF.
Main Controls and Classes used to develop Color Picker
- List box: This control is used to list the colors available with WPF and select a color
- Wrap Panel: is used to gather a color in a list box
- Rectangle: is used to show a color in a list box
- Brushes class: Implements a set of predefined System.Windows.Media.SolidColorBrush objects
Main Concept
Use a System.Windows.Media.Brushes class as the item's source of a list box and fill the brush color in the rectangle controls that reside in the item template of the list box.
Getting Started
Open Visual Studio, click on "File" -> "New" -> "Project...". The New Project window will open. Select WPF application template , rename the project to "WPFColorPicker" than click the "OK" button. Take a list box control from the toolbox then rename it to "colorList". Take a wrap control from the Toolbox into the item panel template as in the following:
<listbox.itemspanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</listbox.itemspanel>
In the item template of the listbox use a rectangle control to show the color by filling it in and bind the name of the color as in the following
<listbox.itemtemplate>
<DataTemplate>
<Rectangle Fill="{Binding Name}" Width="20" Height="20" Stroke="#FF211E1E" OpacityMask="Black" StrokeThickness="1" />
</DataTemplate>
</listbox.itemtemplate>
The following is the complete code for the List Box in the XAML part:
<listbox horizontalalignment="Stretch" verticalalignment="Stretch" margin="0,0,0,81"
scrollviewer.horizontalscrollbarvisibility="Disabled" x:name="colorList" selectionchanged="colorList_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Rectangle Fill="{Binding Name}" Width="20" Height="20" Stroke="#FF211E1E" OpacityMask="Black" StrokeThickness="1" />
</DataTemplate>
</ListBox.ItemTemplate>
</listbox>
Again use a rectangle control outside the list box to show the selected color as in the following:
<Rectangle x:Name="rtlfill" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="60" Margin="10,326,0,0" Stroke="Black" VerticalAlignment="Top" Width="60" RenderTransformOrigin="0.533,0.6"/>
In the loaded event of the window set the item's source of the list box to list the colors as in the following:
private void Window_Loaded_1(object sender, RoutedEventArgs e)
{
this.colorList.ItemsSource = typeof(Brushes).GetProperties();
}
Again in the selection changed event of the listbox write the following code:
private void colorList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
Brush selectedColor = (Brush)(e.AddedItems[0] as PropertyInfo).GetValue(null, null);
rtlfill.Fill = selectedColor;
}
The code above fills the selected color from the list box to the rectangle controls taken outside of the list box and shows the selected color.
FULL Code
XAML
<Window x:Class="WPFColorPicker.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="376" Width="337" Loaded="Window_Loaded_1">
<Grid>
<ListBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,81" ScrollViewer.HorizontalScrollBarVisibility="Disabled" x:Name="colorList" SelectionChanged="colorList_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Rectangle Fill="{Binding Name}" Width="20" Height="20" Stroke="#FF211E1E" OpacityMask="Black" StrokeThickness="1" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Rectangle x:Name="rtlfill" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="60" Margin="10,275,0,0" Stroke="Black" VerticalAlignment="Top" Width="60" RenderTransformOrigin="0.533,0.6"/>
</Grid>
</Window>
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WPFColorPicker
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded_1(object sender, RoutedEventArgs e)
{
this.colorList.ItemsSource = typeof(Brushes).GetProperties();
}
private void colorList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
Brush selectedColor = (Brush)(e.AddedItems[0] as PropertyInfo).GetValue(null, null);
rtlfill.Fill = selectedColor;
}
}
}
Summery
In this demonstrator we learned how to build a color picker that is not available in WPF.