Windows Application Development Cookbook

To step through this recipe, you need a PC that meets the requirements that are necessary to run Microsoft Visual Studio Community 2015.

To install the IDE, you need to perform the following steps:

Microsoft Visual Studio Community 2015 allows you to develop various kinds of applications, not only solutions running on devices with the Windows 10 operating system. What is interesting is that it is also possible to develop applications for Android and iOS platforms using the same IDE, by applying the Xamarin platform. A set of suitable tools for this purpose can be installed by selecting the Cross Platform Mobile Development option while installing the IDE, as shown in the preceding screenshot (on the right). If you want to learn more about Xamarin, you could visit https://www.xamarin.com/ .

What is more, Microsoft Visual Studio Community 2015 also supports other types of applications, such as web and desktop applications, as well as allows to use various languages, including C#, C++, and even F#. If you want to learn more about the various possibilities of the IDE, let's take a look at https://www.visualstudio.com/ .

Of course, during the installation of the IDE, you can select more features than mentioned in this recipe. In such a case, apart from developing Windows 10-based solutions, you can use the same IDE for other development scenarios.

To use this recipe, you just need Microsoft Visual Studio Community 2015 installed, as explained in the previous recipe. No other prerequisites are required.

To arrange windows, you need to perform the following steps:

It is important to prepare a suitable arrangement of windows that allows you to work with projects in a comfortable way. What is worth mentioning is that the arrangement of windows will automatically change in some special scenarios, such as debugging, and some new windows, strictly related to the given scenario, could appear on the screen. Their aim is to help a developer perform some specific tasks. You will learn how to run the application in the debug mode in the following part of this chapter.

To use this recipe, you just need Microsoft Visual Studio Community 2015 installed, as explained earlier in this chapter. No other prerequisites are required.

To create a new project, you need to perform the following steps:

It is worth mentioning the structure of the automatically generated solution to learn more about the various files that you will see while developing UWP applications for the Windows 10 platform. You could easily browse through the solution with the Solution Explorer window, which you can open by navigating to the View | Solution Explorer option from the menu.

The automatically generated structure of the solution is shown as follows:

At the top, you have the CH01 solution that contains only one project, also named CH01. Just after its name, there is an indicator that it is the Universal Windows project, thus it should work on various devices, such as smartphones, tablets, and desktops.

The first group within the project is named Properties. It contains two files, namely AssemblyInfo.cs and Default.rd.xml. This group provides information about the assembly with your application along with runtime directives. In most cases, you will not need to modify such files on your own.

The References group performs a very important role because it informs which additional references are used by the application. Such references may include your own class libraries or pre-prepared solutions available for developers. By using packages from the huge number of available ones, it is possible to significantly speed up development as well as limit the chance of introducing bugs while developing such software on your own. What is more, the IDE is supported by the NuGet Package Manager and can find and install packages. You will learn how to use it in the Creating and using a user control recipe in Chapter 2, Designing a User Interface.

The third group is named Assets and contains a set of images necessary for the application, such as for the splash screen, tiles, or logo. Of course, you need to prepare suitable graphics before submitting the application to the store.

The App.xaml file uses the XAML language. You can use this file to define the resources that will be shared between various pages of the application, not to define them multiple times in various files, as shown in the Defining a global style recipe in Chapter 2, Designing a User Interface. Apart from the App.xaml file, there is the App.xaml.cs file, which contains C# code handling a few scenarios regarding the application, such as its launching.

The MainPage.xaml file is another file with XAML-based content. It represents the first page added automatically to the project. By default, it does not contain any controls, except a grid with a specified background color. You will learn more about this control in Chapter 2, Designing a User Interface. Similarly, as in the case of the App.xaml file, the MainPage.xaml file is supported by the dedicated .xaml.cs file, namely MainPage.xaml.cs. It contains the C# code regarding this page.

Among other files, you can also find Package.appxmanifest. It specifies the various properties regarding the application. You will take a look at the various settings available in this file in the Adjusting the manifest file recipe in Chapter 9, Testing and Submission. At the end, it is worth mentioning the project.json file with configuration of the project, including dependency to Microsoft.NETCore.UniversalWindowsPlatform.

