Click here to Skip to main content
12,955,170 members (59,381 online)
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 1 Apr 2010

Make your WPF buttons color hot-track!

, 1 Apr 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
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 back, 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();

            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}">
    <!--<span class="code-comment"> Removed for brevity --></span>

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' />        

Here is the end result…


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

South Africa South Africa
No Biography provided

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170525.1 | Last Updated 1 Apr 2010
Article Copyright 2010 by rudigrobler
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid