Create Color Picker in WPF

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

1. List box: This control is used to list the colors available with WPF and select a color
2. Wrap Panel: is used to gather a color in a list box
3. Rectangle: is used to show a color in a list box
4. 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.