Creating a ListBox that Shows All Predefined System Colors

The System.Windows.SystemColors class contains a series of static properties that expose the current predefined system colors.  The properties come in triplets.  For each system color Xxx, there are XxxBrush, XxxBrushKey and XxxColor properties.

We can easily create a little WPF application to display the current system colors by building a collection of brushes and then binding the collection to a ListBox.

Here’s the final result:

Below is the code that I used to create the list.

I start with a little utility class that wraps up a named system color and its Brush:

    public class ColorInfo
    {
        public string Name { get; set; }
        public Brush Brush { get; set; }

        public ColorInfo(string name, Brush brush)
        {
            Name = name;
            Brush = brush;
        }
    }

Next, I add a collection to my main Window class, which will store a list of ColorInfo objects:

    private ObservableCollection<ColorInfo> allSystemColors;
    public ObservableCollection<ColorInfo> AllSystemColors
    {
        get { return allSystemColors; }
    }

In the window’s constructor, I populate this list, using reflection.  Notice that I iterate through all of the properties in the SystemColors class and grab only those whose names end in “Brush”.

        allSystemColors = new ObservableCollection<ColorInfo>();

        Type scType = typeof(SystemColors);
        foreach (PropertyInfo pinfo in scType.GetProperties())
        {
            if (pinfo.Name.EndsWith("Brush"))
                allSystemColors.Add(new ColorInfo(pinfo.Name.Remove(pinfo.Name.Length - 5),
                                                (Brush)pinfo.GetValue(null, null)));
        }

All that remains is to bind this collection to a ListBox.  We do this in the XAML:

    <ListBox ItemsSource="{Binding ElementName=mainWindow, Path=AllSystemColors}"
		ScrollViewer.HorizontalScrollBarVisibility="Disabled"
		ScrollViewer.VerticalScrollBarVisibility="Auto" >
    	<ListBox.ItemsPanel>
    		<ItemsPanelTemplate>
    			<WrapPanel />
			</ItemsPanelTemplate>
		</ListBox.ItemsPanel>
		<ListBox.ItemTemplate>
	        <DataTemplate>
	        	<StackPanel Orientation="Vertical">
	                <Rectangle Fill="{Binding Path=Brush}" Stroke="Black" Margin="5" StrokeThickness="1" Height="74" Width="120"/>
	                <TextBlock Text="{Binding Path=Name}" HorizontalAlignment="Center"/>
				</StackPanel>
	        </DataTemplate>
	    </ListBox.ItemTemplate>
    </ListBox>

Voila!

2 thoughts on “Creating a ListBox that Shows All Predefined System Colors

  1. Pingback: #224 – Using Predefined System Colors in XAML « 2,000 Things You Should Know About WPF

  2. Pingback: #225 – Using a Brush that Will Update When a System Color Changes « 2,000 Things You Should Know About WPF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s