Changing background colour of a button in c#

Question

I'm trying to change the background colour of a button on hover in C# I THINK I almost have it sussed and I'm probably making some blatantly obvious mistake... but the words "Colors" is underlined in red with the error... "The name 'Colors' does not exist in the current context"... This is the code that I have so far;

private void gas_button_MouseEnter(object sender, RoutedEventArgs e)
{
    SolidColorBrush red = new SolidColorBrush(Colors.Red);
    gas_button.Background = red;    
}

Any help would be appreciated! Thanks in advance

score 1 · Answer 1 · edited May 23 '17 at 11:45

From the way you are approaching this problem, it feels like you are coming from either a WinForms or another GUI library background.

One of the many great things about WPF is that you can solve these kind of problems with a declarative approach by defining a style for Button (or any other control) that achieves the visual look you are going for without writing any actual code! Take a look at the button declaration below:

<Button Content="Test">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Green"/>                
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

This defines us a button, and overrides the default button style to set the background to green and defines a trigger that sets the background to red when IsMouseOver is true. IsMouseOver is a DependencyProperty so the trigger can subscribe to notifications when the value changes, which is how the whole thing works.

The snag with this code is it won't actually work! The reason is that the standard Button has some more complex rules associated with it to make it look like a real Windows button. This would work with most other controls or properties, but not Background on Button. To fix this, we have to override the ControlTemplate for our Button and force it to render a border that is the colour of our Background property. This is a little too much to go into here, but this question addresses this issue: How do you change Background for a Button MouseOver in WPF?

The final code for you:

<Button Content="Test">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

This kind of styling is what WPF is designed to do. It allows you to build quite complex and fancy/interactive skins for your application that are entirely markup based. You can store these in theme files and use them to override the whole look and feel of an application. It's really powerful and a great way of separating UI look and feel from actual functional code.

score 0 · Answer 2 · answered Feb 24 '14 at 15:53

Add this statements at the top of your code:

//import...oops! I like VB better, and I usualy use VB.  Sorry.
using System.Windows.Media;

By the way, you can use "sender" instead of "gas_button":

sender.BackgroundColor = red;

By using this, your code becomes simplelier.

(Im sorry if you know this)

Changing background colour of a button in c#

2 Answers2