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.

<!--Hyperlink Button-->
<HyperlinkButton x:Name="HyperlinkButton_1"
        Content="HyperlinkButton"
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Margin="10,10,0,0"
        Click="HyperlinkButton_1_Click"
        Grid.Column="0"
        Grid.Row="0"
        Width="114"
        Height="50"/>

TextBlock x:Name="HB_TextBlock"
HorizontalAlignment="Left"
VerticalAlignment="Top"
TextWrapping="Wrap"
Height="50"
Width="124"
FontSize="24"
Grid.Column="1"
Grid.Row="0"
Margin="10"/>

                                                      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.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="70*"/>
        <RowDefinition Height="80*"/>
        <RowDefinition Height="68*"/>
        <RowDefinition Height="93*"/>
        <RowDefinition Height="145*"/>
        <RowDefinition Height="124*"/>
        <RowDefinition Height="60*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="60*"/>
        <ColumnDefinition Width="40*"/>
    </Grid.ColumnDefinitions>
</Grid>

                                                               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.

private void HyperlinkButton_1_Click(object sender, RoutedEventArgs e)
{
   HB_TextBlock.Text = "OK";
}

                                                      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.

<RadioButton x:Name="RadioButton_1"
          Content="RadioButton"
          HorizontalAlignment="Left"
          Margin="10,4,0,0"
          Grid.Row="1"
          Grid.Column="0"
          VerticalAlignment="Top"
          Checked="RadioButton_1_Checked" Height="66" Width="114"/>

<TextBlock x:Name="RB_TextBlock"
      HorizontalAlignment="Left"
      VerticalAlignment="Top"
      Margin="10,10,0,0"
      TextWrapping="Wrap"
      Height="60"
      Width="124"
      FontSize="24"
      Grid.Column="1"
      Grid.Row="1"/>

                                                         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.

private void RadioButton_1_Checked(object sender, RoutedEventArgs e)
{
    if (RadioButton_1.IsChecked == true)
    {
        RB_TextBlock.Text = "Checked";
    }
    else
    {
        RB_TextBlock.Text = "Not checked";
    }
}

                                                            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.

<!--Text Block-->
<TextBlock Text="Hello world"
     HorizontalAlignment="Left"
     Margin="10,10,0,0"
     Grid.Row="2"
     TextWrapping="Wrap"
     VerticalAlignment="Top"
     Height="40"
     Width="380"
     FontSize="24" Grid.ColumnSpan="2"/>

                                                         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,

<!--Toggle Switch-->
<ToggleSwitch x:Name="ToggleSwitch_1"
        Header="ToggleSwitch"
        Margin="10,10,0,0"
        Grid.Row="3"
        VerticalAlignment="Top"
        Toggled="ToggleSwitch_1_Toggled"
        Width="196"
        Height="73"/>

t;TextBlock x:Name="TS_TextBlock"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Margin="10,10,0,0"
    TextWrapping="Wrap"
    Height="73"
    Width="124"
    FontSize="24"
    Grid.Column="1"
    Grid.Row="3"/>

                                                      Listing 7

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

private void ToggleSwitch_1_Toggled(object sender, RoutedEventArgs e)
{
    if (ToggleSwitch_1.IsOn == true)
    {
        TS_TextBlock.Text = "This is On";
    }
    else
    {
        TS_TextBlock.Text = "This is Off";
    }
}

                                                  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,

<!--List Box-->
<ListBox x:Name="ListBox_1"
         HorizontalAlignment="Left"
         Height="120"
         Margin="10,10,0,0"
         Grid.Row="4"
         VerticalAlignment="Top"
         Width="196"
         ScrollViewer.VerticalScrollBarVisibility="Visible">
            <ListBoxItem Content="January"/>
            <ListBoxItem Content="February"/>
            <ListBoxItem Content="March"/>
            <ListBoxItem Content="April"/>
            <ListBoxItem Content="May"/>
            <ListBoxItem Content="June"/>
            <ListBoxItem Content="July"/>
            <ListBoxItem Content="August"/>
            <ListBoxItem Content="September"/>
            <ListBoxItem Content="October"/>
            <ListBoxItem Content="November"/>
            <ListBoxItem Content="December"/>
</ListBox>

<Button Content="Ok"
        x:Name="Ok"
        Grid.Column="1"
        HorizontalAlignment="Left"
        Margin="10,10,0,0"
        Grid.Row="4"
        VerticalAlignment="Top"
        Width="110"
        Click="Ok_Click"/>

<TextBlock x:Name="LB_TextBlock"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Margin="10,53,0,0"
            TextWrapping="Wrap"
            Height="82"
            Width="124"
            FontSize="24"
            Grid.Column="1"
            Grid.Row="4"/>

                                                         Listing 9

Here, we have an event handler named “Ok_Click”, and we have binded some month’s name inside the ListBox’s starting and closing tags. TextBlock’s name is LB_TextBlock. So, the C# code will look like the following:

private void Ok_Click(object sender, RoutedEventArgs e)
{
    string[] month = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
    if (ListBox_1.SelectedValue != null)
    {
        LB_TextBlock.Text = month[ListBox_1.SelectedIndex];
    }
    else
    {
        LB_TextBlock.Text = "Select a item from list.";
    }
}

                                                            Listing 10

Here, we have created a string Array named month, and the array index’s values are the month’s name. In If decision statement, first we’re checking if the ListBlock is selected or not, if an item is selected we’re matching the SelectedIndex’s value with our array Index’s value, and if no item is selected then an alert message will be shown in the TextBlock.

If we run the application, it will look exactly like this,


                                                Figure 12

Working With ComboBox

Now, we’ll talk about a similar control and it’s really awesome than ListBox, just works exactly same as ListBox, but it depends on your application which will be more appropriate in case of your needs. It is called ComboBox. Take it from the  ToolBox or you can just write XAML on your own, like or something like that. So, the design will look like this,


                                 Figure 13

The designing code is given below,

<!--Combo Box-->
<ComboBox x:Name="ComboBox_1"
          HorizontalAlignment="Left"
          Margin="10,0.167,0,0"
          Grid.Row="5"
          VerticalAlignment="Top"
          Width="220">
    <ComboBoxItem Content="January"/>
    <ComboBoxItem Content="February"/>
    <ComboBoxItem Content="March"/>
    <ComboBoxItem Content="April"/>
    <ComboBoxItem Content="May"/>
    <ComboBoxItem Content="June"/>
    <ComboBoxItem Content="July"/>
    <ComboBoxItem Content="August"/>
    <ComboBoxItem Content="September"/>
    <ComboBoxItem Content="October"/>
    <ComboBoxItem Content="November"/>
    <ComboBoxItem Content="December"/>
</ComboBox>

<TextBlock x:Name="CB_TextBlock"
           HorizontalAlignment="Left"
           VerticalAlignment="Top"
           Margin="10,65.167,0,0"
           TextWrapping="Wrap"
           Height="40"
           Width="380"
           FontSize="24"
           Grid.Row="5" Grid.ColumnSpan="2"/>

<Button Content="Ok"
        x:Name="Ok_1"
        Grid.Column="1"
        HorizontalAlignment="Left"
        Margin="10,0.167,0,0"
        Grid.Row="5"
        VerticalAlignment="Top"
        Width="125"
        Click="Ok_1_Click"/>

                                                            Listing 11

And the C# code is here.

private void Ok_1_Click(object sender, RoutedEventArgs e)
{
    string[] month = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
    if (ComboBox_1.SelectedValue != null)
    {
        CB_TextBlock.Text = month[ComboBox_1.SelectedIndex];
    }
    else
    {
        CB_TextBlock.Text = "Select a item from list.";
    }
}

                                                                  Listing 12

If we run the application, it’ll look exactly like this.


                                                Figure 14

AddingA User Control

And lastly, we’ll talk about Popup Box with a Button control, and it will show some messages. For this, we need a User Control. Go to the Solution Explorer, and Add > New Item.


                                                Figure 15

Now you’ve to select User Control and give it a name called “PopupPanel”.


                                                                    Figure 16

Customize the XAML code, mainly the Grid section.

<Grid>
    <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Orientation="Vertical" Height="200" Width="200" VerticalAlignment="Center">
            <TextBlock Text="This is a Popup!" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,60,0,0"/>
            <TextBlock Text="Hit the button again to hide me" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,10,0,0" TextWrapping="Wrap" TextAlignment="Center"/>
            <Button HorizontalAlignment="Center" Content="Close Popup" Click="ClosePopup" />
        </StackPanel>
    </Border>
</Grid>

                                                                  Listing 13

Here, we’ve Border brush, StacPanel which will bound the TextBlocks and a Button. The design will look like this,


                                          Figure 17

The C# code of PopupPanel.xaml.cs is given below. It’s mainly the buttons event handler.

private void ClosePopup(object sender, RoutedEventArgs e)
{
    Popup hostPopup = this.Parent as Popup;
    hostPopup.IsOpen = false;
}

                                                                     Listing 14

We just made our first User Control. It’s really helpful when you need a custom control in your application.

Working With Popup Window

Now, in our MainPage.xaml, we have to take a TextBlock which will have a header message called “Popup Window” and a Button whose content is “Show Popup”. The design will look like this,


                           Figure 18

The designing code is given below,

  <!--Popup Window-->
  <TextBlock HorizontalAlignment="Left"
       Text="Popup Winodow"
       VerticalAlignment="Top"
       Margin="10,10,0,0"
       TextWrapping="Wrap"
       Height="40"
       Width="220"
       FontSize="24"
       Grid.Row="6"/>

<Button Content="Show Popup"
    x:Name="PopupButton"
    Grid.Column="1"
    HorizontalAlignment="Left"
    Margin="10,0,0,0"
    Grid.Row="6"
    VerticalAlignment="Top"
    Width="140"
    Click="PopupButton_Click"/>

                                                         Listing 15

Our event handler C# code behind is also given here,

private void PopupButton_Click(object sender, RoutedEventArgs e)
{
    if (!popup.IsOpen)
    {
        popup.Child = new PopupPanel();
        popup.VerticalOffset = 250.0;
        popup.HorizontalOffset = 100.0;
        popup.IsOpen = true;
    }
}

Popup popup = new Popup();

                                                            Listing 16

Here, we have created new object of Popup window, and checked it in our event handler code block by If decision statement. We have created a Popup Child object and set its position and make IsOpen equal to true, so that it shows up when called.

If we run the application, it’ll look exactly like this.


                                          Figure 19

Finalizing and running our Control Application.

In the end, our full design will look like the following image:


                        Figure 20

And if we run the complete application, it’ll look exactly like this.


                                          Figure 21

Summary

Well, today we have talked about seven different controls and their uses. Hopefully, it’ll give you a little idea of how to use controls and modify with XAML in Universal Windows Platform Application. I think, I can help you just a little to move on with XAML. Hope you like it. Next time, I’ll be back with other controls. Till then, good bye. Have a nice day. Happy coding.

Download the full source code.