The automatically generated page does not contain any content that could be interesting to a user. For this reason, it is important to learn how to place a new control.
By default, you have access to many controls that are available out of the box, such as a button, textbox, checkbox, list view, progress bar, calendar, or web view. Of course, these are only examples of the available controls. You can browse the full list in the Toolbox window within the IDE.
In this recipe, you will learn how to add the first button to the page.
To place a control on the page, you need to perform the following steps:
Double-click on the
MainPage.xamlfile in the Solution Explorer window.Open the Toolbox window by navigating to View | Toolbox from the menu.
Drag and drop the Button item from the Toolbox window to the graphical designer in the
MainPage.xamlfile. The control is now added, and you can easily adjust its location and size, as shown in the following image:
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.
The Handling events recipe
The Adding a button, Adding a text block, Adding a textbox, Adding a password box, Adding a checkbox, Adding a combobox, Adding a listbox, Adding an image, Adding controls programmatically, and Creating and using a user control recipes in Chapter 2, Designing a User Interface