In the previous step you created a new UWP-style project and added a StackPanel to the application. In this step you'll continue by adding and customizing TextBlock and C1MaskedTextBox controls.

Complete the following steps:

1. In the XAML window of the project, place the cursor between the <StackPanel x:Name="sp1"> and </StackPanel> tags.

2. Add the following markup within the StackPanel to add two standard TextBlock controls:

Markup	Copy Code
<TextBlock Margin="2,2,2,10" Name="tb1" Text="Employee Information" /> <TextBlock FontSize="16" Margin="2,2,2,0" Text="Employee ID" />

3. Place the cursor just below the makrup you just added , navigate to the Toolbox and double-click the C1MaskedTextBox icon to add the control to the StackPanel. This will add the reference and XAML namespace automatically. The XAML markup resembles the following:

Markup	Copy Code
<Xaml:C1MaskedTextBox x:Name="c1MaskedTextBox" Text="C1MaskedTextBox"/>

4. Inside the Grid, initialize the C1MaskedTextBox control and give it a name by adding Name="c1mtb1" VerticalAlignment="Top" Margin="2" Mask="000-00-0000" TextChanged="c1mtb1_TextChanged" to the <Xaml:C1MaskedTextBox/> tag so that it appears similar to the following:

Markup	Copy Code
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Xaml:C1MaskedTextBox Name="c1mtb1" VerticalAlignment="Top" Margin="2" Mask="000-00-0000" TextChanged="c1mtb1_TextChanged"/> </Grid>

Notice that this markup adds a name, sets the margin and alignment, and sets a mask for the content of the box. Note that you'll add code for the event handler you added in a later step.

5. Place the cursor just after the <Xaml:C1MaskedTextBox> tag and add the following XAML to add additional C1MaskedTextBox and TextBlock controls to the StackPanel:

Markup

Copy Code

<TextBlock x:Name="tb2" FontSize="16" Margin="2" /> <TextBlock FontSize="16" Margin="2,2,2,0" Text="Name"/> <Xaml:C1MaskedTextBox Name="c1mtb2" VerticalAlignment="Top" Margin="2" TextChanged="c1mtb2_TextChanged"></Xaml:C1MaskedTextBox> <TextBlock x:Name="tb3" FontSize="16" Margin="2"/> <TextBlock FontSize="16" Margin="2" Text="Hire Date"/> <Xaml:C1MaskedTextBox Name="c1mtb3" VerticalAlignment="Top" Margin="2" Mask="00/00/0000" TextChanged="c1mtb3_TextChanged"></Xaml:C1MaskedTextBox> <TextBlock x:Name="tb4" FontSize="16" Margin="2"/> <TextBlock FontSize="16" Margin="2,2,2,0" Text="Phone Number"/> <Xaml:C1MaskedTextBox Name="c1mtb4" VerticalAlignment="Top" Margin="2" Mask="(999) 000-0000" TextChanged="c1mtb4_TextChanged"></Xaml:C1MaskedTextBox> <TextBlock x:Name="tb5" FontSize="16" Margin="2"/>

You've successfully set up your application's user interface. In the next step you'll add code to your application.