如何在WPF中设置图像背景

Question

I am trying to set inactive buttons to have semi-transparent (ie greyed out) images. Yet for some reason the images become white/ yellow (as if on a bright background):

As you can see it's light yellow

Possibly better annotated screenshot

Here are the XAML Styles:

 <Style x:Key="ToolButton" TargetType="{x:Type Button}" BasedOn="{x:Null}">
    <Setter Property="Background" Value="#888"/>
    <Setter Property="Padding" Value="10,2"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Style.Resources>
        <Style TargetType="Image">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Opacity" Value="0.5"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Style.Resources>
</Style>

<Style x:Key="ToolPanel" TargetType="{x:Type StackPanel}">
    <Setter Property="Background" Value="#111"/>
    <Style.Resources>
        <Style TargetType="{x:Type Button}" BasedOn="{StaticResource ResourceKey=ToolButton}"/>
    </Style.Resources>
</Style>

(StackPanel and buttons are dark for contrast, they are actually mean to be light grey)

What should I do to get the greyed out effect I want?

Answer 1

The problem is the default Button template: it changes its background based on the control's state, and that new background takes precedence over the one you're setting in your style.

In this case, the brush for the 'Disabled' state is something like #F4F4F4 , or a very light gray.

The fix would be to declare a new Button template. For example:

<ControlTemplate TargetType="Button">
  <!--Optional: Add border brush/thickness if you want a border-->
  <Border x:Name="border" Background="{TemplateBinding Background}">
    <ContentPresenter x:Name="contentSite" Margin="{TemplateBinding Padding}" />
  </Border>
  <ControlTemplate.Triggers>
    <Trigger Property="IsEnabled" Value="False">
      <!--Optional: Remove background when disabled-->
      <!--Setter TargetName="border" Property="Background" Value="Transparent" /-->
      <Setter TargetName="contentSite" Property="Opacity" Value="0.5" />
    </Trigger>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter TargetName="border" Property="Background" Value="#AAA" />
    </Trigger>
    <Trigger Property="IsPressed" Value="True">
      <Setter TargetName="border" Property="Background" Value="#333" />
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

Note that with this version, you do not need the Image style to change the Opacity ; it's taken care of in the Button template.