Welcome again, today I will talk about some basic controls of Windows Phone, and XAML is the main design language of Windows Phone. 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 Windows Phone.
The big day has come, XAML makes your life much easier. Back then, you have to design a lot of pages with same alignment and it 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 Windows Phone Application.
First of all, we will create a project. Open Visual Studio, and open a “New Project”. Select “Blank App” and name it “WindowsPhoneControls”.
Click OK and you can see Visual Studio like below.
If you don’t have the experience of Windows Phone Apps, feel free to see the last blog I wrote, Windows Phone – Hello world. Take some time and follow the steps. I think it’ll help you.
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 an 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,
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"/>
<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"/>
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.
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.
Like above the picture, just take your mouse courser on these points and just click above the Main Grid, and it will create Grids automagically, also generate codes of 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";
}
Now run the application, and it will look like the picture below, after you will click in the HyperlinkButton.
We if you can do that, then you are on move. Now, we take another control name RadioButton, and drag it from 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 this,
and the designing code is below.
<!--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"/>
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 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";
}
}
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 applicatio, it’ll look exactly like this.
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.
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"/>
We don’t need any Button or event handler in this case, cause the text is given statically in the design (Text=”Hello world”).
After you run your applicatio, it’ll look exactly like this.
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.
The desiging code is below,
<!--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"/>
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";
}
}
We did the same logic here like the RadioButton.
After you run your applicatio, it’ll look exactly like this.
Our fifth control will be ListBox, it’s data binding control. It’s 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 Toolbox and put in the Grid. Here, we need a Button and TextBlock controls.
The design will look like this,
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"
FontSize="24"
Grid.Column="1"
Grid.Row="4"/>
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 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.";
}
}
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’s selected then a alert message will be shown in the TextBlock.
If we run the application, it will look exactly like this,
Now, we’ll talk about a similar control and it’s really awesome than ListBox, just works exactly same as ListBox, but it depend on your application which will be more appropiate in case of your needs. It’s called ComboBox. Take it from ToolBox or you can just write XAML on your own, like or
… something like that. So, the design will look like this,
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"/>
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.";
}
}
If we run the application, it’ll look exactly like this.
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.
Now you’ve to select User Control and give it a name called “PopupPanel”.
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>
Here, we’ve Border brush, StacPanel which will bounded the TextBlocks and a Button. The design will look like this,
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;
}
We just make our first User Control. It’s really helpful when you need a custom control in your application.
Now, in our MainPage.xaml, we have to take a TextBlock which will have a header message called “Popup Window” and a Button which content is “Show Popup”. The design will look like this,
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"/>
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();
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 it’s called.
If we run the application, it’ll look exactly like this.
In the end, our full design will look like the picture below,
And if we run the complete application, it’ll look exactly like this.
Well, today we’ve talked about seven different 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 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.
You can download the full source code from here,
Download link: http://1drv.ms/1pEkRTM
Learn with Rahat Yasir 