Part 5 - Overview of the Common XAML Controls

Sign in to queue

Description

Download the source code for this lesson at http://absolutebeginner.codeplex.com/

In this lesson we’ll examine many common XAML controls used for basic input and interaction in Phone apps.  We’re doing this as we prepare to build our first app of significance and, in just a lesson or two, a tip calculator.  To do this, we're going to need to use different types of controls than what we've worked with up to this point.  Up to now, we’ve only used the Grid, the StackPanel, the Button, and the TextBlock. In this lesson we’ll overview many common XAML controls.  We’ll continue to learn new XAML controls throughout the remainder of this series as well.

I'll start by creating a new (1) Blank App project template named (2) CommonXAMLControls and I’ll (3) click the OK button to create the project.


clip_image002

I’ll use a TextBlock and a Button control to retrieve and display values inputted in the controls we’ll learn about.  This will demonstrate how to retrieve values from these controls programmatically in C#.

clip_image004
I’ll add a definition for a TextBox as follows:

clip_image006

The TextBox will allow a user to type in text using an on-screen keyboard.  The key to this example is the InputScope=”TelephoneNumber”.  As we’ll see in a moment, changing the InputScope changes the types of information (or rather, the keyboard) that is displayed to the user.

Note that myButton’s Click event is handled.  We’ll need to create an event handler method stub.  To do this, I’ll right-click the value “myButton_Click” and select “Go To Definition” from the context menu:


clip_image008

… which will create a method stub in the MainPage.xaml.cs code behind:


clip_image010

Here I’ll retrieve the number typed into the myTextBox and display it in the myTextBlock:


clip_image012

When I start debugging the app and tab the TextBox, I see that a keyboard appears with just numbers:

clip_image014

I will click the Button to display the number I typed into the TextBox retrieved and displayed in the TextBlock.

There are many different InputScope keyboard available.  In the XAML editor, I can rely on Intellisense to help me see the possible enumerated values:


clip_image016

In this case, I’ll change the InputScope=”Url” …


clip_image018
… and this time when I run the app, I can see that I have a keyboard that is geared towards helping me type in URLs (note the .com key near the space bar at the bottom).

clip_image020

Next, we’ll look at the ComboBox which allows me to display multiple possible options as a series of ComboBoxItems:

clip_image022

To retrieve the selected ComboBoxItem, I’ll add the following code to my myButton_Click event handler:

clip_image024

Also, to provide an initially selected / default value, I’ll set the IsSelected=”True” attribute value:

clip_image026

And when I run the app, notice that the ComboBox is already set to “Second Item”:

clip_image028

When I click on that item, a flyout control appears displaying all the possible items in the ComboBox.  I can select one of them and click the checkmark icon in the command bar to accept that choice:

clip_image030

The flyout panel only appears when you have five or more items.  I’ll reduce this to just four ComboBoxItems:

clip_image032

And this time when I run the app, clicking on the ComboBox reveals a list of four items:

clip_image034

Next, we’ll look at the CheckBox.  It is useful when you want to retrieve a yes or no answer from the user:

clip_image036

To retrieve the value from the CheckBox, I’ll use the IsChecked property.  Here, I use the decision operator to return one of two strings depending on whether IsChecked is true or false:

clip_image038

When I run the app and check the CheckBox, then click the Button, I can see the value returned in each “state” of the CheckBox:

clip_image040

Similar to the CheckBox is the RadioButton.  The only difference: RadioButtons work in groups so that no two RadioButtons in a group can be selected at the same time.  This is useful where you want to present a limited set of options to the user (otherwise you should use the ComboBox).  Here I create two RadioButtons:

clip_image042

Here I determine which RadioButton was checked:


clip_image044

When I run the app, I can see my selection and the associated text when I choose a RadioButton then click the Button:

clip_image046

I’ll add a few more RadioButtons:

clip_image048

And currently there are four all in one group:

clip_image050

If I want to split these four RadioButtons into two separate groups, I’ll give the last two RadioButton controls a GroupName.  The GroupName must be spelled the same in order for them to be grouped together:

clip_image052

Note: If you don’t add a group name to RadioButtons, they will be added to a default group.  That’s why our previous example worked.

