Part 5 - Overview of the Common XAML Controls
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.
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#.
I’ll add a definition for a TextBox as follows:
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:
… which will create a method stub in the MainPage.xaml.cs code behind:
Here I’ll retrieve the number typed into the myTextBox and display it in the myTextBlock:
When I start debugging the app and tab the TextBox, I see that a keyboard appears with just numbers:
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:
In this case, I’ll change the InputScope=”Url” …
… 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).
Next, we’ll look at the ComboBox which allows me to display multiple possible options as a series of ComboBoxItems:
To retrieve the selected ComboBoxItem, I’ll add the following code to my myButton_Click event handler:
Also, to provide an initially selected / default value, I’ll set the IsSelected=”True” attribute value:
And when I run the app, notice that the ComboBox is already set to “Second Item”:
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:
The flyout panel only appears when you have five or more items. I’ll reduce this to just four ComboBoxItems:
And this time when I run the app, clicking on the ComboBox reveals a list of four items:
Next, we’ll look at the CheckBox. It is useful when you want to retrieve a yes or no answer from the user:
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:
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:
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:
Here I determine which RadioButton was checked:
When I run the app, I can see my selection and the associated text when I choose a RadioButton then click the Button:
I’ll add a few more RadioButtons:
And currently there are four all in one group:
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:
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:
Next, we’ll discuss the DatePicker which allows the user to enter a reliable date using a special flyout:
To retrieve the selected date from the DatePicker, I add the following C# code:
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:
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:
Next, we’ll talk about the TimePicker. This is almost identical to the DatePicker except it only deals with the Time part:
Here I’ll retrieve the current selected Time from the TimePicker and display it in the TextBlock:
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:
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:
Next, we’ll look at the Image control:
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:
Now I’ll edit the Image code I added a moment ago to set the Source attribute to: “Assets/sunny.png”:
When I run the app, I can see the image:
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.
When we run the app, you can drag the slider to the right (higher value) or to the left (lower value):
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:
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.
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:
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:
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:
… to create a method stub. Inside the method, I’ll add the following code:
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:
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.