In this article by Marcin Jamro, the author of the book Windows Application Development Cookbook, we will see how to add a button in your application.

(For more resources related to this topic, see here.)

Introduction

You know how to start your adventure by developing universal 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, as well as Microsoft Visual Studio Community 2015. A designer can use a set of predefined controls, such as textboxes, checkboxes, images, or buttons. What's more, one can easily arrange controls in various variants, either vertically, horizontally, or in a grid. This is not all; developers could prepare their own controls as well. Such controls could be configured and placed on many pages within the application. It is also possible to prepare dedicated versions of particular pages for various types of devices, such as smartphones and desktops.

You have already learned how to place a new control on a page by dragging it from the Toolbox window. In this article, you will see how to add a control as well as how to programmatically handle controls. Thus, some controls could either change their appearance, or the new controls could be added to the page when some specific conditions are met.

Another important question is how to provide the user with a consistent user interface within the whole application. While developing solutions for the Windows 10 operating system, such a task could be easily accomplished by applying styles. In this article, you will learn how to specify both page-limited and application-limited styles that could be applied to either particular controls or to all the controls of a given type.

At the end, you could ask yourself a simple question, "Why should I restrict access to my new awesome application only to people who know a particular language in which the user interface is prepared?" You should not! And in this article, you will also learn how to localize content and present it in various languages. Of course, the localization will use additional resource files, so translations could be prepared not by a developer, but by a specialist who knows the given language well.

Adding a button

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 could be easily adjusted, for instance, by choosing a proper background or border, as you could 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 could not be only textual. For instance, you can prepare a button that presents an image instead of a text, a text over an image, or a 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.

Getting ready

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

How to do it…

1. Add a button to the page by modifying the content of the MainPage.xaml file, as follows:

   <Page (...)>
       <Grid Background="{ThemeResource 
             ApplicationPageBackgroundThemeBrush}">
           <Button 
               Content="Click me!"
               Foreground="#0a0a0a"
               FontWeight="SemiBold"
               FontSize="20"
               FontStyle="Italic"
               Background="LightBlue"
               BorderBrush="RoyalBlue"
               BorderThickness="5"
               Padding="20 10"
               VerticalAlignment="Center"
               HorizontalAlignment="Center" />
       </Grid>
   </Page>

2. Generate a method for handling the event of clicking the button by pressing the button (either in a graphical designer or in the XAML code) and double-clicking on the Click field in the Properties window with the Event handlers for the selected element option (the lightning icon) selected. The automatically generated method is as follows:

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

How it works…

In the preceding example, the Button control is placed within a grid. It is centered both vertically and horizontally, as specified by the VerticalAlignment and HorizontalAlignment properties that are set to Center. The background color (Background) is set to LightBlue. The border is specified by two properties, namely BorderBrush and BorderThickness. The first property chooses its color (RoyalBlue), while the other represents its thickness (5 pixels). What's more, the padding (Padding) is set to 20 pixels on the left- and right-hand side and 10 pixels at the top and bottom.

The button presents the Click me! text defined as a value of the Content property. The text is shown in the color #0a0a0a with semi-bold italic font with size 20, as specified by the Foreground, FontWeight, FontStyle, and FontSize properties, respectively.

If you run the application on a local machine, you should see the following result:

It is worth mentioning that the IDE supports a live preview of the designed page. So, you can modify the values of particular properties and have real-time feedback regarding the target appearance directly in the graphical designer. It is a really great feature that does not require you to run the application to see an impact of each introduced change.

There's more…

As already mentioned, even the Button control has many advanced features. For example, you could place an image instead of a text, present a text over an image, or show an icon next to the text. Such scenarios are presented and explained now.

First, let's focus on replacing the textual content with an image by modifying the XAML code that represents the Button control, as follows:

<Button 
    MaxWidth="300"
    VerticalAlignment="Center"
    HorizontalAlignment="Center">
    <Image Source="/Assets/Image.jpg" />
</Button>

Of course, you should also add the Image.jpg file to the Assets directory. To do so, navigate to Add | Existing Item… from the context menu of the Assets node in the Solution Explorer window, shown as follows:

In the Add Existing Item window, choose the Image.jpg file and click on the Add button.

As you could see, the previous example uses the Image control. In this recipe, no more information about such a control is presented because it is the topic of one of the next recipes, namely Adding an image.

If you run the application now, you should see a result similar to the following:

The second additional example presents a button with a text over an image. To do so, let's modify the XAML code, as follows:

<Button 
    MaxWidth="300"
    VerticalAlignment="Center"
    HorizontalAlignment="Center">
    <Grid>
        <Image Source="/Assets/Image.jpg" />
        <TextBlock 
            Text="Click me!"
            Foreground="White"
            FontWeight="Bold"
            FontSize="28"
            VerticalAlignment="Bottom"
            HorizontalAlignment="Center"
            Margin="10" />
    </Grid>
</Button>

You'll find more information about the Grid, Image, and TextBlock controls in the next recipes, namely Arranging controls in a grid, Adding an image, and Adding a label. For this reason, the usage of such controls is not explained in the current recipe.

If you run the application now, you should see a result similar to the following:

As the last example, you will see a button that contains both a textual label and an icon. Such a solution could be accomplished using the StackPanel, TextBlock, and Image controls, as you could see in the following code snippet:

<Button
    Background="#353535"
    VerticalAlignment="Center"
    HorizontalAlignment="Center"
    Padding="20">
    <StackPanel Orientation="Horizontal">
        <Image
            Source="/Assets/Icon.png"
            MaxHeight="32" />
        <TextBlock 
            Text="Accept"
            Foreground="White"
            FontSize="28"
            Margin="20 0 0 0" />
    </StackPanel>
</Button>

Of course, you should not forget to add the Icon.png file to the Assets directory, as already explained in this recipe. The result should be similar to the following:

Resources for Article:

Further resources on this subject:

• Deployment and DevOps [article]
• Introduction to C# and .NET [article]
• Customizing Kernel and Boot Sequence [article]