Background Color Changes

Question

SolidColorBrush bgColor;

public ModernBTN() {
  InitializeComponent();
  this.Loaded += delegate (object sender, RoutedEventArgs e) {
    bgColor = (SolidColorBrush)Background;
    MouseEnter += EnterAnim;
    MouseLeave += LeaveAnim;
  };
}

private void EnterAnim(object sender, MouseEventArgs e) {
  DoubleAnimation anim = new DoubleAnimation(0, myBtn.Width, TimeSpan.FromMilliseconds(200));
  indicatorBtn.BeginAnimation(WidthProperty, anim);
  ColorAnimation animC = new ColorAnimation(BGHover, TimeSpan.FromMilliseconds(200));
  myBtn.Background.BeginAnimation(SolidColorBrush.ColorProperty, animC);
}

private void LeaveAnim(object sender, MouseEventArgs e) {          
  DoubleAnimation anim = new DoubleAnimation(myBtn.Width, 0, TimeSpan.FromMilliseconds(200));
  indicatorBtn.BeginAnimation(WidthProperty, anim);
  ColorAnimation animC = new ColorAnimation(Color.FromArgb(bgColor.Color.A, bgColor.Color.R, bgColor.Color.G, bgColor.Color.B), TimeSpan.FromMilliseconds(200));
  myBtn.Background.BeginAnimation(SolidColorBrush.ColorProperty, animC);
}

Please tell me why bgColor changes to BGHover color if I put bgColor values ​​only in this.Loaded and = (SolidColorBrush) Background.

ModernBtn.xaml xaml code of my button

<UserControl x:Class="ModernButton.ModernBTN"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:ModernButton"
         mc:Ignorable="d" 
         d:DesignHeight="100" d:DesignWidth="200" Name="myBtn" Background = '#FF282829'>
<Grid Width="Auto" Height="Auto" Name="mainGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <TextBlock Text="{Binding ElementName=myBtn, Path=BtnText}" FontSize="24" Foreground="#FFC7BBBB" TextAlignment="Center" Grid.Row="0" Name="txtBtn" Padding="{Binding ElementName=myBtn, Path=TextPadding}"></TextBlock>
    <Rectangle Grid.Row="1" Fill="Lime" Height="5" Name="indicatorBtn" Width="0"></Rectangle>
</Grid>

Answer 1

bgColor = (SolidColorBrush)Background;

Because SolidColorBrush is a reference type, bgColor and Background will reference the same object after the above line. So, when changes are made to Background (as you do with the animation), this changes will be reflected in bgColor.

An easy way to solve this may be to changebgColor to type Color:

Color bgColor;

public MainWindow()
{
   InitializeComponent();
   this.Loaded += delegate (object sender, RoutedEventArgs e) {
        bgColor = ((SolidColorBrush)Background).Color;
        MouseEnter += EnterAnim;
        MouseLeave += LeaveAnim;
   };
}

private void EnterAnim(object sender, MouseEventArgs e)
{
    ColorAnimation animC = new ColorAnimation(BGHover, TimeSpan.FromMilliseconds(200));
    myBtn.Background.BeginAnimation(SolidColorBrush.ColorProperty, animC);
}

private void LeaveAnim(object sender, MouseEventArgs e)
{
    ColorAnimation animC = new ColorAnimation(bgColor, TimeSpan.FromMilliseconds(200));
    myBtn.Background.BeginAnimation(SolidColorBrush.ColorProperty, animC);
}