While writing Silverlight applications, I find it challenging to pick colors from the list of predefined colors supported by Silverlight. Honestly I don’t know what those fancy colors look like. There! I said it!. Happy? To overcome this issue in true developer style, I wrote a small utility which shows all predefined colors on a page. This post is about how I wrote the utility. Here is a screenshot of what my little application looks like when it is running.

In XAML we have more colors available to us as compared to when we are in code behind. When  we write something like Fill=”DarkBlue”, XAML parser converts it into the proper dark blue color. Look at the choice of colors we get when writing XAML.

And this is our limited choice in c#.

But for my little utility I needed to know about all those pre-defined colors in c#. I found a post by Jabb which came in handy for this.

Writing this application was very simple. In my XAML I defined a DataTemplate which is used by a ListBox to show all colors.

<UserControl x:Class="AllColors.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
  <StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
      <DataTemplate x:Key="ColorsTemplate">
        <StackPanel Margin="10" Orientation="Horizontal">
          <TextBlock
            Margin="20"
            Width="200"
            VerticalAlignment="Center"
            Text="{Binding Path=ColorName}"
            FontFamily="Verdana"
            FontSize="20"  />
          <Rectangle
            Margin="20"
            Width="300"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            Height="100"
            Fill="{Binding Path=ColorName}" />
        </StackPanel>
      </DataTemplate>
    </StackPanel.Resources>

    <ListBox x:Name="lstColors"
      Margin="50"
      Height="800"
      ItemTemplate="{StaticResource ColorsTemplate}"
      ScrollViewer.VerticalScrollBarVisibility="Visible" />
    </StackPanel>
</UserControl>

In C# code for my UserControl, I assigned ItemSource property to a list of pre-defined colors.

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
  AllColorsHelper helper = new AllColorsHelper();
  lstColors.ItemsSource = helper.PredefinedColors;
}

A collection of pre-defined colors came from a helper class. This collection is loaded in the constructor of AllColorsHelper class.

public class Color
{
  public string ColorName { get; set; }
  public uint ColorCode { get; set; }
}

