How to Add Controls and Set Properties and Event Handlers in Windows Store Apps

 Introduction

In this article I show you how to add controls and set properties and event handlers in Windows Store apps using the Property pane and XAML.

Description

When we want to create a UI for our app then we must be aware of all properties and events of controls such TextBoxes, Buttons, Comboboxes etcetera that we are using.

   A.  Use the following procedure when working with controls:

• add a control to your app UI.
• set the properties on the control, such as width, height, or foreground color.
• generate some code for the control so that it does something.

   B.  Adding a control: We can add a control to a Windows Store App in several ways, including:

• by using a design tool like Blend for Microsoft Visual Studio 2012 for Windows 8
• by the Microsoft Visual Studio 2012 XAML designer
• by the control to the XAML markup in the Visual Studio 2012 XAML editor
• by the control in code; controls that you add in code are visible when the app runs

Step 1

.  First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.
.  Open Visual Studio 2012. "File" -> "New" -> "Project..."
.  Choose "Template" -> "Visual C#" -> "Windows Store" -> "Blank App (XML)"
.  Rename the application

Step 2

Setting the name of the controls

If we want to do something with a control then we must set the name of the control in the XAML editor by coding the x:Name attributes either from the property windows or something else.

 Basically there are three parts of the Property And Events window; they are:

1. Toolbox  View
2. Design View (UI apps) panel
3. Solution Explorer & Property panel

  A. To name a control using the property panel:

1. Select the element to name.
2. In the Properties panel, type a name into the Name text box.
3. Press Enter to commit the name.

B.  To name a control through the XAML editor

We can also change the name of a control in the XAML editor by changing the x:Name attribute.

Step 3

Setting the control Properties

We use the properties to specify the appearance, control size, position, content and all other attributes of controls property. We can change the Width, Height and Margin properties by selecting and manipulating the control in the Design view. This illustration shows some of the resizing tools available in the Design View.

A. To reset the property

1. We can change it in the Properties panel, click the property marker next to the property value. The property menu opens.
2. In the property menu, click "Reset".

B. How to set the foreground  property by using the color picker in the Properties window.

c) How to set the foreground property in the XAML editor. Notice the Visual Studio IntelliSense window that opens to help you with the syntax.

The resulting XAML after you set the foreground property.

Step 4

To set the events of every control we can use the events panel from the Property windows. For example, a Button control has a Click event that is raised when a user clicks the Button. We create a method, called an event handler, to handle the event. The control's event with an event handler method in the Properties window, in XAML, or in code.

We can generate default Events by double-clicking on a control or custom events using a property to set the name of the control.