Setting Button background Image wpf

Question

I want to design a button with 2 background images(first one when enabled , second when disabled). As shown below. How do i do it in button style ?

tried something like this . But Content is not a property here.

   <Style TargetType="{x:Type Button}"  x:Key="LinkButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Overlay" CornerRadius="2">
                        <ContentPresenter/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="True">
                           <!--<Setter TargetName="Overlay" Property="Content" Value="Red"/>-->
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

enter image description here

http://stackoverflow.com/questions/15892290/how-to-change-set-button-background-image-in-c-sharp-wpf-code — Nagaraj S, Feb 21 '14 at 06:06

score 0 · Answer 1 · answered Feb 21 '14 at 06:14

if you want to do it in xaml then have two images inside the button using a canvas. Using edit style for trigger change the visibility of the images you need inside the button.

i think you can get the point. Mark useful if it is really useful thank you

Deffiss · Answer 2 · 2014-02-21T08:49:07.987

You may do it with help of Style and Converter like this:

Opacity converter:

using System;
using System.Globalization;
using System.Windows.Data;

namespace EnableButton
{
    public class OpacityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool) value ? 1 : 0.5;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Your Xaml:

<Window x:Class="EnableButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:EnableButton"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:OpacityConverter x:Key="OpacityConverter"/>
        <Style x:Key="DisableIcon" TargetType="Image">
            <Setter Property="Opacity" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsEnabled, Converter={StaticResource OpacityConverter}}"/>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Height="24" IsEnabled="False">
            <Image Style="{StaticResource DisableIcon}" Source="Open_22.png"/>
        </Button>
    </StackPanel>
</Window>

Now if you change IsEnable property of the button you will see the result. I change Opacity property of the Image from 100% to 50% when the parent button becomes disabled in OpacityConverter so you may fix this if you want another digits.

Update

I thought a little about your question. I think if the button becomes disabled it would be nice not only to change the Opacity of the image but also to convert an images picture into monochromic. So I found this solution (add reference to Microsoft.Expression.Effects.dll and add xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" into the form before trying):

<Window x:Class="EnableButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:EnableButton"

        xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"

        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>

        <Style x:Key="DisableImageStyle" TargetType="Image">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsEnabled}" Value="False">
                    <Setter Property="Opacity" Value="0.4"/>
                    <Setter Property="Effect">
                        <Setter.Value>
                            <ee:EmbossedEffect/>
                            <!--This effect is also looks nice-->
                            <!--<ee:MonochromeEffect/>-->
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>
    <StackPanel>

        <Button Height="40" IsEnabled="False">
            <Image Style="{StaticResource DisableImageStyle}" Source="Open_22.png"/>
        </Button>

    </StackPanel>
</Window>

Notice that I don't use any converters now!

Can i store this style as resource dictionary so thati can use it across buttons. — user1687824, Feb 21 '14 at 06:54
If you mean creating a resource dictionary file and merging it in App.xaml than yes sure :) — Deffiss, Feb 21 '14 at 06:57
@user1687824 I updated my answer a little. See **Update** section — Deffiss, Feb 21 '14 at 08:29
@user1687824 This library ships with Blend and have both 4.0 and 4.5 versions. Make sure that you have Microsoft Blend installed. — Deffiss, Feb 21 '14 at 08:50

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

You can use DataTrigger for change background image of button. below is the link may help.

WPF Change button background image when clicked

edited May 23 '17 at 12:03

Community

1
1

answered Feb 21 '14 at 06:53

J R B

2,069
4
17
32

score 0 · Answer 4 · answered Feb 21 '14 at 23:01

I'm not sure how you are setting the style of your button but if you are able to put both images into the style then you can change the visibility when IsEnabled is changed.

   <Style TargetType="{x:Type Button}"  x:Key="LinkButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="Overlay" CornerRadius="2">
                    <Image x:Name="Enabled" Source="{StaticResource EnabledImg}"/>
                    <Image x:Name="Disabled" Source="{StaticResource DisabledImg}" Visibility="Collapsed"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                       <Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
                       <Setter TargetName="Enabled" Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Setting Button background Image wpf

4 Answers4