In the previous chapter, you learned how to start your adventure of developing applications for smartphones, tablets, and desktops running on the Windows 10 operating system. In the next step, it is crucial to get to know how to design particular pages within the application to provide the user with a convenient user interface that works smoothly on screens with various resolutions.

Fortunately, designing the user interface is really simple using the XAML language and Microsoft Visual Studio Community 2015. You can use a set of predefined controls, such as textboxes, checkboxes, images, or buttons. What is more, you can easily arrange controls in various variants, either vertically, horizontally, or in a grid. This is not all, because you can prepare your own controls that could be placed on many pages within the application. It is also possible to prepare dedicated versions of particular pages for various device families, such as mobile or desktop.

You have already learned how...

When developing applications, you can use a set of predefined controls among which a button exists. It allows you to handle the event of pressing the button by a user. Of course, the appearance of the button can be easily adjusted, for instance, by choosing a proper background or border, as you will see in this recipe.

The button can present textual content. However, it can also be adjusted to the user's needs, for instance, by choosing a proper color or font size. This is not all, because the content shown on the button does not have to be only textual. For instance, you can prepare a button that presents an image instead of text, text over an image, or text located next to the small icon that visually informs about the operation. Such modifications are presented in the following part of this recipe as well.

Very often, it is necessary to show some labels on the page. Such a task can be accomplished using the TextBlock control, which is the main subject of this recipe. Here, you will learn how to display static text on the page as well as how to format it.

Another task that is frequently performed in applications is entering different types of information, such as a first or last name, an e-mail address, or a phone number. You could easily allow a user to type a text using the TextBox control. In this recipe, you will learn how to place it on the page, modify its appearance, as well as handle events related to typing data within such a control.

The previously described TextBox control is great for entering various kinds of information. However, it is not a perfect solution for typing passwords. To handle this type of information, the PasswordBox control is available. You will learn how to use it in this recipe.

In the previous recipes, you learned how a user can type text values and passwords within your application. But what about other types of data, such as a confirmation of accepting the rules? In such a case, the CheckBox control can be used, as you will see in this recipe.

In many forms, it is necessary to choose a value from a predefined set, for example, in the case of a category of news or a supported language. Such a task can be accomplished using the ComboBox control. It allows you to choose a particular value from a drop-down list. In this recipe, you will learn how to use it and adjust its appearance.

In the case of the collapsed ComboBox control, only one item is presented. However, if you want to show more items as well as allow to select multiple elements in the same time, you can use ListBox. The usage of this control is explained in this recipe.

Modern applications often contain attractive designs that include images. In this recipe, you will learn how to present images in your application using the Image control.

You have learned how to use the XAML language to place controls on the page and configure them. However, it does not mean that controls must only be created in a declarative way using XAML. In this recipe, you will learn how to create a button and add it to the Grid control programmatically, using the C# language.

Pages often contain many controls that must be arranged in some way. One of the most natural ways is arranging them vertically, one below another. This linear method is supported by the StackPanel control. In this recipe, you will learn how to use it to prepare the page with a registration form consisting of a few other controls, namely TextBlock, TextBox, PasswordBox, ComboBox, CheckBox, and Button.

    <Page (...)> 
        <StackPanel Background="White" Padding="20"> 
            <TextBlock 
                Text="Create an account" 
                FontSize="26" 
                Margin="0 0 0 20" /> 
            <TextBox 
                Header="Login" 
              ...

Apart from arranging controls vertically, it is possible to place them in a linear horizontal way, where a control is placed on the right-hand side of the previous one. This task can be accomplished using StackPanel as well, as shown in this recipe.

        <Page (...)> 
            <StackPanel 
                Orientation="Horizontal" 
                Background="White" 
                Padding="20"> 
                <TextBlock 
                    Text="Grade:" 
                    VerticalAlignment="Center" /> 
                <Button Content="1" Margin="20 0 10 0" /> 
                <Button Content="2" Margin="10 0" /> 
                <Button Content="3" Margin...

As already mentioned, the StackPanel control does not automatically allow you to scroll its content. For this reason, when the screen is not big enough, some parts could just disappear. Of course, such a situation should not occur. For this reason, in this recipe, you will learn how to use ScrollViewer to scroll the photo gallery created as a collection of images, presented in StackPanel.

One of the important tasks while developing applications is to ensure the design is consistent within the whole solution. However, copying and pasting the same code in several places, for instance, for each button located on the page, is not a suitable solution. In the case of any modifications, you will need to perform many changes and ensure that all the occurrences of a previous value have been replaced correctly. For this reason, it is a beneficial approach to use styles.

In this recipe, you will learn how to apply page-limited styles to the controls on the page. What is more, two kinds of styles will be taken into account: styles applied automatically to all the controls of a given type and styles applied only to a particular subset of controls.

As an example, you will create a photo gallery with the header. Each photo is represented by an Image control placed within Border. A style should be automatically applied to all Border elements to set its borders...

Page-limited styles are a powerful mechanism to design the various elements on the page consistently. However, what should you do to make the whole application consistent? Do you need to copy such styles to all the pages? Absolutely not, because you can move the definition of styles to the App.xaml file to use them in the whole application. You will learn how to do it in this recipe.

As an example, you will create a simple menu page with a few buttons, such as Dashboard, News, and Gallery. To make the design consistent across the whole application, all buttons should have the same appearance specified by the global style.

According to the information presented in the two previous recipes, you can use styles to easily adjust the design of your application. However, do you know that you can also apply styles programmatically? Thus, you can dynamically control the appearance of user interface. In this recipe, you will learn how to get data of the style defined in the page resources and apply it to an element with a suitable type.

As an example, you will prepare a page that presents four images. By default, they have a black border with a width of 3 pixels and its opacity set to 30%. After clicking on each image, its opacity should be changed to 100% and the border color should be set to blue. You will solve this problem by defining two styles, namely for active and inactive elements and applying a proper style after tapping on the photo.

The arrangement of controls in a linear way is not the only possible option. You can also arrange controls in a grid by specifying in which rows and columns each control should be located. What is interesting is that the available solution gives developers a lot of flexibility, such as defining the width of columns and the height of rows. In this recipe, you will learn how to define a grid and arrange controls within it.

As an example, you will design a simple calculator with TextBlock for the results and 16 Button controls (with 0-9 digits, +, -, *, /, =, and a comma).

In some scenarios, it may be necessary to place controls in absolute positions in a given area. Such a task can be performed using the Canvas control. In this recipe, you will learn how to place a rectangle and an ellipse over the image in a fixed location, specified in pixels from the top-left corner.

When a user of your application enters a particular date or time, such as a birth date or a time when an order should be delivered, it is a good idea to provide a built-in mechanism of choosing the date and time. Such mechanisms allow a user to select them in a comfortable way, without the necessity of entering such information in a textual form. In this recipe, you will learn how to choose a date either from the calendar or a list and how to specify time by choosing a particular hour and minute.

If you want to allow the user to have quick access to some useful operations, you can equip the page with either the top or bottom app bar. Such bars are collapsed by default, but they can be easily expanded by the user by clicking on them. In this recipe, you will learn how to add icons to both the top and bottom app bars, as well as how to handle the scenario of pressing particular icons.

While developing applications, you can use a set of predefined controls, but it is also possible to define your own ones. Such an approach is really beneficial and important. In this recipe, you will learn how to create your own user control (representing a tile with an icon and a title), define its properties, and place it on the page. What is more, you will see how to use the NuGet Package Manager to download additional packages.