In this step you'll create a UWP-style application using NumericBox for UWP. When you add a C1NumericBox control to your application, you'll have a complete, functional numeric editor. You can further customize the control to your application.

To set up your project, complete the following steps:

1. Select File | New | Project.

2. In the New Project dialog box, select Templates | Visual C# | Windows | Universal. From the templates list, select Blank App (Universal Windows). Enter a Name and click OK to create your project.

3. Open MainPage.xaml if it isn't already open, place the cursor between the <Grid> and </Grid> tags, and click once.

4. Navigate to the Toolbox and double-click the StackPanel icon to add the panel to MainPage.xaml.

5. Add x:Name="sp1" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" to the <StackPanel> tag so that it appears similar to the following:

Markup	Copy Code
<StackPanel x:Name="sp1" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center"></StackPanel>

Elements in the panel will now appear centered and vertically positioned.

6. In the XAML window of the project, place the cursor between the <StackPanel> and </StackPanel> tags.

7. Navigate to the Visual Studio Toolbox and double-click the standard TextBlock control to it to your project.

8. Name the TextBlock and add content to it by adding x:Name="tb1" Text="Enter Combination" Margin="5" FontSize="24" to the <TextBlock> tag so that it appears similar to the following:

Markup	Copy Code
<TextBlock x:Name="tb1" Text="Enter Combination" Margin="5" FontSize="24"/>

9. Navigate to the Toolbox and double-click the StackPanel icon to add the panel to the existing StackPanel just below the TextBlock.

10. Add x:Name="sp2" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" to the <StackPanel> tag so that it appears similar to the following:

Markup	Copy Code
<StackPanel x:Name="sp2" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center"></StackPanel>

Elements in the panel will now appear centered and horizontally positioned.

11. Place the cursor between the first </StackPanel> tag and the second </StackPanel> tag and add the following markup to create a second label:

Markup	Copy Code
<TextBlock x:Name="tb2" Text="Invalid Combination" Foreground="Red" Margin="5" FontSize="18"/>

12. Place the cursor between the <TextBlock> tag and the second </StackPanel> tag and add the following markup to create a hidden button:

Markup	Copy Code
<Button x:Name="btn1" Content="Enter" Height="60" Visibility="Collapsed" Click="btn1_Click" Margin="5"></Button>

You will add the btn1_Click event handler later in code.

You've successfully created a UWP-style application, set up the application's user interface, and added controls to the application. In the next step you'll add C1NumericBox controls and complete setting up the application.