Placing a control

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.