When I run the app now, I have two groups of RadioButtons, each group allowing a selection of a single RadioButton:

clip_image054

Next, we’ll discuss the DatePicker which allows the user to enter a reliable date using a special flyout:

clip_image056

To retrieve the selected date from the DatePicker, I add the following C# code:

clip_image058

When I run the app and tap the DatePicker, a flyout displays a three-column selection control.  I can change the month, day and year independently by scrolling the date part up or down.  Once I’ve found the date I’m looking for, I select the check mark icon to accept the selection or the x icon to cancel:

clip_image060

When I select a date and click the Button, I retrieve the date and display it in a raw format.  I could use the many built-in DateTime formatting options on this string before I display it or I could use String.Format’s special formatting codes:

clip_image062

Next, we’ll talk about the TimePicker.  This is almost identical to the DatePicker except it only deals with the Time part:

clip_image064

Here I’ll retrieve the current selected Time from the TimePicker and display it in the TextBlock:
clip_image066

Again, when I run the app and tap the TimePicker, I see a three-column display of time parts, the hour, minute and AM/PM:

clip_image068

I can choose a time, then tap the check mark to accept the new time or the x icon to cancel the selection.  When I choose a time and click the Button, I retrieve the Time in a raw format.  Again, I could use the built-in DateTime functions or String.Format to nicely format the time as desired:

clip_image070

Next, we’ll look at the Image control:

clip_image072

To demonstrate this control, I’ll need to add the sunny.png file from the Assets folder in the Lesson5.zip file that accompanies this lesson.  You can drag that sunny.png file from Windows Explorer into the Assets folder of the Solution Explorer.  When you’re finished you should see the image file listed in your Assets folder like so:

clip_image074

Now I’ll edit the Image code I added a moment ago to set the Source attribute to:  “Assets/sunny.png”:

clip_image076

When I run the app, I can see the image:

clip_image078

Later in this series, we’ll learn how to programmatically set the Source property of the Image control by constructing a URI object.  More on that later.

Next, we’ll work with the Slider control which allows a user to choose a value between a Minimum and Maximum value.  In this case, the Minimum will be 0 (the default) and the Maximum will be 100.

clip_image080

When we run the app, you can drag the slider to the right (higher value) or to the left (lower value):

clip_image082

The Slider simplifies numerical input as long as there’s only a limited set of values and precision is not important.

Next, I’ll demonstrate the use of a ProgressBar.  You typically use a ProgressBar to display feedback to the end user as to the progression of a given operation.  As the bar creeps from left to right, it lets the user know the approximate progress and pace of the operation.

In our case, we’ll use the ProgressBar to mirror the current value of the Slider control.  In other words, as you drag the Slider left and right, we’ll retrieve the value of the Slider and set it to the value of the ProgressBar.  We certainly could accomplish this in C#, however in this case we’ll use a special feature of XAML called binding.  Here, we’ll set the Value attribute of the ProgressBar to the Value of the mySlider control using a special binding syntax:

clip_image084

We’ll learn more about this binding syntax later.  For now, when we run the app and change the value of the Slider, the ProgressBar’s value changes as well.

clip_image086

Most of this series will rely on binding, but not to other controls.  Rather, we’ll be binding to data that represents information our app will manage in memory and to the Phone’s storage.

Similar to the ProgressBar is the ProgressRing.  While the ProgressBar provides feedback as to the estimated completion of a given task, the ProgressRing only provides feedback to the user that the operation is in progress with no indication how long until completion.  We’ll add the ProgressRing’s XAML to our MainPage.xaml:

clip_image088

And I’ll pair this control up with another common control, the ToggleButton.  The ToggleButton has three states: On, Off and Unknown.  First, we’ll add the ToggleButton:

clip_image090

I’ll want to respond each time the user taps the ToggleButton, so I’ll handle the Click event.  Once again, I’ll right-click the event handler method name “myToggleButton_Click” and select “Go To Definition” from the context menu:

clip_image092

… to create a method stub.  Inside the method, I’ll add the following code:

clip_image094

Based on the IsChecked property of the ToggleButton, I’ll set the ProgressRing’s IsActive property to true (turns it on) or false (turns it off).  When I run the app and click the ToggleButton to the On state, the ring pulsates:

clip_image096

These are some of the very most common controls. Some of them like our DatePicker, TimePicker, the ComboBox employ other controls like the Flyout that will display other options on another “page” and when you make the selection, it will return to the original page with the given control set to the selection the user made.

There are literally hundreds of additional properties, dozens for each of the controls that are displayed here for specific purpose, and as we go through the series you'll learn a few.  But ultimately, if you can imagine some desired interaction or display based on previous experience working with the Phone or with apps in general there's probably going to be a property that will allow that will facilitate that feature.  I recommend perusing the list of properties for a given control to get an idea of what it can do.  When you come across a property you do not understand, take a moment and search MSDN for more information to see if it can help you accomplish what you need.

Embed

Download

Download this episode

The Discussion

  • User profile image
    VitaliyB

    These lessons are already a great improvement over the previous one. I really enjoy going over the controls and learned about converting the data type, by adding the data type in parenthesis before the variable and the nullable values such as "bool?" vs "bool".

  • User profile image
    Farrukhs

    Hi Bob

    I am a big fan of yours. Another great video.  I would like to know, if you have any plans of making a similar video series using JavaScript.

    Thanks

  • User profile image
    leopoldbirk​holm

    Great presentation. I learned a lot. Thank you Bob. :)

  • User profile image
    Gustavo

    Great video....thanks a lot Bob

  • User profile image
    arnabjoti

    I'm new with XMAL and learned a lot from your videos. There's just one question related to this video I guess.

    You showed how to use a "Toggle Button" but I was going for "Toggle Switch".

    I couldn't find how to trigger a "Toggle Switch Event" which would control the active mode of the progress ring.

    I would really appreciate your help on this. :D

  • User profile image
    Leela Rani

    Hi bob, I am a Great fan of you. I learnt a lot from your series. It was so useful.

  • User profile image
    Archee

    For some reason that does not work for me:
    Value="{Binding ElementName=mySlider, Path=Value, Mode=OneTime}"
    what works instead is this (done from Properties window):
    Value="{Binding Value,ElementName=mySlider}"

    This is kind of strange, because when I do the binding from Properties window I select OneWay, which gives the second/working form.

    (Microsoft Visual Studio Express 2013 for Windows
    Version 12.0.30501.00 Update 2
    Microsoft .NET Framework
    Version 4.5.51641)

  • User profile image
    Marios Katsis

    @Archee the mode is OneWay not OneTime.

  • User profile image
    Saikiran

    Hi Bob,

    Can You please explain what is the difference between the normal visual c# app which you are creating and silver light app which is shown in options while creating new project.

    Thanks in advance

  • User profile image
    enyew

    i am computer science student in www.bdu.edu.et
    so i learnt more with event driven course by c#
    think u!!!!!!!!!!!!!.

  • User profile image
    enyew

    but i hav,t any pc please help me!!!!!!!!!!!

  • User profile image
    Muhammad Iqbal Marath

    Very informative, thanks Bob for this

  • User profile image
    Muhammad Iqbal Marath

    Hi Bob, you are my favourite teacher. I always discuss about your tutorials with my colleagues and friends. I have installed the Microsoft visual studio 2013 community version on my dell Inspiron laptop. I have created the windows phone application successfully but I am not able to test it on emulator. I am getting the error my system required Hyper-V. I searched a lot, tried my best but failed. Discussed with my friends but nobody knows it's solution. Please help me.

  • User profile image
    iknlaxmi

    @Muhammad Iqbal Marath

    Hi

    Step 1:

    Enable virtualization in BIOS settings

    Step 2:

    enable Hyper‑V on Windows 8.1

    1. In Control Panel, tap or click Programs, and then tap or click Programs and Features.

    2. Tap or click Turn Windows Features on or off.

    3. Select Hyper‑V, tap or click OK, and then tap or click Close.

    4. Shut down your PC, and then restart it.    

    Step 3: check whether your pc supports SLAT and virtualization by running coreinfo.exe

    On the error popup Microsoft has given link for Hyper-V requirements.please follow those steps,It will solve and coreinfo.exe available in this link.Above 3 steps i have followed and emulator start working.

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.