Step 1 of 4: Creating a WinRT-style Application

In this step you'll create a WinRT-style application using NumericBox for WinRT. 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:

In Visual Studio 2012 Select File | New | Project.

In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project.

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

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

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.

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

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

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"/>

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

Add x:Name="sp2" Width="Auto" Height="Auto" Orientation="Horizontal" 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="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"></StackPanel>

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

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"/>

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 WinRT-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.