Change circle button background image on click in WPF

Question

I have a circle button below

<Button  x:Name="btnLight" Width="72" Height="72" Content="" Margin="180,0,372,94" VerticalAlignment="Bottom" d:LayoutOverrides="VerticalAlignment">
            <Button.Template>
                <ControlTemplate>
                    <Grid>
                        <Ellipse>
                            <Ellipse.Fill>
                                <ImageBrush ImageSource="Images/light-off.jpg"/>
                            </Ellipse.Fill>
                        </Ellipse>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
    </Button>

How do I change the background image (Images/light-on.jpg) when I click it? Thank you!

Sheridan · Accepted Answer · 2020-05-27T15:57:37.657

7

Wow! You have been given some complicated answers here... you're all doing too much work!!! This question has a really simple solution. First, let's sort out this ControlTemplate the way it should be:

<Button x:Name="btnLight" Width="72" Height="72" Content="" Margin="180,0,372,94" 
    VerticalAlignment="Bottom">
    <Button.Template>
        <ControlTemplate>
            <Ellipse Name="Ellipse" Fill="{TemplateBinding Background}" />
        </ControlTemplate>
    </Button.Template>
</Button>

Now, you can add a really simple Style to perform your image change:

<Style TargetType="{x:Type Button}">
    <Setter Property="Button.Background">
        <Setter.Value>
            <ImageBrush ImageSource="Images/Add_16.png" />
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Button.IsPressed" Value="True">
            <Setter Property="Button.Background">
                <Setter.Value>
                    <ImageBrush ImageSource="Images/Copy_16.png" />
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

edited May 27 '20 at 15:57

answered Dec 13 '13 at 10:12

Sheridan

68,826
24
143
183

For future reference you might want to pay a bit more attention to how you word your questions. The way it was worded indicated that you wanted the background to change permanently, which is why our other answers were so involved. Obviously if you only want it changed while the button is pressed then the answer is simple, as Sheridan has indicated here, but that's not how you worded your question. – Mark Feldman Dec 13 '13 at 19:05
1

@MarkFeldman, while I understand your point, when you add a comment to an answer, it appears that you are commenting to the *answer author*. When commenting to the *question author*, it is more customary to add a comment to the question. – Sheridan Dec 13 '13 at 19:10
@Sheridan, Now I want to when click, the button changes picture, and when click again, it change again the previous picture, how can i do it, thank you? I try to change trigger property but not worked – 5fox Dec 14 '13 at 12:16
@MarkFeldman thank you for your comment, next time I'll be more careful – 5fox Dec 14 '13 at 12:17
@5fox, on this website, it is customary to ask one question per post. As your initial question has now been answered, can you please ask this new question in a new post? If you mention my name (with the '@') somewhere in it, then I'll get a notification and I'll take a look at it. – Sheridan Dec 14 '13 at 13:14
@Sheridan Does the `Grid` around the `Ellipse` in the `Button.Template` serve any purpose? I'm wondering, as I'm using the code from your answer, and your answer has a focus on keeping the solution simple. – Joel V. Earnest-DeYoung May 03 '20 at 08:49
Ha ha @JoelV.Earnest-DeYoung, that's a very good point. No, it didn't serve any purpose. I just copied it from the question example, but I have removed it from my answer now. Thanks for pointing that out. :) – Sheridan May 27 '20 at 15:58

score 0 · Answer 2 · answered Dec 13 '13 at 04:09

To do it properly you need to create a view model that contains a handler for the button to call when it's pressed and a boolean property you can use for a datatrigger to change the image. Start with the view model:

public class ViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public RelayCommand OnClickedCommand { get; private set; }

    private bool _ImageChanged;
    public bool ImageChanged
    {
        get { return this._ImageChanged; }
        private set {
            this._ImageChanged = value;
            OnPropertyChanged("ImageChanged");
        }
    }

    public ViewModel()
    {
        this.OnClickedCommand = new RelayCommand(param => OnClicked());
    }

    private void OnClicked()
    {
        this.ImageChanged = true;
    }
}

Now create an instance of it and set it as your button's data context. Your button XAML should looks something like this:

<Button x:Name="btnLight" Margin="148,0,372,63" VerticalAlignment="Bottom" Command="{Binding OnClickedCommand}" Height="69">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Grid>
                                <Ellipse>
                                    <Ellipse.Fill>
                                        <ImageBrush ImageSource="image1.png"/>
                                    </Ellipse.Fill>
                                </Ellipse>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ImageChanged}" Value="True">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Grid>
                                        <Ellipse>
                                            <Ellipse.Fill>
                                                <ImageBrush ImageSource="image2.png"/>
                                            </Ellipse.Fill>
                                        </Ellipse>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

Change circle button background image on click in WPF

2 Answers2

Linked