Toolbar button inactive image

Question

Hi,

I've placed som png file images as button content of buttons in a toolbar. The buttons are assigned commands, and when the CanExecute of the command is false, the button goes inactive. If text is shown as button content, the text will be ghosted. However, the images stay unchanged. Maybe I just expected WPF to gray the images for me or something, but that isn't happening of cause. So the question is : Can I assign an alternate inactive version of the png. If yes, what is the most used technique, triggers?. Know of any good tools to gray up an image?

---

Best regards Jesper Odgaard Nielsen

Answer 1

Hello,

The best way to accomplish this is to use a bitmap effect to gray the images. This avoids to add new graysacale images for each button image.

The effect can be appplied by a trigger when button gets disabled.

           <DataTemplate>
                <Button x:Name="btn" Width="32" Height="32" IsEnabled="True">
                    <Image x:Name="img" Source="..."></Image>
                </Button>
                <DataTemplate.Triggers>
                    <Trigger SourceName="btn" Property="IsEnabled"  Value="False">
                        <Setter TargetName="img" Property="Effect">
                             <Setter.Value>
                                    <effect:GrayscaleEffect x:Name="grayscaleEffect"/>
                             <Setter.Value>
                        </Setter>
                    </Trigger>
                </DataTemplate.Triggers>
          </DataTemplate>

If you want information about grayscale effect see:

http://bursjootech.blogspot.com/2008/06/grayscale-effect-pixel-shader-effect-in.html



Good Luck.

Answer 2

Jesper,

I noticed you mentioned that your buttons are located in a toolbar, but the previous post by Homero illustrates buttons, which go with each item of the collection. I thought I'd post something much closer to what you want, and if it works for you, please mark it as the answer.

So, in your control or a window you need to add the following Style to the control/window Resources section (or the Resources section of any subelement that includes your toolbar):

<Style TargetType="{x:Type Image}" x:Key="toolbarImageStyle">
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}, AncestorLevel=1}, Path=IsEnabled}" Value="False">
            <Setter Property="Opacity" Value="0.30"></Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>

 And then you assign this style to each image on your toolbar like this:

<Button Name="btnNewFolder" Command="local:Commands.NewFolder" CommandParameter="Folder">
    <Image Name="imgNewFolder" Style="{StaticResource toolbarImageStyle}"></Image>
</Button>

These are code snippets I wrote a while ago for my project, not something that I just typed in, so they proved to be working fine. I hope it helps.

Answer 3

Thanks, very nice solution!

---

Best regards Jesper Odgaard Nielsen