To step through this recipe, you only need the automatically generated project.

To run the application either on an emulator or on a real device, you need to perform the following steps:

To step through this recipe, you only need the automatically generated project.

To add a new page to the project, you need to perform the following steps:

The files regarding the default page, both .xaml and .xaml.cs, are automatically added to the main directory. However, you do not need to place the files that represent the page here. You could locate such files in a dedicated directory, such as Views. You will learn how to create a new directory as well as place the .xaml and .xaml.cs files there in the Creating the view model for a page recipe in Chapter 3, MVVM and Data Binding.

To step through this recipe, you only need the automatically generated project.

To place a control on the page, you need to perform the following steps:

Adding controls by dragging them from the Toolbox window causes the creation of a suitable part of the XAML code. In the case of the exemplary button, the following code is generated automatically:

    <Page 
     x:Class="CH01.MainPage" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="using:CH01" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup- 
               compatibility/2006" 
     mc:Ignorable="d"> 
        <Grid Background="{ThemeResource  
              ApplicationPageBackgroundThemeBrush}"> 
            <Button  
             x:Name="button" 
             Content="Button" 
             HorizontalAlignment="Left" 
             Margin="164,242,0,0" 
             VerticalAlignment="Top" /> 
        </Grid> 
    </Page> 

As you can see, the Button control is added within Grid. Its name is set to button (x:Name) and its content is set to the Button text (Content). Its location within the grid is specified by margins (Margin), given in the following order: left (164 pixels), top (242 pixels), right (0 pixels), and bottom (0 pixels). What is more, horizontal and vertical alignments are set (HorizontalAlignment and VerticalAlignment, respectively).

The graphical editor available in Microsoft Visual Studio Community 2015 has a set of really useful features, such as the presentation of a UI for various screen resolutions. It is beneficial to learn more about such features in order to design a UI in a more efficient way.

To use this recipe, you need the project from the previous recipe. It should contain the MainPage.xaml file with the added button.

To handle the Click event, you need to perform the following steps:

Generating the method for handling the event of the button being clicked causes a modification, which is automatically introduced in both the MainPage.xaml and MainPage.xaml.cs files.

In the first file, with the XAML code describing the UI of the page, the Click property is automatically added to the Button element. It specifies the name of the method that is called when the user clicks on the button. The exemplary code is as follows:

    <Page (...)> 
        <Grid (...)> 
            <Button  
             x:Name="button" 
             Content="Button" 
             HorizontalAlignment="Left" 
             Margin="164,242,0,0" 
             VerticalAlignment="Top" 
             Click="button_Click" /> 
        </Grid> 
    </Page> 

It is worth mentioning that the button_Click method must exist in the MainPage class (name set as x:Class in the Page element). This method is also automatically generated in the MainPage.xaml.cs file, as follows:

    private void button_Click(object sender, RoutedEventArgs e) { } 

The method has a name that contains the name of the button (button) as well as information about the kind of event (Click). It has two parameters:

To specify operations that should be performed after pressing the button, you just need to add suitable C# code as the body of the button_Click method.

This way of handling the button being pressed is not the only possible one. Later in the book, you will learn how to use the data binding mechanism together with commands and the MVVM design pattern to improve the solution.

To complete this recipe, you need the project with two pages, represented by the MainPage and AboutPage classes. Let's imagine that the first page operates as a main menu of the application with a set of buttons. After clicking on each of them, a user should be navigated to a particular page, such as with information about the company, with a list of products, or with contact data.

As an example, the Button control should be added to both the pages, namely MainPage and AboutPage. However, they should present different content, such as About us (in MainPage) and Go back (in AboutPage), as graphically explained as follows:

To prepare an example that shows how to navigate between pages, you need to perform the following steps:

Navigation to another page is possible using the Frame property of the Frame type. It provides developers with a few methods, including Navigate and GoBack.

