WPF Image Buttons

For my Resizer application I wanted a toolbar with image buttons, everything was perfect until I tried to disable the buttons. The first idea was to add a greyscale effect to the button if it was disabled. For a complete black/white icon this didn’t help either but changing the opacity does.

*Save/Clear disabled because there are no images *

All buttons enabled

MouseOver Save button

<Style TargetType="Button">
        <Setter Property="Template">
                <ControlTemplate TargetType="Button">
                    <Grid Margin="1">
                        <Rectangle x:Name="OuterBorder" RadiusY="2" RadiusX="2" Visibility="Collapsed"/>
                        <Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" Margin="1" RadiusY="1" RadiusX="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1" Visibility="Collapsed"/>
                        <Rectangle x:Name="InnerBorder" Margin="2" Visibility="Collapsed"/>
                        <ContentPresenter Margin="5" VerticalAlignment="Center" />
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Visibility" TargetName="OuterBorder" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="Bg" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="InnerBorder" Value="Visible"/>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Effect">
                                    <effects:GreyscaleEffect />
                            <Setter Property="Opacity" Value=".5" />

And the following .fx code is used for the greyscale effect.

sampler2D  ImageSampler : register(S0);  //take ImageSampler from S0 register. 

// 'uv' vector from TEXCOORD0 semantics is our texture coordinate, two floating point numbers in the range 0-1.
float4 PS( float2 uv : TEXCOORD) : COLOR
    float4 color = tex2D( ImageSampler, uv); // get the color of texture at the current point
    color.rgb = dot(color.rgb, float3(0.3, 0.59, 0.11)); //compose correct luminance value
    return color;

Browse the latest source

Written and tagged in Resizer WPF Edit