how to set image background in wpf

Question

I am trying to set inactive buttons to have semi-transparent (i.e. 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?

I can't see the light yellow in your screenshot (maybe because its very small). Sure you don't have f.lux on? I thought something was yellow once but it was because of f.lux -___- — EpicKip
Possibly (I don't think so), but my issue is with the "background" (wherever it comes from) being different than the button (or panel) the image is on. Specifically, you can see that it is a much brighter (closer to white) color. — Vladimirs Kacs
Honestly I'm not quite sure what to compare to what in the image, sorry — EpicKip
Ah that's what you mean! Now I understand thank you :) maybe I can find the issue — EpicKip

Mike Strobel Mike Strobel · Accepted Answer · 2018-01-23T14:09:15

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.

how to set image background in wpf

1 Answers