The first method (Navigate) is used to navigate the user to another page with or without additional parameters (take a look at the next recipe), while the other (GoBack) allows the user to go back to the previous page. In such a case, it is recommended that you check whether you can go back to the previous page by verifying whether the CanGoBack property has a value equal to true.

To complete this recipe, you need the project with two pages, represented by MainPage and ProductsPage classes. The first page should contain the button with the Our products caption, while the other--the list of products and categories as well as the Go back button. The structure of pages is presented as follows:

It is worth mentioning that the page with products requires an identifier of the category, which should be presented. Such an identifier needs to be passed as a parameter. To show products and subcategories from the root category, 0 is passed. If you want to open a particular category, its identifier is passed instead, as shown on the right-hand side of the image.

To prepare an example that shows how to pass data between pages, you need to perform the following steps:

Navigating to another page by passing a value is possible in a way that is similar to the approach presented in the previous recipe. However, in such a case, you should use another version of the Navigate method with two parameters. The second is an object that is passed to another page. Of course, it could be an object of any type, not only an integer value as shown in the example.

A bit more explanation is necessary in the case of reading the parameter in the target page. To do so, you need to override the OnNavigatedTo method, which has a parameter that is an instance of the NavigationEventArgs class. Such a class contains the Parameter property. However, it is not strongly typed, so you need to cast it to a suitable type, such as int, as shown in the following code snippet:

     int categoryId = (int)e.Parameter; 

Apart from passing an integer, a floating point, or even string values, it is often necessary and convenient to pass more complex data, such as instances of user defined classes, between pages. This task can be achieved with the same approach as described in detail in the current recipe. Of course, you should not forget about specifying the values of particular properties of the class instance before passing it to another page as well as casting the parameter to a proper type in the code of the target page.

To complete this recipe, you need the project with two pages, represented by the MainPage and AboutPage classes. Let's imagine that the first page operates as the main menu of the application with a set of menu items. After clicking on the first of them, the user should be navigated to the page with information about the company.

To handle the back button on a smartphone, as well as present an additional back button on tablets and desktops, you need to perform the following steps:

By adding the necessary code directly in the App.xaml.cs file, you do not need to specify the same operations in all .xaml.cs files representing pages. The required lines of code are not very complicated and are explained in the following part of this recipe.

First of all, you handle the Navigated event on an instance representing the frame (the roomFrame variable of the Frame type). When a user navigates to some page, the visibility of the back button is specified. Of course, it should be visible only when it is possible to go back from the current page, as specified in the following part of code:

    SystemNavigationManager.GetForCurrentView() 
        .AppViewBackButtonVisibility = ((Frame)s).CanGoBack ? 
            AppViewBackButtonVisibility.Visible : 
            AppViewBackButtonVisibility.Collapsed; 

Then, you handle an event of the back button being clicked, namely BackRequested. Of course, it supports a scenario of both pressing the hardware-based version and clicking on the additional back button added in the top-left corner of the window, as presented in the following screenshot of mobile and desktop-based versions:

When a user clicks on the back button, the OnBackRequested method is called. Within it, you check whether it is possible to go back from the current page. In such a case, you indicate that the event is handled and call the GoBack method. The operation of such a method is explained in detail in the Navigating between pages recipe.

To step through this recipe, you need a project with two pages, represented by the MainPage and DefaultPage classes. Of course, you should manually add the second one.

To change a default page, shown when the application is launched, you need to perform the following steps:

Changing the default page requires a small modification in the App.xaml.cs file, in the part related to the launching of the application. As you can see, such a part also uses the Navigate method (on the Frame instance), so changing the default page requires just a modification of its first parameter.

It is also possible to conditionally change the default page, for instance, depending on a value that indicates whether the user is currently logged in. The exemplary line of code is shown as follows:

    rootFrame.Navigate(isLogged ? typeof(UserPage) :  
       typeof(AnonymousPage), e.Arguments); 

In this example, if the user is logged in (isLogged equals to true), the user will be navigated to UserPage. Otherwise, AnonymousPage is used instead.

