Constantly changing the background of a button in wpf

Question

I have got a button on my window. by default the button's background color is blue. on clicking the button, color should be changed to red. but I see that background color is changing to red but it is not permanent.

here is the class code:

/// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        bool _highLow;
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;
           _highLow = false;

        }

        public bool RiskHighLowMedium
        {
            get { return _highLow; }
            set { _highLow= value ;

            this.OnPropertyChanged("RiskHighLowMedium");
            this.OnPropertyChanged("BackGround");
            }
        }


         //background Dependency Property
        public static readonly DependencyProperty BackgroundProperty;


        /// <summary>
        /// static constructor
        /// </summary>
        static MainWindow()
        {
            BackgroundProperty = DependencyProperty.Register("Background", typeof(Brush), typeof(MainWindow));
        }


        /// <summary>
        /// Background Dependency
        /// Property
        /// </summary>
        public Brush Background
        {
            get { return (Brush)GetValue(BackgroundProperty); }
            set { SetValue(BackgroundProperty, value); }

        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            RiskHighLowMedium = true;
            Background = RiskHighLowMedium ? Brushes.Red : Brushes.Blue;
            this.OnPropertyChanged("RiskHighLowMedium");
            this.OnPropertyChanged("Background");
        }




        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {

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

        #endregion // INotifyPropertyChanged Members
    }

xaml code:

<Window x:Class="backgrounChange.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>
    <Style x:Key="CircleButton" TargetType="Button">


            <Setter Property="Background" Value="Blue"/>

            <Style.Triggers>

            <DataTrigger Binding="{Binding RiskHighLowMedium }"  Value="true">
                    <Setter Property="Background" Value="{ Binding Path= Background}"/>
                </DataTrigger>


            </Style.Triggers>

    </Style>
    </Window.Resources>

    <Grid>
        <Button Width="50" Height="50" Style="{DynamicResource  CircleButton}" Click="Button_Click"/>
    </Grid>
</Window>

I would appreciate any sort of help here.

Answer 1

While you can change the Button.Background value, the default ControlTemplate of the Button control defines an animation that animates the background of the Button between the official Button.Background value and another (light blue) colour. To get rid of this behaviour, you will have to define a new ControlTemplate for the Button. Here is a very basic example:

<Style x:Key="CircleButton" TargetType="Button">
    <Setter Property="Background" Value="Blue"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding RiskHighLowMedium}" Value="True">
            <Setter Property="Button.Background" Value="Red" />
        </DataTrigger>
    </Style.Triggers>
</Style>

...

<Button Width="50" Height="50" Style="{StaticResource CircleButton}" 
    Click="Button_Click">
    <Button.Template>
        <ControlTemplate>
            <Border Background="{TemplateBinding Background}">
                <ContentPresenter />
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

...

bool _highLow = false;
public bool RiskHighLowMedium
{
    get { return _highLow; }
    set { _highLow = value; OnPropertyChanged("RiskHighLowMedium"); }
}

...

private void Button_Click(object sender, RoutedEventArgs e)
{
    RiskHighLowMedium = true;
}