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()
        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:


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


Pick Background and your code looks like this:


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.


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


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


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.


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


There are two options as shown.


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


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


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.


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

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.


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.


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.


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!

Post a Comment

Popular posts from this blog

UWP: XAML's ListView Control and its SelectionChanged event - Part 1

UWP: XAML's ComboBox Control -Part 1

Develop a Side Menu App using Intel XDK - Part 1