Changing a button Image from Play to Pause when clicked using an Ellipse template

Question

I have a play button which I want to change the background image so it looks like a pause button when clicked, I have already seen many guides on how to do this however my Ellipse template seems to make my code much different from anything I have researched. Here is my Code:

        <Button HorizontalAlignment="Left" Width="40" Height="40" Click="Button_Click_2">
        <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Ellipse Stroke="Black">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="Images/play.png"/>
                        </Ellipse.Fill>
                    </Ellipse>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>

Answer 1

ToggleButton solution (as suggested in the other user's answer) will probably suit you the best. Nevertheless, I'm posting another approach just for the completeness sake.

XAML:

<Window x:Class="WpfTestBench.PlayButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wpfTestBench="clr-namespace:WpfTestBench"
    Title="Play button sample">
<Button Width="40" Height="40" Click="Button_OnClick">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Grid>
                <Ellipse Stroke="Black" />

                <Image Source="Play.png" Visibility="{Binding Path=IsPlaying, 
                    Converter={wpfTestBench:BoolToVisibilityConverter}, 
                    ConverterParameter={x:Static Visibility.Hidden}}" />

                <Image Source="Pause.png" Visibility="{Binding Path=IsPlaying, 
                    Converter={wpfTestBench:BoolToVisibilityConverter}, 
                    ConverterParameter={x:Static Visibility.Visible}}" />
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

Codebehind:

using System.ComponentModel;
using System.Windows;

namespace WpfTestBench
{
    public partial class PlayButton
    {
        public PlayButton()
        {
            InitializeComponent();
            DataContext = new SampleContext();
        }

        private void Button_OnClick(object sender, RoutedEventArgs e)
        {
            var context = DataContext as SampleContext;

            if (context == null)
                return;

            context.IsPlaying = !context.IsPlaying;
        }
    }

    public class SampleContext : INotifyPropertyChanged
    {
        private bool _isPlaying;

        public bool IsPlaying
        {
            get { return _isPlaying; }
            set
            {
                if (_isPlaying == value)
                    return;

                _isPlaying = value;

                OnPropertyChanged("IsPlaying");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;

            if (handler != null)
                handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Converter:

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

namespace WpfTestBench
{
    public class BoolToVisibilityConverter : MarkupExtension, IValueConverter
    {
        private static BoolToVisibilityConverter _instance;

        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var visibility = Visibility.Hidden;

            if (parameter != null)
                visibility = (Visibility)parameter;

            return visibility == Visibility.Visible
                ? (((bool)value) ? Visibility.Visible : Visibility.Hidden)
                : (((bool)value) ? Visibility.Hidden : Visibility.Visible);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }

        #endregion

        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return _instance ?? (_instance = new BoolToVisibilityConverter());
        }
    }
}

Answer 2

I think you should use a ToggleButton (a button that has a checked and unchecked states), and have a trigger that when the button is checked change its template (or just the imagesource of the background).