Color Picker ComoBox in WPF C#

Color Picker ComoBox in WPF C#

  This example explains How to populate WPF Supported Colors into ComboBox.
and then select each color in the Combobox ,it Draws a Rectangle with selected one.

Step 1)  Add ComboBox and one Rectangle to XAML Page/UserControl

        <Rectangle Fill="black"  Grid.Row="2" Grid.Column="0"
                   Grid.ColumnSpan="2"
                   HorizontalAlignment="Left"
                   Height="100" Stroke="Black"
                   VerticalAlignment="Top" Width="300"
                   x:Name="Rectangle1"
                   />
        <ComboBox HorizontalAlignment="Left" VerticalAlignment="Top"
                  Width="158"
                  x:Name="colorCombo" SelectionChanged="colorCombo_SelectionChanged"
                  ItemsSource="{Binding}" Grid.Row="1" Grid.Column="01"
                   Height="22"
                  >
        </ComboBox>

Step 2) Add SelectionChanged Event handler for ComboBox

Step 3) Fill Combobox with Colors
Before that, as you seen in the Image,Item in the combo box has 2 elements
                  1.Rectangle
                  2.TextBlock
So Putting these UI elements in StatckPanel with Orientation Horizontal.

i.e Each Combobox element is one StackPanel

        void ColorPickerComboBoxDemo_Loaded(object sender, RoutedEventArgs e)
        {
        try
        {
       
        System.Reflection.PropertyInfo[] colorProp=typeof(Colors).GetProperties();
        listOfColor =  new String[colorProp.Length];
        int i=0;
        foreach (System.Reflection.PropertyInfo pi in colorProp)
        {
                colorCombo.Items.Add(GetStackPanel(pi.Name));
        }
        }
        catch (Exception ex)
        {
        MessageBox.Show(ex.Message);
        }
        }


        StackPanel GetStackPanel(String strColor)
        {
        StackPanel ColorsStack = new StackPanel();
        ColorsStack.Orientation = Orientation.Horizontal;
        Rectangle rect = new Rectangle();
        rect.Width = 20;
        rect.Height = 20;
        Color newColor = (Color)ColorConverter.ConvertFromString(strColor);
        rect.Fill = new SolidColorBrush(newColor);
        //rect.Stroke = 2;
        TextBlock blk = new TextBlock();
        blk.Text = strColor;
        ColorsStack.Children.Add(rect);
        ColorsStack.Children.Add(blk);
        return ColorsStack;
        }

Step 4)   Filling Rectangle in ComoBox SelectionIndexChanged Event Handler

        private void colorCombo_SelectionChanged(object sender,
                         SelectionChangedEventArgs e)
        {
         //Stack Panel has 2 elements one small colored rect
        //Another one TextBlock.
        StackPanel selPanel = colorCombo.SelectedValue as StackPanel;
        TextBlock txtBlk=selPanel.Children[1] as TextBlock;
        Color newColor = (Color)ColorConverter.ConvertFromString(txtBlk.Text);
        Rectangle1.Fill = new SolidColorBrush(newColor);
        }
Step 5) Run the Application

Tags:Color Picker ComoBox in WPF C# VB.NET XAML .net 4.5,using a combobox to select a color,Combo color picker wpf, ColorPicker WPF C#,WPF color picker combobox,WPF Combobox, WPF Rectangle,WPF ComboBox SelectionChanged,CustomFont in WPF,WPF ComboBox DataContext.