Click Event to change Background color of a Button using VS 2017

Sometimes you need to change the background color from its default to a different color. Let us say, we have a button whose Background color needs changing by an event such as the CLICK event.

How is it done?

Well, I could give you a line of code to do that. Perhaps it will work and all that there is to it. However, if you are beginner and wondering how the hell it is coded with so much of background code, namespaces; classes, methods, events etc.

This post tries to show how you may find yourselves how to do it.

If you are looking for the one line of code, please go to the end and you will find it there. If you are beginning to code and new to Microsoft; new to Visual Studio in particular, follow on.

As mentioned in my previous post Universal Windows Project use XAML for the UI and the pages.

Some of the things you should remember is that you should use intellisense as much as possible. You should also use code hints you get when your code is not doing what you except.

In order to illustrate let us start with the code for a BUTTON click event for a button named ClickMe as shown:

=========

public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

    

        private void ClickMe_Click(object sender, RoutedEventArgs e)
        {
            ClickMe.FontSize = 50;
           
        }
    }
}

===============

The above code changes the font-size to 50 when the button is clicked. We add one more line which changes the BACKGROUND color to red.

Start with ClickMe (the object) by typing below ClickMe in the above code.

As soon as you typein Click you will see this:

ClickMeEvent_0

Pick ClickMe from the above and add a period to it after that and you will get more pop-up as shown.

ClickMeEvent_1

Pick Background and your code looks like this:

ClickMeEvent_3

You try the 'dot trick' again by typing a dot after Background as shown. You do get a pop-up which does not seem to have anything to do with color.

ClickMeEvent_4

Now you need to know that color is given by using a brush and you have an Object called SolidColorBrush besides other kinds.

ClickMeEvent_5

Now you type in SolidColorBrush but you get the red wiggly (oops, something not right).

ClickMeEvent_6

You place your cursor on SolidColorBrush and you get a hint. SolidColorBrush is a class name and you are looking for a color value. Instead of using the class, you should use an instant of the class with the 'new' keyword as shown.

ClickMeEvent_7

The red wiggly is still there but you have made progress.

Well this gives a hint that you must follow up this with one of [], {},or ().

Let us type the parenthesis-begin as shown

ClickMeEvent_8

There are two options as shown.

ClickMeEvent_9

The first method gives no color and the second options uses one of the Windows colors.

ClickMeEvent_10.jpg

Now I use the hint from the image one previous to the above. And we continue with code as shown.

ClickMeEvent_11.jpg

Well, again we are getting the class COLOR. Place the cursor on the color and find out what is needed.

Now with the dot trick we are ahead to choose a color we want.

ClickMeEvent_12.jpg

Now we have to choose the color from inserting proper values for the arguments of the function

FromArgb() as described in this post here.

Let us choose a ALPHA (transparency)channel value of 255 and a RED channel value of 255, BLUE channel value 0 and Green channel vlaue of 0 as shown. Type these into FromArgb() as shown.

ClickMeEvent_14.jpg

Now we are rid of the pesky red wiggly line. Ready to rock and roll.

Build the code from the main menu and deploy it to the local machine as described in my earlier post.

The Build succeeds as shown.

ClickMeEvent_15.jpg

Now Deploy the solution and you get this result as there are no errors:

========

Deploy started: Project: HelloWorld, Configuration: Debug x86 ------

Updating the layout...

Copying files: Total <1 br="" layout...="" mb="" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;" to="">1>Checking whether required frameworks are installed...
Registering the application to run from layout...
Deployment complete (0:00:18.287). Full package name: "b940c521-2fb5-429c-9486-69bb2a425e90_1.0.0.0_x86__ckpvgz13cfhxc"
========== Build: 0 succeeded, 0 failed, 1 up-to-date, 0 skipped ==========
========== Deploy: 1 succeeded, 0 failed, 0 skipped ==========
Now run the project and you get this display of  your application

<1 br="" layout...="" mb="" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;" to="">

<1 br="" layout...="" mb="" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;" to="">
<1 br="" layout...="" mb="" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;" to="">ClickMeEvent_16

Now click the Hello button to see the Background color and font size change as shown.

ClickMeEvent_17

After verifying close the application and you get the following response:

==================

The program '[15840] HelloWorld.exe' has exited with code 1 (0x1).

That's it folks!