public class AllColorsHelper
{
  public AllColorsHelper()
  {
    PredefinedColors = new List<Color>
      {
         new Color{ColorName = "Aliceblue", ColorCode = 0xFFF0F8FF},
         new Color{ColorName = "AntiqueWhite", ColorCode = 0xFFFAEBD7},
         new Color{ColorName = "Aqua", ColorCode = 0xFF00FFFF},
         new Color{ColorName = "Aquamarine", ColorCode = 0xFF7FFFD4},
         new Color{ColorName = "Azure", ColorCode = 0xFFF0FFFF},
         new Color{ColorName = "Beige", ColorCode = 0xFFF5F5DC},
         new Color{ColorName = "Bisque", ColorCode = 0xFFFFE4C4},
         new Color{ColorName = "Black", ColorCode = 0xFF000000},
         new Color{ColorName = "BlanchedAlmond", ColorCode = 0xFFFFEBCD},
         new Color{ColorName = "Blue", ColorCode = 0xFF0000FF},
         new Color{ColorName = "BlueViolet", ColorCode = 0xFF8A2BE2},
         new Color{ColorName = "Brown", ColorCode = 0xFFA52A2A},
         new Color{ColorName = "BurlyWood", ColorCode = 0xFFDEB887},
         new Color{ColorName = "CadetBlue", ColorCode = 0xFF5F9EA0},
         new Color{ColorName = "Chartreuse", ColorCode = 0xFF7FFF00},
         new Color{ColorName = "Chocolate", ColorCode = 0xFFD2691E},
         new Color{ColorName = "Coral", ColorCode = 0xFFFF7F50},
         new Color{ColorName = "CornflowerBlue", ColorCode = 0xFF6495ED},
         new Color{ColorName = "Cornsilk", ColorCode = 0xFFFFF8DC},
         new Color{ColorName = "Crimson", ColorCode = 0xFFDC143C},
         new Color{ColorName = "Cyan", ColorCode = 0xFF00FFFF},
         new Color{ColorName = "DarkBlue", ColorCode = 0xFF00008B},
         new Color{ColorName = "DarkCyan", ColorCode = 0xFF008B8B},
         new Color{ColorName = "DarkGoldenrod", ColorCode = 0xFFB8860B},
         new Color{ColorName = "DarkGray", ColorCode = 0xFFA9A9A9},
         new Color{ColorName = "DarkGreen", ColorCode = 0xFF006400},
         new Color{ColorName = "DarkKhaki", ColorCode = 0xFFBDB76B},
         new Color{ColorName = "DarkMagenta", ColorCode = 0xFF8B008B},
         new Color{ColorName = "DarkOliveGreen", ColorCode = 0xFF556B2F},
         new Color{ColorName = "DarkOrange", ColorCode = 0xFFFF8C00},
         new Color{ColorName = "DarkOrchid", ColorCode = 0xFF9932CC},
         new Color{ColorName = "DarkRed", ColorCode = 0xFF8B0000},
         new Color{ColorName = "DarkSalmon", ColorCode = 0xFFE9967A},
         new Color{ColorName = "DarkSeaGreen", ColorCode = 0xFF8FBC8F},
         new Color{ColorName = "DarkSlateBlue", ColorCode = 0xFF483D8B},
         new Color{ColorName = "DarkSlateGray", ColorCode = 0xFF2F4F4F},
         new Color{ColorName = "DarkTurquoise", ColorCode = 0xFF00CED1},
         new Color{ColorName = "DarkViolet", ColorCode = 0xFF9400D3},
         new Color{ColorName = "DeepPink", ColorCode = 0xFFFF1493},
         new Color{ColorName = "DeepSkyBlue", ColorCode = 0xFF00BFFF},
         new Color{ColorName = "DimGray", ColorCode = 0xFF696969},
         new Color{ColorName = "DodgerBlue", ColorCode = 0xFF1E90FF},
         new Color{ColorName = "Firebrick", ColorCode = 0xFFB22222},
         new Color{ColorName = "FloralWhite", ColorCode = 0xFFFFFAF0},
         new Color{ColorName = "ForestGreen", ColorCode = 0xFF228B22},
         new Color{ColorName = "Fuchsia", ColorCode = 0xFFFF00FF},
         new Color{ColorName = "Gainsboro", ColorCode = 0xFFDCDCDC},
         new Color{ColorName = "GhostWhite", ColorCode = 0xFFF8F8FF},
         new Color{ColorName = "Gold", ColorCode = 0xFFFFD700},
         new Color{ColorName = "Goldenrod", ColorCode = 0xFFDAA520},
         new Color{ColorName = "Gray", ColorCode = 0xFF808080},
         new Color{ColorName = "Green", ColorCode = 0xFF008000},
         new Color{ColorName = "GreenYellow", ColorCode = 0xFFADFF2F},
         new Color{ColorName = "Honeydew", ColorCode = 0xFFF0FFF0},
         new Color{ColorName = "HotPink", ColorCode = 0xFFFF69B4},
         new Color{ColorName = "IndianRed", ColorCode = 0xFFCD5C5C},
         new Color{ColorName = "Indigo", ColorCode = 0xFF4B0082},
         new Color{ColorName = "Ivory", ColorCode = 0xFFFFFFF0},
         new Color{ColorName = "Khaki", ColorCode = 0xFFF0E68C},
         new Color{ColorName = "Lavender", ColorCode = 0xFFE6E6FA},
         new Color{ColorName = "LavenderBlush", ColorCode = 0xFFFFF0F5},
         new Color{ColorName = "LawnGreen", ColorCode = 0xFF7CFC00},
         new Color{ColorName = "LemonChiffon", ColorCode = 0xFFFFFACD},
         new Color{ColorName = "LightBlue", ColorCode = 0xFFADD8E6},
         new Color{ColorName = "LightCoral", ColorCode = 0xFFF08080},
         new Color{ColorName = "LightCyan", ColorCode = 0xFFE0FFFF},
         new Color{ColorName = "LightGoldenrodYellow", ColorCode = 0xFFFAFAD2},
         new Color{ColorName = "LightGray", ColorCode = 0xFFD3D3D3},
         new Color{ColorName = "LightGreen", ColorCode = 0xFF90EE90},
         new Color{ColorName = "LightPink", ColorCode = 0xFFFFB6C1},
         new Color{ColorName = "LightSalmon", ColorCode = 0xFFFFA07A},
         new Color{ColorName = "LightSeaGreen", ColorCode = 0xFF20B2AA},
         new Color{ColorName = "LightSkyBlue", ColorCode = 0xFF87CEFA},
         new Color{ColorName = "LightSlateGray", ColorCode = 0xFF778899},
         new Color{ColorName = "LightSteelBlue", ColorCode = 0xFFB0C4DE},
         new Color{ColorName = "LightYellow", ColorCode = 0xFFFFFFE0},
         new Color{ColorName = "Lime", ColorCode = 0xFF00FF00},
         new Color{ColorName = "LimeGreen", ColorCode = 0xFF32CD32},
         new Color{ColorName = "Linen", ColorCode = 0xFFFAF0E6},
         new Color{ColorName = "Magenta", ColorCode = 0xFFFF00FF},
         new Color{ColorName = "Maroon", ColorCode = 0xFF800000},
         new Color{ColorName = "MediumAquamarine", ColorCode = 0xFF66CDAA},
         new Color{ColorName = "MediumBlue", ColorCode = 0xFF0000CD},
         new Color{ColorName = "MediumOrchid", ColorCode = 0xFFBA55D3},
         new Color{ColorName = "MediumPurple", ColorCode = 0xFF9370DB},
         new Color{ColorName = "MediumSeaGreen", ColorCode = 0xFF3CB371},
         new Color{ColorName = "MediumSlateBlue", ColorCode = 0xFF7B68EE},
         new Color{ColorName = "MediumSpringGreen", ColorCode = 0xFF00FA9A},
         new Color{ColorName = "MediumTurquoise", ColorCode = 0xFF48D1CC},
         new Color{ColorName = "MediumVioletRed", ColorCode = 0xFFC71585},
         new Color{ColorName = "MidnightBlue", ColorCode = 0xFF191970},
         new Color{ColorName = "MintCream", ColorCode = 0xFFF5FFFA},
         new Color{ColorName = "MistyRose", ColorCode = 0xFFFFE4E1},
         new Color{ColorName = "Moccasin", ColorCode = 0xFFFFE4B5},
         new Color{ColorName = "NavajoWhite", ColorCode = 0xFFFFDEAD},
         new Color{ColorName = "Navy", ColorCode = 0xFF000080},
         new Color{ColorName = "OldLace", ColorCode = 0xFFFDF5E6},
         new Color{ColorName = "Olive", ColorCode = 0xFF808000},
         new Color{ColorName = "OliveDrab", ColorCode = 0xFF6B8E23},
         new Color{ColorName = "Orange", ColorCode = 0xFFFFA500},
         new Color{ColorName = "OrangeRed", ColorCode = 0xFFFF4500},
         new Color{ColorName = "Orchid", ColorCode = 0xFFDA70D6},
         new Color{ColorName = "PaleGoldenrod", ColorCode = 0xFFEEE8AA},
         new Color{ColorName = "PaleGreen", ColorCode = 0xFF98FB98},
         new Color{ColorName = "PaleTurquoise", ColorCode = 0xFFAFEEEE},
         new Color{ColorName = "PaleVioletRed", ColorCode = 0xFFDB7093},
         new Color{ColorName = "PapayaWhip", ColorCode = 0xFFFFEFD5},
         new Color{ColorName = "PeachPuff", ColorCode = 0xFFFFDAB9},
         new Color{ColorName = "Peru", ColorCode = 0xFFCD853F},
         new Color{ColorName = "Pink", ColorCode = 0xFFFFC0CB},
         new Color{ColorName = "Plum", ColorCode = 0xFFDDA0DD},
         new Color{ColorName = "PowderBlue", ColorCode = 0xFFB0E0E6},
         new Color{ColorName = "Purple", ColorCode = 0xFF800080},
         new Color{ColorName = "Red", ColorCode = 0xFFFF0000},
         new Color{ColorName = "RosyBrown", ColorCode = 0xFFBC8F8F},
         new Color{ColorName = "RoyalBlue", ColorCode = 0xFF4169E1},
         new Color{ColorName = "SaddleBrown", ColorCode = 0xFF8B4513},
         new Color{ColorName = "Salmon", ColorCode = 0xFFFA8072},
         new Color{ColorName = "SandyBrown", ColorCode = 0xFFF4A460},
         new Color{ColorName = "SeaGreen", ColorCode = 0xFF2E8B57},
         new Color{ColorName = "SeaShell", ColorCode = 0xFFFFF5EE},
         new Color{ColorName = "Sienna", ColorCode = 0xFFA0522D},
         new Color{ColorName = "Silver", ColorCode = 0xFFC0C0C0},
         new Color{ColorName = "SkyBlue", ColorCode = 0xFF87CEEB},
         new Color{ColorName = "SlateBlue", ColorCode = 0xFF6A5ACD},
         new Color{ColorName = "SlateGray", ColorCode = 0xFF708090},
         new Color{ColorName = "Snow", ColorCode = 0xFFFFFAFA},
         new Color{ColorName = "SpringGreen", ColorCode = 0xFF00FF7F},
         new Color{ColorName = "SteelBlue", ColorCode = 0xFF4682B4},
         new Color{ColorName = "Tan", ColorCode = 0xFFD2B48C},
         new Color{ColorName = "Teal", ColorCode = 0xFF008080},
         new Color{ColorName = "Thistle", ColorCode = 0xFFD8BFD8},
         new Color{ColorName = "Tomato", ColorCode = 0xFFFF6347},
         new Color{ColorName = "Transparent", ColorCode = 0x00FFFFFF},
         new Color{ColorName = "Turquoise", ColorCode = 0xFF40E0D0},
         new Color{ColorName = "Violet", ColorCode = 0xFFEE82EE},
         new Color{ColorName = "Wheat", ColorCode = 0xFFF5DEB3},
         new Color{ColorName = "White", ColorCode = 0xFFFFFFFF},
         new Color{ColorName = "WhiteSmoke", ColorCode = 0xFFF5F5F5},
         new Color{ColorName = "Yellow", ColorCode = 0xFFFFFF00},
         new Color{ColorName = "YellowGreen", ColorCode = 0xFF9ACD32}
       };
 }
  public List<Color> PredefinedColors { get; set; }
}

