Simple WPF ColorPicker ComboBox

I needed a ColorPicker that could be embedded in a DataGrid, simple to operate and could save the color name in the database. A ComboBox seemed the obvious choice.
A simple list of colors is reasonably straightforward using a little Reflection:

      public List<string> SimpleColorList
      {
         get
         {
            List<string> colorList = new List<string>();
            foreach (PropertyInfo pi in typeof(Colors).GetProperties())
            {
               colorList.Add(pi.Name);
            }
            return colorList;
         }
      }

And bound it to a ComboBox. Using Mode=OneTime means the ColorList is only built once.

<ComboBox ItemsSource="{Binding Path=SimpleColorList, Mode=OneTime}"
            SelectedValue="{Binding SelectedColor}"
            Width="200" />

Adding a ItemTemplate to the ComboBox makes it a little more interesting:

<ComboBox ItemsSource="{Binding Path=SimpleColorList, Mode=OneTime}"
            SelectedValue="{Binding SelectedColor}"
            Width="200">
   <ComboBox.ItemTemplate>
      <DataTemplate>
         <StackPanel Orientation="Horizontal">
            <TextBlock Width="130"
                        Text="{Binding}" />
            <Border BorderBrush="Black"
                     BorderThickness="1"
                     CornerRadius="4"
                     Margin="0,1,0,1"
                     Background="{Binding}"
                     Width="40"
                     Height="18">
            </Border>
         </StackPanel>
      </DataTemplate>
   </ComboBox.ItemTemplate>
</ComboBox>

The straight alphabetic sorted list is fine but I wanted to sort by "color", in general terms from lighter to darker. I found some code on the web that would convert the RGB into the HSL color space. (I'm afraid I can't find the code again so my apologies to its author for the lack of attribution).

   public static class HslValueConverter
   {
      /// <summary>
      /// Converts a WPF RGB color to an HSL color
      /// </summary>
      /// <param name="rgbColor">The RGB color to convert.</param>
      /// <returns>An HSL color object equivalent to the RGB color object passed in.</returns>
      public static HslColor RgbToHsl(string name, Color rgbColor)
      {
         // Initialize result
         var hslColor = new HslColor();
         hslColor.Name = name;

         // Convert RGB values to percentages
         double r = (double)rgbColor.R / 255;
         var g = (double)rgbColor.G / 255;
         var b = (double)rgbColor.B / 255;
         var a = (double)rgbColor.A / 255;

         // Find min and max RGB values
         var min = Math.Min(r, Math.Min(g, b));
         var max = Math.Max(r, Math.Max(g, b));
         var delta = max - min;

         /* If max and min are equal, that means we are dealing with 
          * a shade of gray. So we set H and S to zero, and L to either
          * max or min (it doesn't matter which), and  then we exit. */

         //Special case: Gray
         if (max == min)
         {
            hslColor.Hue = 0;
            hslColor.Saturation = 0;
            hslColor.Lightness = max;
            return hslColor;
         }

         /* If we get to this point, we know we don't have a shade of gray. */

         // Set L
         hslColor.Lightness = (min   max) / 2;

         // Set S
         if (hslColor.Lightness < 0.5)
         {
            hslColor.Saturation = delta / (max   min);
         }
         else
         {
            hslColor.Saturation = delta / (2.0 - max - min);
         }

         // Set H
         if (r == max) hslColor.Hue = (g - b) / delta;
         if (g == max) hslColor.Hue = 2.0   (b - r) / delta;
         if (b == max) hslColor.Hue = 4.0   (r - g) / delta;
         hslColor.Hue *= 60;
         if (hslColor.Hue < 0) hslColor.Hue  = 360;

         // Set A
         hslColor.Alpha = a;

         // Set return value
         return hslColor;

      }
   }
   public struct HslColor
   {
      public string Name { get; set; }
      public double Alpha;
      public double Hue;
      public double Lightness;
      public double Saturation;
   }

Then I changed the property (Note: the property name has changed to SortedColorList, so the ComboBox Binding will have to be altered) "getter" to sort by Saturation, Hue and Lightness. I also decided to exclude the Transparent color.

      public List<string> SortedColourList
      {
         get
         {
            List<HslColor> colorList = new List<HslColor>();
            foreach (PropertyInfo pi in typeof(Colors).GetProperties())
            {
               Color color = (Color)pi.GetValue(null, null);
               // Only select non-Transparent colors
               if (color.A != 0) colorList.Add(HslValueConverter.RgbToHsl(pi.Name, color));
            }
            return colorList.OrderBy(c => c.Saturation)
                         .OrderBy(c => c.Hue)
                         .OrderByDescending(c => c.Lightness)
                         .Select(c => c.Name).ToList<string>();
         }
      }

The SimpleColorPicker project is available on GoogleCode.

DataType instead of DataTemplateSelector

Nearly three years ago I posted about the use of the DataTemplateSelector.
It transpires that because I was using different types of objects in my ItemsSource I could have used the DataType attribute of the DataTemplate.
Define the DataTemplates in the usual way but add the DataType attribute.

      <DataTemplate DataType="{x:Type dts:BookingLineItem}">
      <DataTemplate DataType="{x:Type dts:CCardPaymentLineItem}">
      <DataTemplate DataType="{x:Type dts:CashPaymentLineItem}">
      <DataTemplate DataType="{x:Type dts:LineItem}">

There is no need to define the DataTemplateSelector in the resources, no C# class to write and the ListBox becomes simpler:

      <ListBox Name="theSecondTillRoll"
               Height="150"
               Width="330"
               ItemsSource="{Binding SaleItems}" />

The DataTemplateSelector project is on GoogleCode and demonstrates both techniques.

Firing up the default Browser

This simple snippet shows how to display a URL in a WPF window and fire up the default browser when the link is clicked.
Starting with a TextBlock in the XAML:

      <TextBlock>
         <Hyperlink Click="Hyperlink_Click"
                    NavigateUri="http://mikestedman.blogspot.com/2012/03/wpf-string-formatting.html">Link to original WPF Waltz blog entry</Hyperlink>
      </TextBlock>

And a simple event handler in the code-behind:

      private void Hyperlink_Click(object sender, RoutedEventArgs e)
      {
         Process.Start((sender as Hyperlink).NavigateUri.ToString());
      }

WPF String Formatting

There are a number of ways to use formatted strings and we seem to use nearly all of them in our application. Because the format of the formatting string varies slightly I thought I'd document the different techniques.
Firstly we need some simple properties for the XAML Bindings. Notice that the ToString version needs neither the index (0:) or the curly braces.

public partial class MainWindow : Window
{
   public String FormattedDate
   {
      get { return String.Format("{0:dd MMM yyy}", DateTime.Now); }
   }
   public String DateToString
   {
      get { return DateTime.Now.ToString("dd MMM yyy"); }
   }
   public DateTime RawDateTime
   {
      get { return DateTime.Now; }
   }
   public MainWindow()
   {
      InitializeComponent();
      DataContext = this;
   }
}

The first two TextBlocks bind directly to the pre-formatted properties.

      <TextBlock Text="{Binding FormattedDate}" />
      <TextBlock Text="{Binding DateToString}" />

Or we can bind to the raw data and use StringFormat. We can escape the curly braces in a couple of ways.

      <TextBlock Text="{Binding Path=RawDateTime, StringFormat=\{0:dd MMM yyyy\}}" />
      <TextBlock Text="{Binding Path=RawDateTime, StringFormat={}{0:dd MMM yyyy}}" />

The leading curly braces in the second version can be replaced by constant text that is rendered as part of the formatted string. But it seems a bit "sensitive" so I don't use it.

      <TextBlock Text="{Binding Path=RawDateTime, StringFormat=Today is {0:dd MMM yyyy}}" />

Next up is a Converter for which we need an IValueConverter class:

class DateConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
      if (value is DateTime)
      {
         return ((DateTime)value).ToString("dd MMM yyy");
      }
      return value;
   }

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
      throw new NotImplementedException();
   }
}

And the corresponding XAML to use the Converter:

        xmlns:local="clr-namespace:WpfWaltz"
...
   <Window.Resources>
      <local:DateConverter x:Key="dateConverter"; />
   </Window.Resources>
...
      <TextBlock Text="{Binding Path=RawDateTime, Converter={StaticResource dateConverter}}" />

Finally, I had assumed that the indexer in the StringFormat was just a necessary evil since it was always 0: and hadn't considered using StringFormat with a MultiBinding like this:

      <TextBlock>
         <TextBlock.Text>
            <MultiBinding StringFormat="{}{0:dd MMM yyyy} {1:hh:mm:ss}">
               <Binding Path="RawDateTime" /> 
               <Binding Path="RawDateTime" />
            </MultiBinding>
         </TextBlock.Text>
      </TextBlock>

The StringFormatting project that has all the code can be downloaded from GoogleCode.