Changing Button image when IsEnabled

Paweł Smejda picture Paweł Smejda · Oct 17, 2011 · Viewed 8.5k times · Source

I want to change button image when button IsEnabled == False.

Below is my example, bindings are fine, when I change them for False/True it is still not working.

<Button x:Name="btnBackward" Grid.Column="0" Grid.Row="2" Command="{Binding UserWorkflowManager.NavigateBackward}" IsEnabled="{Binding UserWorkflowManager.NavigateBackwardEnable}" Grid.RowSpan="2">
    <Button.Template>
        <ControlTemplate>
            <Image Name="_image" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform">
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Source" Value="/UserWorkflow.View;component/Images/LDC500_butX_PreviousPane_norm.bmp" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ElementName=btnBackward, Path=IsEnabled}" Value="False">
                                    <Setter Property="Source" Value="/UserWorkflow.View;component/Images/LDC500_butX_PreviousPane_dis.bmp"/>
                                </DataTrigger>
                            </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        </ControlTemplate>
    </Button.Template>
</Button>

Answer

Muhammad Hasan Khan picture Muhammad Hasan Khan · Oct 17, 2011

Try the following

<Style.Triggers>
    <DataTrigger Binding="{Binding IsEnabled,RelativeSource={RelativeSource AncestorType=Button}}" Value="False">
        <Setter Property="Source" Value="/UserWorkflow.View;component/Images/LDC500_butX_PreviousPane_dis.bmp"/>
    </DataTrigger>
</Style.Triggers>

Or add the trigger directly in the control template like so

            <ControlTemplate>
                <Image Name="_image" HorizontalAlignment="Center">
                 ..........
                </Image>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="_image" Property="Source" Value="/UserWorkflow.View;component/Images/LDC500_butX_PreviousPane_dis.bmp" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>