Input Controls in Windows 10: Part 2

Introduction and Background  

 

Hello everybody, this is my second article about Windows 10 application programming. In the previous article of mine (Input Controls in Windows 10) I explained a few methods for getting input from a user, creating efficient forms for feedback and how to use various controls in different scenarios by editing out their properties. You also learned how to get confidential information from a user and how to use it in different contexts. I also provided a few Do's and Don'ts in that article of mine. 

In this article, I will focus on other input controls; that one was text-oriented. This article would be more like option-oriented. Such as provided a list of options and allowing the users to select from either one of them. You might have been through this stage also if you have ever programmed an application that gets user input. I would walk you through various scenarios and share some other tips with you so that you can also get started programming a Windows 10 application. Although the programming model is similar to Windows 8 and 8.1 because the underlying framework is the Windows Runtime. The Windows Runtime exposes some APIs and packages (namespaces) that we can use in our application to get started. I will show you the techniques that will make your application compatible with UI and UX guidelines in Windows 10 or to be specific, they should be complying with your own UI and UX guidelines. 

Let us get started.   

Main Theme

Self-quote: Before I hand over a knife to you, I must tell you what you are supposed to do with it! 

I will write an article for you, that you can use the source code from, but that is not my intention. I would love to guide you through various stages of programming, how to use a control and in which context. So that when you need to build your own application you know what you are doing. Usually programmers (beginners specifically) write lengthy code and then they get fed up with it. Because code is so complex, enterprise solutions require more hard work and maintenance. You cannot expect your code to always be saying Hello world, sometimes it might need to shake hands with the world. 

In this article, I will show you a few controls that can be used in a Windows 10 application and how you are meant to use them.

Selection types 

In this section, I will talk about controls that allow you to limit user's options to a few that are valid. In the text-oriented controls we did not have this feature and the user was free to enter whatever he wanted. In this control, we allow users to only select a valid option. Such as, your gender. You are either a male or a female.

Single Selection control

You might want your user to make one choice and then submit the form. In such cases you use a RadioButton. This control allows users to make a selection from a list, but the user cannot undo his action; cannot remove a selection. At least one item remains selected. You can somehow clear the list from code-behind. 

This control can be created using XAML markup. To do so you write the following code in your markup:

<RadioButton>Male</RadioButton>

For each item, you will re-write the same control element and each item would be displayed on the screen. Now, as for the example of mine, gender, I wrote code that shows two such controls, one for Male an another for Female. After rendering the window, I got this on the screen.

 

Now, the preceding two controls can be altered, but the selection cannot be removed. The controls remain checked, either Male or Female. You can create as many RadioButton controls as you want. 

Uses 

This type of control is used:

 

1. When you want to allow users to always provide a result. 
2. When you want users to select only one option. 

Multi-selection control

Next comes a multi-selection control. In a multi-selection control, you can ask your users to select multiple options. In such scenarios, you can use a CheckBox. A CheckBox allows users to select the item and deselect the item. This is why it is different from a RadioButton, the user can select and undo the action at the same time. 

A CheckBox can be used where you want to get a value for a single item, or for a list of items. For example, a todo list can have checkboxes in it. You have also used it on a website when you login and you check the Remember me button.  To create a CheckBox, you can use the following markup:

<CheckBox>Did you like this?</CheckBox>

This would render as an intuitive CheckBox as in the following:

 

The user can select this option or he can ignore it or he can even uncheck it later. You need to determine whether the user selected it or not or whether it remained untouched. If you go to the MSDN and try to look for the IsChecked property, you will see that it is Nullable<bool> type. Which means that you cannot use it in your code as a bool variable. You need to test its nullability also.

if(checkBox.IsChecked == true) {
   // Works
}

if(checkBox.IsChecked) {
   /*
    *  Doesn't work, because null cannot be resolved in bool
    * value so code gives error.
    */
}

So, you need to ensure that you keep this in mind. To check the multi-select, please see the following image: 

 

Uses 

This control can be used when you want:

 

1. The user to provide you with some feedback, not required feedback. 
2. To allow the user to remove the selection also. 
3. To get multiple answers from users, like from a list. 

 Dropdown menus

Sometimes you also want to provide users with a facility to select an option from a dropdown. Such as month, or hour or other similar format. This can be done using RadioButton or CheckBox. But adding too many controls is never a good idea. In such scenarios you use Dropdown menus. These menus allow you to provide multiple list items as resources and the framework would wrap them in a single control. You can ask the user to select from the list and provide you with feedback. 

In the Windows Runtime a control for such functionality is ComboBox, you can use this control  to hold multiple items, known as ComboBoxItems. These items are the options that a user can select from. Once selected, the user cannot de-select his choice but he can still change his choice and select another item. 

In XAML you can create a very simple dropdown using the following markup:

<ComboBox>
      <ComboBoxItem>Month</ComboBoxItem>
      <ComboBoxItem>January</ComboBoxItem>
      <ComboBoxItem>February</ComboBoxItem>
      <ComboBoxItem>March</ComboBoxItem>
      <ComboBoxItem>April</ComboBoxItem>
      <ComboBoxItem>May</ComboBoxItem>
      <ComboBoxItem>June</ComboBoxItem>
      <ComboBoxItem>July</ComboBoxItem>
      <ComboBoxItem>August</ComboBoxItem>
      <ComboBoxItem>September</ComboBoxItem>
      <ComboBoxItem>October</ComboBoxItem>
      <ComboBoxItem>November</ComboBoxItem>
      <ComboBoxItem>December</ComboBoxItem>
</ComboBox>

Remember, we can always create the same functionality using the RadioButtons. They also allow users to select only one at a time. But, that would not be a good UI. This lets users swipe through multiple items and select the one they like.

We can use IsSelected="True" to select one item initially. The user can change the selection when he wants to.

 

Initially the controls is like this:

 

The user can loop through the valid values and select the one that is suitable.

Uses 

This control can be used:

 

1. When you want to provide the user with a very long list of values. 
2. When you want the user to be able to provide only one value. 
3. When you do not want to enable the user to submit the form without selecting this field. 
4. This can be used to select various months for date of birth. Note: I will post another article for Calender, Date and Time controls in XAML.

Points of Interest

As far as you have learned, the input controls are based on options from which users can select either one or multiple options. You can always change their properties and use them to work any other way, for example you can also write programs to allow only one CheckBox to be selected in a panel. That would be as if you were using RadioButtons but would be a bad UX.