This gave me a list of all predefined colors. Here is a partial screenshot.

I thought it would be nice if I could filter colors by name. Surely this will make my life easy. So I added few controls for filtering and refactored my C# code.

<StackPanel Orientation="Horizontal" Margin="7">
  <TextBlock
    Margin="7"
    VerticalAlignment="Center"
    Text="Color Name" />
  <TextBox x:Name="txtColorName"
    Margin="7"
    Width="200"
    TextChanged="txtColorName_TextChanged" />
</StackPanel>

<TextBlock x:Name="txtCount"
    Margin="7" />

And here is my refactored C# code.

private AllColorsHelper helper = new AllColorsHelper();

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
  DisplayColors(helper.PredefinedColors);
}

private void txtColorName_TextChanged(object sender, TextChangedEventArgs e)
{
  string filterCriteria = txtColorName.Text.Trim().ToLower();

  if (!string.IsNullOrEmpty(filterCriteria))
  {
    var query = from c in helper.PredefinedColors
       where c.ColorName.ToLower().StartsWith(filterCriteria)
       select c;
    DisplayColors(query);
  }
  else
    DisplayColors(helper.PredefinedColors);
}

private void DisplayColors(IEnumerable<Color> colorCollection)
{
  lstColors.ItemsSource = colorCollection;

  txtCount.Text =
    string.Format("Now displaying {0} colors", colorCollection.Count());
}

