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. In XAML scenarios, Color is not referenced directly but by the component SolidColorBrush.
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="" 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="" to="">
<1 br="" layout...="" mb="" to="">
<1 br="" layout...="" mb="" 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!
I am trying to find the value for the second JSON object:
