Windows Phone Controls: Part 1

Introduction

In this article, I will talk about some basic controls of Windows Phone and XAML, the main design language of Windows Phone. I think it will help you to understand the basic principle of XAML, how it works, its attributes and uses. So let's crack it, the essential XAML controls for Windows Phone.

XAML makes your life much easier. Previously, you needed to design many pages with the same alignment and it was hectic and frustrating, also not that easy. But XAML brings you the ability to make your design portable and easy to arrange. You can copy paste your design and reuse it wherever you want. It's not all, you can shape your design to 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 Windows Phone 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 “WindowsPhoneControls”.


                                                                           Figure 1

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


                                                                              Figure 2

If you don't have the experience of Windows Phone Apps, feel free to see the blog I wrote, Windows Phone – Hello world. Take some time and follow the procedure. I think it'll help you.

Working with HyperlinkButton

Previously, we have worked with simple Button controls in our “Hello world” application. Now, we'll work with another Button like control called “HeyperLinkButton”. 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 you design. Like this:


                                                Figure 3

Now, to ensure 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"/>

<TextBlock x:Name="HB_TextBlock"
           HorizontalAlignment="Left"
           VerticalAlignment="Top"
           Margin="10,10,0,0"
           TextWrapping="Wrap"
           Height="40"
           Width="140"
           FontSize="24" Grid.Column="1"/>

Listing 1

Here, in HyperlinkButton we have an event controller named HyperlinkButton_1_Click, it creates a code block that 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 you need to.


                                       Figure 4

Like the picture above, just put your mouse curser on these points and just click above the Main Grid and it will create Grids automagically, also generate the code for making Grids in XAML.

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 2

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


                                       Figure 5

Working with RadioButton

Well if you can do that, then you are on the move. Now, we take another control, a 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 I do.

So, our design will look like this:


                                       Figure 6

And the designing code is the following:

<!--Radio Button-->
<RadioButton x:Name="RadioButton_1"
             Content="RadioButton"
             HorizontalAlignment="Left"
             Margin="10,10,0,0"
             Grid.Row="1"
             VerticalAlignment="Top"
             Checked="RadioButton_1_Checked"/>

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

Listing 3

Here, like HyperlinkButton, in our RadioButton we have also an event handler named RadioButton_1_Checked and in our event handler we will show the confirmation message of 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 4

Here, we're checking whether or not our RadioButton is checked, 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 7

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, for example “Hello world”.

The design will look like this.


                                    Figure 8

The design code is the following:

<!--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 5

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 9

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 take another TextBlock and the design will look like this.


                                    Figure 10

The design code is the following,

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

<TextBlock x:Name="TS_TextBlock"
           HorizontalAlignment="Left"
           VerticalAlignment="Top"
           Margin="10,9.5,0,0"
           TextWrapping="Wrap"
           Height="40"
           Width="140"
           FontSize="24"
           Grid.Column="1"
           Grid.Row="3"/>

Listing 6

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 7

We did the same logic here like the RadioButton.

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


                                          Figure 11

Working with ListBox

Our fifth control will be ListBox, its data binding control. It's an important control that 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 it in the Grid. Here, we need a Button and TextBlock controls.

The design will look like this:


                                 Figure 12

The designing code is given below.

<!--List Box-->
<ListBox x:Name="ListBox_1"
         HorizontalAlignment="Left"
         Height="120"
         Margin="10,10.167,0,0"
         Grid.Row="4"
         VerticalAlignment="Top"
         Width="220"
         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,0.167,0,0"
        Grid.Row="4"
        VerticalAlignment="Top"
        Width="125"
        Click="Ok_Click"/>

<TextBlock x:Name="LB_TextBlock"
           HorizontalAlignment="Left"
           VerticalAlignment="Top"
           Margin="10,53.167,0,0"
           TextWrapping="Wrap"
           Height="77"
           Width="140"

Listing 8

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

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 9

Here, we have created a string Array named month and the array index's values are the month's name. In the 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's selected then a alert message will be shown in the TextBlock.

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


                                 Figure 13

Working with ComboBox

Now, we'll talk about a similar control and it's really awesome; it just works exactly the same as a ListBox but it depends on your application whether it is more appropriate deending on your needs. It's called a 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 14

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 10

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 11

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


                                                                           
Adding a User Control

And lastly, we'll talk about a 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 17

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


                                                                           Figure 18

Customize the XAML code, mainly the Grid section.

<Grid>
    <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">
            <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">
                <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="1">
                    <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>
            </Border>
        </Border>
    </Border>
</Grid>

Listing 12

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


                                                                                Figure 19

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

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

Listing 13

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 need to take a TextBlock that will have a header message called “Popup Window” and a Button that the content is “Show Popup”. The design will look like this:


                                 Figure 20

The design 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 14

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 15

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

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


                                 Figure 21

Finalizing and running our Control application

In the end, our full design will look like the picture below.


                                       Figure 22

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


                                 Figure 23

Summary

Well, today we've talked about seven controls and their uses. Hopefully, it'll give you a little idea how to use controls and modify with XAML in Windows Phone 8.1 applications. I think, I can help you just a little to move on with XAML. I hope you like it. Next time, I'll be back with other controls. Until then, good bye. Have a nice day.

Happy coding.

You can read the original article at: Windows Phone Controls – Part 1