Thursday, January 4, 2018

Event Code: UI design with XAML in Visual Studio 2017 - 2

I assume you have followed me with this post here:


After reading the above you will see that you start with an empty project whose code is shown here:


WinPhoneStep1

In the final step you will have achieved this:


WinPhoneStep11

This project when deployed will just show a button as in the above and nothing more:

WinPhoneStep13

Writing code for a click event of this button.

Let us first give a name for this button, like ClickMe. When you highlight the button in the design by clicking it, the Property pane opens where you can write the name you want as shown.

winPhoneStep20

In the XAML code the Button gets a qualifier x:Name="ClickMe" as shown here:


Now enter the Click event to the code by just enter "cl" after a space as shown and the intellisense kicks-in showing your options as shown.

winPhoneStep22.png

You pick Click and you will see the following:

winPhoneStep23.png

Inside of double quotes type in ClickMe_Click (i.e., the name of the event).

Where do you write code ?

Make a right click on 'Click' as shown in the next image and you will see a pop-up as shown.

winPhoneStep24

At the top click on View Code (or F7) and you will go the code page in C# (MainPage.XAML.cs) as shown.
-----------
namespace HelloWorld
{
    ///




    /// An empty page that can be used on its own or navigated to within a Frame.
    ///

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

    
        private void ClickMe_Click(object sender, RoutedEventArgs e)
        {
         
        }

    }
}
---------------

This by itself set up the scene for you to write the code.

Now you have to decide what it is you want to do when the button is clicked.

Let us say you want the font size of 'Hello' to increase so that after clicking the size, say double from 25 to 50.

Then you have to change the button's font-size property (initially 25 in design) as shown. You should leave the rest as is.
---------
private void ClickMe_Click(object sender, RoutedEventArgs e)
        {
         
            ClickMe.FontSize = 50;
           
        }
---------------------

Now if you BUILD the project and run as described in the earlier post you would see the following:

winPhoneStep25

Now you can click the Run button (Green arrow-head) with the following setting:


winPhoneStep26

After some processing your application displays with the start up page the following:


winPhoneStep27

After the start this is the first page.


winPhoneStep28

and when you click the button changes to this:


winPhoneStep29

That is all there is to it!

Happy New Year


Post a Comment