When the BlinkyHeaded project is added to the solution, Visual Studio will automatically generate several files, and it will open one of these files: App.xaml.cs
This file sets up the application and we really don’t need to change anything in it. You can close the tab and open the MainPage.xaml file instead. In Solution Explorer, find MainPage.xaml and double-click on it. This brings up an editing window where you can graphically design your user interface.
The Raspberry Pi is a 10” IoT device, so select that from the box at the upper left of the graphics-editing window.
Now, locate the Ellipse control in the Toolbox, under All XAML Controls. Drag and drop an ellipse on to the edit window. Drag it around until it’s centered in the upper half of the panel:
We're going to 'blink' the ellipse on the display, along with blinking the real LED.
In the Properties panel, give the ellipse a name, LED. In the BlinkyHeader program, we’re planning to blink a real LED, and also blink this ellipse to match the real LED.
Now, drag a text block from the toolbox, and drop it underneath the ellipse. In Properties, give it a name, DelayText. In the Common box of Properties, change the text to 500ms. In the Text box of Properties, change the font size to 24 px.
Now, center the text block under the ellipse.
Add one more TextBlock underneath the DelayText block. Name it GpioStatus, and change the text to Waiting to initialize GPIO... Make the font size 24 px, and center the box:
Finally, we’re going to group our ellipse and text blocks into a StackPanel. Select all three objects by dragging over them with the cursor. Right-click on the ellipse, and move the cursor to Group Into. From the popup, select StackPanel:
You'll have to play around with the GUI editor to get things right. Don't be afraid to explore the properties and experiment with items from the toolbox (and don't be afraid to make mistakes!).
If you want to get back to the gui design used in this tutorial, simply delete thecode in the box underneath the GUI editing window and replace it with the following
<Page
x:Class="BlinkyHeaded.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BlinkyHeaded"
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}">
<StackPanel Margin="373,170,371,261" Orientation="Vertical">
<Ellipse x:Name="LED" Fill="LightGray" HorizontalAlignment="Center" Height="100" Margin="0,25,0,0" Stroke="White" VerticalAlignment="Top" Width="100"/>
<TextBlock x:Name="DelayText" HorizontalAlignment="Center" Margin="0,50,0,0" Text="500 ms" VerticalAlignment="Top" FontSize="24" TextAlignment="Center" Width="100"/>
<TextBlock x:Name="GpioStatus" HorizontalAlignment="Center" Text="Waiting to initialize GPIO..." VerticalAlignment="Center" TextAlignment="Center" FontSize="24" Height="34" Margin="0,50,0,0" Width="270"/>
</StackPanel>
</Grid>
</Page>
