Click here to Skip to main content
13,199,026 members (44,809 online)
Click here to Skip to main content
Add your own
alternative version


20 bookmarked
Posted 18 Dec 2007

Grayscale Button Image when Disabled

, 18 Dec 2007
Rate this:
Please Sign up or sign in to vote.
Grayscale button image when disabled


I've been working with WPF for a couple weeks now and it can get pretty frustrating having to figure out how to mimic Windows controls with XAML. I am building a Menu inside my application and I found that when my Button isn't enabled, the images inside the Button are not automatically converted to grayscale. Not what your typical Windows Forms developer would expect. So here is what I discovered.

Using the Code

<Window x:Class="KLCardinal.Window1" x:Name="thisForm"




    Title="Window1" Height="300" Width="300">
        <local:GrayScaleConverter x:Key="grayConv" />
        <Button Template="{DynamicResource buttonTemplate}" 

            IsEnabled="False" Margin="63,111,34,111">
                <ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
                    <StackPanel x:Name="stPanel" HorizontalAlignment="Left" 

                    Width="Auto" Height="Auto" 

                        <Image x:Name="img" Width="30" Height="30" Stretch="Fill"/>
                        <TextBlock FontSize="14" Margin="5,0,0,0" 

                    VerticalAlignment="Center" Text="My Button" 

                        <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="img" Property="Source" 

                                    Value="{Binding ElementName=thisForm, 
                                    Converter={StaticResource grayConv}}" />
                                <Setter TargetName="stPanel" Property="BitmapEffect">
                                        <BlurBitmapEffect Radius="1" />
                        <Trigger Property="IsEnabled" Value="True">
                                <Setter TargetName="img" Property="Source" 

                                    Value="{Binding ElementName=thisForm, 
                                    Path=MyButtonImage}" />
                                <Setter TargetName="stPanel" Property="BitmapEffect" 

                                    Value="{x:Null}" />

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace KLCardinal
    /// <span class="code-SummaryComment"><summary></span>
    /// Interaction logic for Window1.xaml
    /// <span class="code-SummaryComment"></summary></span>
    public partial class Window1 : Window
        public static readonly DependencyProperty MyButtonImageProperty =
            DependencyProperty.Register("MyButtonImage", typeof(ImageSource), 
                typeof(Window1), new UIPropertyMetadata(null));
        public ImageSource MyButtonImage
            get { return (ImageSource)GetValue(MyButtonImageProperty); }
            set { SetValue(MyButtonImageProperty, value); }
        public Window1()
                MyButtonImage = new ImageSourceConverter().ConvertFrom
                    (@"C:\Users\Public\Pictures\Sample Pictures\creek.jpg") 
                    as BitmapSource;
            catch { }

Now, we want to create our Converter that will Convert a BitmapSource with a Pixel Format of Brga32 (PNG) or Brg32 (JPG) to a Grayscale Brga32/Brg32 BitmapSource.

public class GrayScaleConverter : IValueConverter
        public object Convert(object value, Type targetType, 
            object parameter, System.Globalization.CultureInfo culture)
            if(value is BitmapSource)
                BitmapSource orgBmp = (BitmapSource)value;
                if (orgBmp.Format == PixelFormats.Bgra32)
                    byte[] orgPixels = new byte[orgBmp.PixelHeight * 
                        orgBmp.PixelWidth * 4];
                    byte[] newPixels = new byte[orgPixels.Length];
                    orgBmp.CopyPixels(orgPixels, orgBmp.PixelWidth * 4, 0);
                    for (int i = 3; i < orgPixels.Length; i += 4)
                        int grayVal = ((int)orgPixels[i - 3] + 
                        (int)orgPixels[i - 2] + (int)orgPixels[i - 1]);
                        if (grayVal != 0)
                            grayVal = grayVal / 3;
                        newPixels[i] = orgPixels[i]; //Set AlphaChannel
                        newPixels[i - 3] = (byte)grayVal;
                        newPixels[i - 2] = (byte)grayVal;
                        newPixels[i - 1] = (byte)grayVal;
                    return BitmapSource.Create(orgBmp.PixelWidth, orgBmp.PixelHeight, 
                        96, 96, PixelFormats.Bgra32, null, newPixels, 
                        orgBmp.PixelWidth * 4);
            return value;
        public object ConvertBack(object value, Type targetType, object parameter, 
            System.Globalization.CultureInfo culture)
            throw new NotImplementedException();


  • 18th December, 2007: Initial post


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


About the Author

Software Developer (Senior)
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

Generala better method Pin
CannibalSmith29-Jan-09 2:00
memberCannibalSmith29-Jan-09 2:00 
Generalnot so fast method Pin
arkhivania8-Jan-08 6:36
memberarkhivania8-Jan-08 6:36 

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
Web03 | 2.8.171020.1 | Last Updated 18 Dec 2007
Article Copyright 2007 by Sully1022
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid