Input Controls in Windows 10

Introduction and Background

 

This is my first article covering Windows 10 application programming. This article introduces the sections of Input controls provided in Windows 10 as a part of the Windows Runtime API. Windows Runtime can be developed using XAML for UI. If you have ever developed an application using Windows Presentation Foundation or Windows 8 (Universal application concept) then you are already familiar with XAML programming.

 

I want to cover the most-used and required input controls that a developer commonly requires to build their GUI. For example, you might want to generate a form that uses the following:

1. One or more input fields; text boxes. 
   Input fields allow your users to enter free-form text. You can also add a mask to the input field! Such as in the case of phone numbers. 
2. Selection options; radio buttons
   You can also provide your users with a few options to select a value from, radio buttons are one of them. 
3. Selection of a list; check boxes
   You can also allow your users to select multiple options to create a list. 
4. File selection; file selection dialog. You can use these objects to select a file from your file system. The Windows.Storage namespace plays a vital role. 

I will cover these classes, objects and methods. Also a few how-to sections will be provided in this article. Continue reading for more.

 

Techniques for getting input

 

Nearly every application is designed in a way to get input from users, such as input ranges from mouse interactions and keyboard input. You can create controls, layouts and UI to allow users to provide you with feedback, input, response or whatever your application context wants to call it. But before you can create your own application, you must understand that user-experience rules apply to this field also. You cannot just create a form that is unclear to the user, that is hard for the user to use and provide you with feedback, or there are too many scrolls present in the UI.

 

You must keep your form very elegant, short and compact but still very helpful for yourself. You can create your own input form using my own tip of Five step form creation! 

 

Figure 1: Form Creation 

 

In this 5-step procedure of form creation, you are required to focus on Steps 1 and 4 as a developer. You should consider contacting your UI and UX team for the remaining steps (Step 2 and 3). Step 5 is just the output. To generate multiple forms, you just need to change Step 2 Step 3, keeping Step 4 in mind. Step 4 would provide you with an idea of how users interact with controls. Step 2 and Step 3 are done by the UI or UX team. Your job (as a developer) is Step 1 and Step 5. 

 

While developing a simple form, your application is exposed to many users. Some might be valuable users, some just guests and some might be looking for a loophole in your application. Although frameworks try to handle most scenarios where your application might be exploiting the data. But still, any potential user is able to provide some invalid input to break the logic. You need to ensure your application is resilient to such conditions. A very common example of such a scenario is when you ask your user to enter his age in a text box. Now, remember that a text box provides a string-type value. You would need to convert that value to an integer. Great, but what if the user enters non-numeric data? A Convert object won't be able to convert the data to an integer and would break your application. In such conditions, Step 2 tells you to not use a text box, Instead use, for example, a Calender object (XAML provides a Calender object) and get the date of birth of the user. Then calculating the age from the date of birth isn't a very tough job, right? :) 

 

Similarly, some scenarios do not break your application. Instead they simply cause a bad user-experience. For example, for a rating control. You can use 5 radio buttons and provide the user with information of that has value 5 that has 1. You can also do that by asking the user to enter a value (from the range 1-5), or you can provide the user with a Slider object, or you can use a ComboBox. All of them are valid and applicable controls. But they have some sort of bad user-experience in them. However, radio buttons are the best candidates (pun intended). There is no best control, just better controls.  

 

Enough clarifications of good and bad user-experience for forms and feedback input options. It is your job as a developer to take care of users and their requirements. Try to create a form that is fully capable of providing you with the entire required feedback, but at the same time try to keep your form short. You can ask for some literature guy for this help, as to write short questions that fully provides the idea of what is being asked and the answer should be able to include everything that is required. 

 

XAML Controls

 

In this section I will talk about XAML controls, that are offered in Windows Runtime APIs and can be used to design and develop our applications for the sake of getting input from users. I will guide you through various controls, how to use them a quick tips for their properties that you can edit and also in which scenarios are they used or are good to be used. 

 

In this section, I will talk about text-inputs that are of multiple types, the ones explained here are used generally and usually by developers. I would talk about other input controls in my next article. Another article would also contain a source code example of a working sample that gets input from the user and allows us to store the input in a separate database, send in an e-mail or do whatsoever we want to do with it. Stay tuned to this series of articles.  

 

Note: All of the controls were rendered using Light theme of Windows application, rendering of controls in Dark theme would be indeed different. 

Normal text input 

To get normal text input, for example name, you can use a TextBox control of the Windows Runtime. A TextBox control is a control that allows users to enter free-form text. You can set some other properties of this text box control depending on your own requirements.  You can create a simple TextBox control using the following code.

<TextBox Height="25" Width="500" Text="This is a textbox, you can also edit it. :)"></TextBox>

Once the application runs, it would take the following form after rendering. 

 

Figure 2: Texbox 

 

Now let us talk about the control's visual effects and themes settings.  

1. The theme settings are by default, you can however change the theme for individual controls or you can create a resource for style and apply that theme to your controls. It depends on your needs. I have used a light theme, you can use a dark or custom themes for Windows controls. 
2. On the right side, you will see a "x" sign. That is to clear the value of the Text property.

So, this clarifies the TextBox control.  Quite a simple control to use. Now let us consider making a few changes to the control. 

Changes in properties

Let us make a few changes to the properties of the object and see what we get. We will change the height and another property to allow the control to accept when the user presses the Enter key so that he can go to the next line and the wrapping property to allow the control to wrap the text also when the user reaches the end of the line. 

 

Our new source code is as in the following:

<TextBox Height="250" Width="500"
                 AcceptsReturn="True"
                 Text=""
                 TextWrapping="Wrap"></TextBox>

Now once this code renders, it provides us with more options to provide free-form text input. For example, you can get an entire CV from the user in this one control! 

 

Figure 3:  code renders

 

This control wraps the words when the user hits the right-most corner of the control. It also provides the user with the ability to go to a new line if he wants, such as in "Hello,". This is the same control but with a few other options. You can make other changes if you want to. 

Uses 

1. To get free-form input, such as optional messages. 
2. To get long messages, CV is a valid candidate. 

Auto-complete forms

Sometimes you want to provide users with the ability to select the input from a range or to enter their own queries. In the Windows Runtime a control, AutoSuggestBox, is present that makes suggestions for users as they enter their query. It is similar to Google's search query. You enter some text, it provides you with suggestions that you might be interested in.

 

Now, this is a little complex since it requires some data to be provided to the user. You need to the variables and other required data in the form of a list, that this control would use and provide results to the user. Another thing to note here is that this control doesn't change its suggestions as user enters. It simply just shows the suggestion. So, for a good UX you would also need to change the list being used at the back end. I would walk you through multiple stages and sections of this also.  

 

First of all, let us provide the code for XAML markup at least as in the following:

<AutoSuggestBox Height="34" Width="500"
                        Name="autoSuggestBox"
                        Padding="5"
                        ></AutoSuggestBox>

Now let us render the control and see what it has for us. (Note: I would enter some text to skip one step.)

 

 

Figure 4: Some text to skip one step

 

Now if you look at it, you will see that it does provide us with some suggestions. But those suggestions are not related to our query at all. We are not interested in Afzaal, Ahmad or even Zeeshan. All we are interested in are records for "Hello", such as "Hello world". But this control is showing us all of the records, the entire list. We need to update this problem and ensure that our list is shown depending on the query of the user. A little hack, an easy one, is shown in the following:

private List<string> list = new List<string>();
        public MainPage()
        {
            this.InitializeComponent();

            list.Add("Afzaal");
            list.Add("Ahmad");
            list.Add("Zeeshan");
            list.Add("Pakistan");
            list.Add("Microsoft");
            list.Add("C# Corner");
            list.Add("Eminem");
            list.Add("Marshall Mathers");

            // Do not set up anything right now!
        }

        private void autoSuggestBox_KeyUp(object sender, KeyRoutedEventArgs e)
        {
            string query = (sender as AutoSuggestBox).Text; // Get the text

            // Create a new private list to be applied
            var _list = new List<string>();

            if(query.Length > 0)
            {
                // Some query
                foreach (var item in list)
                {
                    // For each of the item in the list;
                    // check whether it is a valid candidate or not

                    if(item.Trim().StartsWith(query))
                    {
                        _list.Add(item.Trim());
                    }
                }
                if(_list.Count > 0)
                {
                    autoSuggestBox.ItemsSource = _list;
                } else
                {
                    autoSuggestBox.ItemsSource = new List<string> { "No records found." };
                }
            } else
            {
                autoSuggestBox.ItemsSource = new List<string>() { "No records found." };
            }
        }

I have posted the code along with the constructor for the MainPage. You will now be able to see how it worked. 

1. I created a sample list, the actual list would hold the main data. It can be coming from a database. 
2. I created an event handler that would handle the events that are raised when the user enters some query. Then it would check what output to show. 
3. Finally, it would generate a list that would be applied as the item's source for the auto-suggest box. Pretty simple, isn't it? 

Let us now see what that actually looks like. 

 

 

Figure 5: TextBox Eminem

 

Great, the application shows me what I want to get, Eminem! :)

Uses 

1. Where you want to provide users with suggestions, such as search results. 

Confidential information

Usually you also want to get confidential information from users, such as their words. If you are creating an application for Windows 10 that must communicate to an external website that requires a word and username. You would never be using the same TextBox control for both, username and word. word needs to be hidden and private.

 

You can use wordBox control in the Windows Runtime to create an input element that gets confidential information from the user. In XAML markup we can create a simple wordBox in the following way: 

<wordBox Height="25" Width="500"
                     ></wordBox>

The following is the rendered view of wordBox (containing some information):

 

Figure 6: wordBox 

1. wordBox masks the input text and saves it from being shown to the user.  However, you can reveal the text if you want to, by clicking on the peak button (eye) and it would temporarily show you the information entered. 
2. The Peak button is available to reveal the text, use it with care!

In the next section we will see how to change the character being used in the word box. :) 

Changing the character used

In XAML, you can change the character being used to be displayed instead of each character of information. In the following wordBox, if we render the preceding control, we will be able to see the changes.

 

<wordBox Height="25" Width="500"
                     wordChar="$"></wordBox>

The following wordBox contains some text in it: 

Figure 7: wordBox2

 

Now the word box shows a dollar sign. You can use such type of word box to get an amount to be transferred while keeping it a secret.

 

Points of interest 

 

We have learned how to create input fields and input forms, a five steps rule. Later you have learned how to create controls in XAML for Windows 10 applications. You have also learned how to edit the properties of controls to ensure that they fit our needs. You were taught to be sure of your common sense to select from a variety of controls. 

 

You have also learned how to create a control that provides search results to users and how to update the suggestions based on a query that the user has provided us with. You were also taught how to manage confidential information and how to change the character shown to the user when he enters confidential information.

 

Stay tuned for more such controls and other Windows 10 programming tips. Thank you!