To use this recipe, you need a project with three pages, namely MainPage, UpdatePage, and ResultsPage. On the first, you should place the Update data button navigating to UpdatePage. Just as an example, the UpdatePage could be equipped with the button, which will navigate the user to the last page. On ResultsPage, let's place the Go back button. You should have an empty method handling the event of clicking on this button. Its code will be modified later in this recipe.

To modify the back stack to omit one page while going back, you need to perform the following steps:

At the beginning, you check whether the back stack has a suitable number of elements, which is at least two. Only in such a case, you are able to skip one entry while going back. If the mentioned condition is satisfied, the last entry from the back stack is removed using the following line of code:

    Frame.BackStack.RemoveAt(Frame.BackStack.Count - 1); 

Then, it is necessary to go back using the GoBack method, already explained in one of the previous recipes in this chapter.

The back stack performs a really important role while navigating between pages within an application. For this reason, it is beneficial to learn how it works and what information is stored in the back stack. You can check this with the following code snippet:

    for (int i = 0; i < Frame.BackStack.Count; i++) 
    { 
        PageStackEntry entry = Frame.BackStack[i]; 
        Type pageType = entry.SourcePageType; 
        object pageParameter = entry.Parameter; 
    } 

This code fragment iterates through the back stack using the for loop. In each iteration, you get a PageStackEntry instance (named entry) that contains various information about a visited page, such as its type and parameter.

In the exemplary scenario, analyzed in this recipe, the back stack contains two entries: regarding MainPage (index 0) and UpdatePage (index 1).

To complete this recipe, you need an automatically generated project.

To utilize additional features provided by the emulator of a smartphone, you need to perform the following steps:

To complete this recipe, you need the project with two pages, represented by the MainPage and ProductsPage classes. It is necessary to pass a category identifier while navigating from MainPage to ProductsPage.

To perform the breakpoints-based debugging, you need to follow the given steps:

To complete this recipe, you need the project with two pages, represented by the MainPage and ProductsPage classes. It is necessary to pass a category identifier while navigating from MainPage to ProductsPage. You should start the debugging of the project and stop it at any breakpoint.

To perform the step-by-step debugging, you need to perform the following steps:

The values of variables can be checked in a few ways, such as by placing the cursor over the name of the variable. However, when you want to see the values of a few variables in the following iterations within a loop, it is much more convenient to pin tooltips with their current values so they are automatically refreshed in each iteration. You can pin the tooltip by placing the cursor over the name of the variable and then pressing the pin icon. The exemplary result is shown in the preceding screenshot.

To complete this recipe, you need the project with two pages, represented by the MainPage and ProductsPage classes. It is necessary to pass a category identifier while navigating from MainPage to ProductsPage. You should start the debugging of the project and stop it at any breakpoint.

To execute some code while debugging, you need to perform the following steps:

The example from the screenshot you just saw shows a result of the following expression in Immediate Window:

    formattedText.Length 

It is evaluated using the values of the variables from the current state of debugging. In the example, the formattedText variable is equal to Category #1 - Food & drinks., thus the string has 28 characters and such a result is shown in the window.

The next expression is as follows:

    formattedText.ToUpper() 

It presents the current value of the formattedText variable, but in the uppercase version.

To complete this recipe, you need the project with two pages, represented by the MainPage and ProductsPage classes. It is necessary to pass a category identifier while navigating from MainPage to ProductsPage.

To prepare an example that shows how to log some data while debugging, you need to perform the following steps:

        Presenting a list of products from category #1 
        Coming back to the dashboard. 

To complete this recipe, you need an automatically generated project.

To monitor the CPU and memory usage while debugging the application, you need to perform the following steps:

The Diagnostic Tools window presents a set of useful information, not only about the used MB of the memory and percentage of CPU used. It also informs about moments when Garbage Collector (GC) is launched. What is more, you can see some steps of debugging, such as hitting a breakpoint.

It is really important to check the execution of the application on the slowest supported device to ensure that it will not have any problems with performance. Reaching the maximum acceptable values of CPU or memory usage is a sign that the code needs to be optimized. By modifying the code and checking its performance in an iterative way, you will see the impact of your changes on the final result.