Home > Enterprise >  Default button color when Mouse is Leaving in WPF
Default button color when Mouse is Leaving in WPF

Time:11-30

I'm trying to change the color of multiple buttons when Mouse is entering thoses buttons via the sender from the event.

It works perfectly but I would like to know if when the event of Mouse leaving is triggered, if it exist, instead of changing the color by the hexcode or something like that, if a "default color button" method could exist?

Actually, when Mouse is overing any buttons (my buttons are Ellipses) :

private void ButtonsOvering_MouseEnter(object sender, MouseEventArgs e)
        {
            (sender as Ellipse).Fill = Brushes.IndianRed;
        }

And, when Mouse is leaving any buttons :

private void ButtonsLeaving_MouseLeave(object sender, MouseEventArgs e)
        {
            Color yoloColor = new Color();
            yoloColor = (Color)ColorConverter.ConvertFromString("#FF252424");
            SolidColorBrush namasteColor = new SolidColorBrush(yoloColor);
            (sender as Ellipse).Fill = namasteColor;
        }

the #FF252424 is the default color I gave for mostly all of my buttons so in this case, when leaving the button with my mouse, the button will have the same color than when my mouse was not overing it.

But because I have others buttons with another default color that I gave to them, I don't want to create more line of codes for telling to change the color with another HexCode when my mouse is leaving the buttons.

Do a method or something like a Default.Color.Button exist in WPF ?

Thx

CodePudding user response:

There is no such method, of course. You can store the original color before changing it on mouse over:

private Dictionary<Shape, Brush> ShapeDefaultBrushMap { get; }

private void ButtonsOvering_MouseEnter(object sender, MouseEventArgs e)
{
  var shape = sender as Shape;
  this.ShapeDefaultBrushMap[shape] = shape.Fill;
  shape.Fill = Brushes.IndianRed;
}

private void ButtonsLeaving_MouseLeave(object sender, MouseEventArgs e)
{
  var shape = sender as Shape;
  if (this.ShapeDefaultBrushMap.TryGetValue(shape, out Brush shapeDefaultBrush))
  {
    shape.Fill = shapeDefaultBrush;
  }
}

CodePudding user response:

First of all, you should be using Button control which have built-in all necessary functions of buttons. However, if you are trying to get a button with custom shape then you need to override the default template of buttons. Check this guide for details.

About your concern of having a default color for your ellipses, which change when mouse is over them, the best approach here is to use a Style.

Here is how it can be done for your case:

<!--
    In App.xaml inside <Application.Resources>...</Application.Resources>
    or in MainWindow.xaml inside <Window.Resources>...</Window.Resources>
-->
<Style x:Key="EllipseStyle1" TargetType="Ellipse">
    <Setter Property="Fill" Value="#FF252424"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Fill" Value="IndianRed"/>
        </Trigger>
    </Style.Triggers>
</Style>

<Style x:Key="EllipseStyle2" TargetType="Ellipse">
    <!-- Replace 'Green' with your other default colors -->
    <Setter Property="Fill" Value="Green"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Fill" Value="IndianRed"/>
        </Trigger>
    </Style.Triggers>
</Style>

...

<!-- Use it as following -->
<Ellipse Style="{StaticResource EllipseStyle1}"/>

Bonus: Since you are looking for a way to just tell the ellipse, in mouse leave event handler, to change back its Fill color to default, there is a way to do that in WPF but you must apply a style which define that default color (similar to above styles but without <Style.Triggers>...</Style.Triggers>) otherwise the system default applies here. The Method is called ClearValue which can be used as following:

private void ButtonsLeaving_MouseLeave(object sender, MouseEventArgs e)
{
    // This will make the ellipse without color if there is
    // no style applied with custom value for Fill property
    (sender as Ellipse).ClearValue(Ellipse.FillProperty);
}
  • Related