#963 – A Color Selection Box Organized by Hue, part II

In part I, I included source code for generating a list of sample colors.

To bind to a generated color list, we can call ColorUtil.GenerateColorList and make the result available via a property.  In the code sample below, we generate a list of 4,096 colors (16 values for red, green and blue).

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public MainWindow()
    {
        this.InitializeComponent();
        this.DataContext = this;

         ColorList = ColorUtil.GenerateColorList(16);
    }

    private List<ColorWithInfo> colorList;
    public List<ColorWithInfo> ColorList
    {
        get { return colorList; }
        protected set
        {
            colorList = value;
            RaisePropertyChanged("ColorList");
        }
    }

    // INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    private void RaisePropertyChanged(string propName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propName));
    }
}

In our XAML, we can create a simple ComboBox that binds to this list.  We set the ItemTemplate to display each color as a simple rectangle and the ItemsPanel as a WrapPanel with a fixed width.

    <ComboBox Margin="15" Height="30" Width="200"
                ItemsSource="{Binding ColorList}"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Rectangle Height="55" Width="55">
                        <Rectangle.Fill>
                            <SolidColorBrush Color="{Binding Color}"/>
                        </Rectangle.Fill>
                    </Rectangle>
                </Grid>
            </DataTemplate>
        </ComboBox.ItemTemplate>
        <ComboBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" Orientation="Horizontal" Width="1000"/>
            </ItemsPanelTemplate>
        </ComboBox.ItemsPanel>
    </ComboBox>

Below is an image showing the ComboBox in action. Note that the colors are sorted by hue, given that the GenerateColorList method sorted the color values this way.

#962 – A Color Selection Box Organized by Hue, part I

Here’s some code that generates a spread of different colors.  (We’ll later bind a ComboBox to the generated list of colors).

    public class ColorWithInfo : IComparable
    {
        public Color Color { get; set; }

        public string Info
        {
            get { return string.Format("{0}/{1}/{2}", Color.R, Color.G, Color.B); }
        }

        public string HueSatBright
        {
            get { return string.Format("{0}/{1}/{2}", Hue, Saturation, Brightness); }
        }

        public float Hue
        {
            get { return System.Drawing.Color.FromArgb(Color.R, Color.G, Color.B).GetHue(); }
        }

        public float Saturation
        {
            get { return System.Drawing.Color.FromArgb(Color.R, Color.G, Color.B).GetSaturation(); }
        }

        public float Brightness
        {
            get { return System.Drawing.Color.FromArgb(Color.R, Color.G, Color.B).GetBrightness(); }
        }

        public int CompareTo(object obj)
        {
            ColorWithInfo cwiOther = obj as ColorWithInfo;

            // Sort by Hue, and then Saturation, and then Brightness
            if (this.Hue == cwiOther.Hue)
            {
                if (this.Saturation == cwiOther.Saturation)
                    return this.Brightness.CompareTo(cwiOther.Brightness);
                else
                    return this.Saturation.CompareTo(cwiOther.Saturation);
            }
            else
                return this.Hue.CompareTo(cwiOther.Hue);
        }
    }

    public static class ColorUtil
    {
        public static List<ColorWithInfo> GenerateColorList(int numValsPerColor)
        {
            List<ColorWithInfo> colorList = new List<ColorWithInfo>();

            // Create increment such that we start at 0, end at 255,
            // and have a total of numValsPerColor within that range.
            int delta = Convert.ToInt32(255.0 / ((double)numValsPerColor - 1.0));

            for (int r = 0; r < numValsPerColor; r++)
                for (int g = 0; g < numValsPerColor; g++)
                    for (int b = 0; b < numValsPerColor; b++)
                    {
                        ColorWithInfo cwi = new ColorWithInfo {
                            Color = Color.FromRgb((byte)(r * delta), (byte)(g * delta), (byte)(b * delta))};
                        colorList.Add(cwi);
                    }

            colorList.Sort();

            return colorList;
        }
    }