I now had filtering available in my application

Thus the features set of my application was implemented. But there was something missing. It did not look very Silverlight / XAMAL-ish. And that ground was easily covered by applying styles. Here is my final XAML.

<UserControl x:Class="AllColors.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
  <!--Start Main Container-->
  <StackPanel x:Name="LayoutRoot" Background="White">
    <!--Start Resources-->
    <StackPanel.Resources>
      <Style x:Key="TextBlockStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Verdana" />
        <Setter Property="FontSize" Value="18" />
      </Style>

      <DataTemplate x:Key="ColorsTemplate">
        <StackPanel Margin="10" Orientation="Horizontal">
          <TextBlock
            Style="{StaticResource TextBlockStyle}"
            Margin="5"
            Width="200"
            VerticalAlignment="Center"
            Text="{Binding Path=ColorName}" />
            <Rectangle
              Margin="5"
              Width="300"
              VerticalAlignment="Center"
              HorizontalAlignment="Center"
              Height="50"
              Fill="{Binding Path=ColorName}" />
        </StackPanel>
      </DataTemplate>
    </StackPanel.Resources>
    <!--End Resources-->

    <!--Start Filter Area-->
    <StackPanel Orientation="Horizontal" Margin="7">
      <StackPanel.Background>
        <LinearGradientBrush>
          <GradientStop Color="LightSkyBlue" Offset="0.1" />
          <GradientStop Color="LightBlue" Offset="0.5" />
        </LinearGradientBrush>
      </StackPanel.Background>
      <TextBlock
        Style="{StaticResource TextBlockStyle}"
        Margin="7"
        VerticalAlignment="Center"
        Text="Color Name" />
      <TextBox x:Name="txtColorName"
        Margin="7"
        Width="200"
        TextChanged="txtColorName_TextChanged" />
    </StackPanel>
    <!--End Filter Area-->

    <!--Start Results Area-->
    <Border
      Margin="5"
      CornerRadius="20"
      Background="LightGray"
      BorderThickness="2" >
      <StackPanel>
        <TextBlock x:Name="txtCount"
          Style="{StaticResource TextBlockStyle}"
          Margin="20,10,0,0" />
        <ListBox x:Name="lstColors"
          Margin="20"
          Height="400"
          ItemTemplate="{StaticResource ColorsTemplate}"
          ScrollViewer.VerticalScrollBarVisibility="Visible" />
      </StackPanel>
    </Border>
    <!--End Results Area-->

  </StackPanel>
  <!--End Main Container-->
</UserControl>

And once again a screenshot of the finished product.

So writing a Siverlight application which displays all predefined colors was not hard at all, and I used Silverlight features like Styles, DataTemplate, Resources and Data Binding. So now that I can quickly see what those colors look like, I’m off to learn how to match them properly.