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.
-
- <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:
-
- <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:
-
- <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,
-
- <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.
-
- <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.
-
- <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.
-
- <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