Button using ICommand does not get disabled?

Question

I have a button control in my wpf-mvvm application.

I use an ICommand property (defined in viewmodel) to bind the button click event to viewmodel.

I have -> execute and canexecute parameters for my ICommand implementation (RelayCommand).

Even if CanExecute is false...button is not disabled...WHEN button CONTENT is IMAGE

But, when button content is text..enable/disable works fine.

<Button DockPanel.Dock="Top" 
                        Command="{Binding Path=MoveUpCommand}">
                    <Button.Content>
                        <Image Source="/Resources/MoveUpArrow.png"></Image>
                    </Button.Content>
                    <Style>
                        <Style.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" Value=".5" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Button>

Answer 1

Button does get disabled, its just that it doesn't affect rendering of the image. You will have to write a trigger in the style which changes the opacity of the image to .5 and you'll get the desired effect of button disabled like so:

<Style x:Key="imageButton" TargetType="Button">
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Opacity" Value=".5" />
            </Trigger>
        </Style.Triggers>
</Style>

Answer 2

Thanks! Tried the suggested code after all my buttons. Didn't work. Tried to extract just the trigger and insert it in a generic button that all other buttons inherited from: worked like a charm! This code first:

<Style x:Key="SecButton" TargetType="Button">
    <Setter Property="FontSize" Value="16" />
    <Setter Property="Margin" Value="0,0,5,5" />
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Opacity" Value=".5" />
        </Trigger>
    </Style.Triggers>
</Style>

Based on the code above I created buttons like this:

<Style x:Key="NewBtnStyle" TargetType="Button" BasedOn="{StaticResource SecButton}">                
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/new.png" Width="50" Height="50" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

When buttons where disabled the images in them is automatically dimmed to 0.5 opacity.

Answer 3

You will need pixel shader effect (it is not as complicated as it sounds, it's just about adding an assembly reference an then you can use it as easily as any in-built WPF effect) in conjunction with trigger similar to the one Hasan Khan posted to show the disabled button images in grayscale.