Universal Windows Platform Controls - Part 1

Introduction

In this article, I will discuss about some basic controls of Universal Windows Platform, and XAML is the main design language of Universal Windows Platform. I think it will help you to understand the basic principle of XAML and how it works, its attribute and uses. So let’s get crack it, the essential XAML controls for Universal Windows Platform.

XAML makes your life much easier. Back then, you have to design a lot of pages with same alignment and it is hectic & frustrating, also not that easy task. But XAML brings you the flexibility to make your design portable and easy to arrange. You can copy paste your design and reuse wherever you want. It’s not all, you can shape your design whatever you like to do, and the power is now in your hand. Now let’s see what kind of simple controls you can use in your Universal Windows Platform Application.

Creating A New Project

First of all, we will create a project. Open Visual Studio, and open a “New Project”. Select “Blank App” and name it “Controls1”.


Figure 1

Click OK and you can see Visual Studio like the following.

Working with HyperlinkButton

Previously, we worked with simple Button controls in our “Hello world” application. Now, we’ll work with another Button like control called “HyperLinkButton”. It’s used to link a Url or some other things you like.

To do that, you can see Toolbox in the left side of the Visual Studio and you can find it in “All XAML Controls” section. Click on this control and drag it to your design. Like this,


Figure 2

Now, to make sure it works, we need another TextBlock control. To do so, drag it from the Toolbox and put it below the Hyperlink button. The designing code is given below.

Listing 1

Here, in HyperlinkButton we have an event controller named HyperlinkButton_1_Click, it creates a code block which will handle the background task, when you will click in the hyper link Button and we will show a confirmation message in the TextBlock named HB_TextBlock.

Making Grid

We have made some Grids in our main Grid to arrange the controls in these Grids like Grid 1, 2 and so on. You can make Grids wherever you want, you can customize the Grid as your needs.

Listing 2

Now, the main Grid will look like the following:


Figure 3

You can define Row Definitions, number of rows along with their width and column definitions according to their width. We have seven rows and two columns here.

Now, open MainPage.xaml.cs and put the code below the constructor.

Listing 3

Now run the application, and it will look like the following picture, after you will click in the HyperlinkButton.


Figure 4

Working with RadioButton

Well if you can do that, then you are on move. Now, we take another control name RadioButton, and drag it from the TextBlock and put it in another Grid and also a TextBlock in Row 1. The customized code will look like this, or you can simply drag a control and test separately, it’s up to you. I suggest you to do as like I do.

So, our design will look like the following:

Figure 5

And the designing code is below.

Listing 4

Here, like HyperlinkButton, in our RadioButton we also have an event handler named RadioButton_1_Checked, and in our event handler we will show the confirmation message whether it’s checked or unchecked.

Listing 5

Here, we’re checking whether our RadioButton is checked or not, if it’s checked (true), the TextBlock will show “Checked” or if it’s unchecked (false), the TextBox will show “Not checked”.

After you run your application, it’ll look exactly like this.


Figure 6

Working With TextBlock

Another control, we rapidly use in our every application is TextBlock. We’ve used it in our previous controls also. We will show static data in our TextBlock e.x., “Hello world”.

The design will look like this.


Figure 7

Designing code is below.

Listing 6

We don’t need any Button or event handler in this case, because the text is given statically in the design (Text=”Hello world”).

After you run your application, it’ll look exactly like this.


Figure 8

Working with ToggleSwitch

Another control, we’ll talk about is ToggleSwitch. It’s really a beautiful control that will make your application cooler than before. I think you know, how use a control now, we have done it before. So, just take this control and another TextBlock, and the design will look like this.


Figure 9

The designing code is below,

Listing 7

We have an event handler here, so the C# code is given below.

Listing 8

We did the same logic here like the RadioButton.

After you run your application, it’ll look exactly like this.


Figure 10

Working With ListBox

Our fifth control will be ListBox, its data binding control. It is an important control which has some complicated structure. So let’s see how, we can use it in our application.

Like other controls drag it from the Toolbox and put in the Grid. Here, we need a Button and TextBlock controls.

The design will look like this,


Figure 11

The designing code is given below,