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

stackoverflow.com/questions/15892290/…

Nagaraj S
– Nagaraj S

2014-02-21 06:06:28 +00:00
Commented Feb 21, 2014 at 6:06 — Nagaraj S
– Nagaraj S, Commented Feb 21, 2014 at 6:06
I want this to be done in XAML.

user1687824
– user1687824

2014-02-21 06:08:31 +00:00
Commented Feb 21, 2014 at 6:08 — user1687824
– user1687824, Commented Feb 21, 2014 at 6:08

alex_prvn · Accepted Answer · 2014-02-21 06:14:18Z

0

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

answered Feb 21, 2014 at 6:14

alex_prvn

294 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:03:40Z

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, 2017 at 12:03

CommunityBot

11 silver badge

answered Feb 21, 2014 at 6:53

J R B

2,1364 gold badges20 silver badges33 bronze badges

Comments

Deffiss · Accepted Answer · 2014-02-21 08:49:07Z

0

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!

edited Feb 21, 2014 at 8:49

answered Feb 21, 2014 at 6:38

Deffiss

1,1467 silver badges12 bronze badges

5 Comments

user1687824 Over a year ago

Can i store this style as resource dictionary so thati can use it across buttons.

Deffiss Over a year ago

If you mean creating a resource dictionary file and merging it in App.xaml than yes sure :)

Deffiss Over a year ago

@user1687824 I updated my answer a little. See Update section

user1687824 Over a year ago

IS Microsoft.Expression.Effects.dll available in 4.0 ?

Deffiss Over a year ago

@user1687824 This library ships with Blend and have both 4.0 and 4.5 versions. Make sure that you have Microsoft Blend installed.

evanb · Accepted Answer · 2014-02-21 23:01:49Z

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>

Collectives™ on Stack Overflow

Setting Button background Image wpf

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related