Click here to Skip to main content
12,814,411 members (34,259 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked
Posted 25 Aug 2010

Make your WPF buttons color hot-track!

, 25 Aug 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 it's 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 a 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

GeneralSample Pin
pawaw30-Aug-10 4:42
memberpawaw30-Aug-10 4:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170308.1 | Last Updated 25 Aug 2010
Article Copyright 2010 by rudigrobler
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid