Make Your WPF Buttons Color Hot-track!

One of the cool new features of the Windows 7 taskbar is that all running applications give you this nice feedback that they are running using the color hot-track “feature”.

“Color hot-track is a small touch that typifies the new taskbar’s personality. When a person moves her mouse over a running program on the taskbar, she will be pleasantly surprised to find that a light source tracks her mouse and the color of the light is actually based on the icon itself. We calculate the most dominant RGB of the icon and dynamically paint the button with this color. Color hot-track provides a delight factor, it offers feedback that a program is running and it showcases a program’s icon. We've always believed that programs light up the Windows platform and now, we're returning the favor.”

Engineering Windows 7 - The Windows 7 Taskbar

A while ago, I read an article from Grant Hinkson called “McGuffin”-Enabling Image Converter!

“This converter is bound to an Image’s Source property and then returns an “averaged” Color”

I “borrowed” his idea and created my own value converter that takes an icon (BitmapFrame), calculates the average color and then creates a linear gradient brush using this color!

public class IconToAvgColorBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, 
		object parameter, CultureInfo culture)
    {
        if (value == null)
        {
            return new SolidColorBrush(Colors.Transparent);
        }

        MemoryStream stream = new MemoryStream();
        if (value is BitmapFrame)
        {
            BitmapFrame frame = (BitmapFrame)value;
            System.Windows.Media.Imaging.BmpBitmapEncoder e = new BmpBitmapEncoder();
            e.Frames.Add(frame);
            e.Save(stream);
        }

        try
        {
            Bitmap bitmap = new Bitmap(stream);

            int tr = 0;
            int tg = 0;
            int tb = 0;

            for (int x = 0; x < bitmap.Width; x++)
            {
                for (int y = 0; y < bitmap.Height; y++)
                {
                    System.Drawing.Color pixel = bitmap.GetPixel(x, y);
                    tr += pixel.R;
                    tg += pixel.G;
                    tb += pixel.B;
                }
            }

            byte r = (byte)Math.Floor((double)(tr / (bitmap.Height * bitmap.Width)));
            byte g = (byte)Math.Floor((double)(tg / (bitmap.Height * bitmap.Width)));
            byte b = (byte)Math.Floor((double)(tb / (bitmap.Height * bitmap.Width)));

            LinearGradientBrush brush = new LinearGradientBrush();
            brush.EndPoint = new System.Windows.Point(0.5, 1.0);
            brush.StartPoint = new System.Windows.Point(0.5, 0.0);
            brush.GradientStops.Add(new GradientStop
		(System.Windows.Media.Color.FromArgb(0xFF, r, g, b), 0.00));
            brush.GradientStops.Add(new GradientStop
		(System.Windows.Media.Color.FromArgb(0x00, r, g, b), 1.00));
            return brush;
        }
        catch (Exception)
        {
            return new SolidColorBrush(Colors.Transparent);
        }
    }

    public object ConvertBack(object value, Type targetType, 
			object parameter, CultureInfo culture)
    {
        throw new Exception("The method or operation is not implemented.");
    }
}

[DISCLAIMER] This code still needs some error checking…

The next part could be re-factored into a control but I just wanted to show the basics! I create a style that changes the background color from transparent to the average color using triggers!

<local:IconToAvgColorBrushConverter x:Key="iconToAvgColorBrushConverter"/>

<Style x:Key="ColorHotTrackButton" TargetType="{x:Type Button}" BasedOn="{x:Null}">
    <!-- Removed for brevity -->
</Style>

And to use it is very simple!

<Button Margin="2.5,0,2.5,0" Style='{DynamicResource ColorHotTrackButton}' 

	Background={Binding Path=Source, 

	Converter={StaticResource iconToAvgColorBrushConverter}, 

	ElementName=explorerIcon, Mode=Default}'>
    <Image Source='Assets/IE.ico' Width='32' Height='32' Margin='12.5,0,12.5,0' 

	x:Name='ieIcon' />        
</Button>

Here is the end result…

CodeProject