To be able to create apps for UWP, you must enable developer mode in Windows 10.

Go to Start Menu | Settings | Update & security | For developers, and then click on Developer mode, as shown in the following screenshot. Accept the warning about how it "could expose your device and personal data to security risk or harm your device," and then close the Settings app. You might need to restart your PC.

In Visual Studio 2017, press Ctrl + Shift + N or choose File | New | Project....

In the New Project dialog, in the Installed | Templates list, select Visual C#. In the center list, select Blank App (Universal Windows), type the name as Ch13_UWP, change the location to C:Code, type the solution name as Chapter13, and then click on OK.

In the New Universal Windows Project dialog box, as shown in the following screenshot, choose Minimum Version of Windows 10 (10.0; Build 10240) and click OK.

In the Solution Explorer window, double-click on the MainPage.xaml file to open it for editing. You will see the XAML design window showing a graphical view and an XAML view of the MainWindow.xaml file. You will be able to make the following observations:

On the View menu, choose Toolbox or press Ctrl + W, X. Note that the toolbox has sections for Common XAML Controls, All XAML Controls, and General. At the top of the toolbox is a search box. Enter the letters bu, as shown in the following screenshot. Note that the list of controls is filtered:

Drag and drop the Button control from the toolbox onto the graphical view. Resize it by clicking, holding, and dragging any of the eight square resize handles on each edge and in each corner. Note that the button is given a fixed width and height, and fixed left and top margins, to position and size it inside the grid.

Although you can drag and drop controls, it is better to use the XAML view for layout.

In the XAML view, find the Button element and delete it.

In the XAML view, inside the Grid element, enter the following markup:

    <Button Margin="6" Padding="6" Name="clickMeButton"> 
      Click Me 
    </Button> 

Note that the button is automatically sized to its content, Click Me, aligned vertically in the center and aligned horizontally to the left, as shown in the following screenshot:

Modify the XAML to wrap the Button element inside a horizontally orientated StackPanel that is inside a vertically orientated, by default, StackPanel, and note the change in its layout:

    <StackPanel> 
      <StackPanel Orientation="Horizontal"> 
        <Button Margin="6" Padding="6" Name="clickMeButton"> 
          Click Me 
        </Button> 
      </StackPanel> 
    </StackPanel> 

Modify the Button element to give it a new event handler for its Click event:

    <Button Margin="6" Padding="6" Name="clickMeButton"  
      Click="clickMeButton_Click"> 
      Click Me 
    </Button> 

In the MainWindows.xaml.cs file, add the following statement to the event handler:

    clickMeButton.Content = DateTime.Now.ToString("hh:mm:ss"); 

Run the application by pressing Ctrl + F5.

Click on the Click Me button. Every time you click the button, the button's content changes to show the current time: