Step 1 of 3: Adding NumericBox for Windows Phone to your Project

In this step you'll begin in Visual Studio to create a Windows Phone application using NumericBox for Windows Phone. 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 and add a C1NumericBox control to your application, complete the following steps:

1.   In Visual Studio, select File | New | Project to open the New Project dialog box.

2.   In the New Project dialog box, select a language in the left pane, and in the templates list select Windows Phone Application. Enter a Name for your project and click OK. The New Windows Phone Application dialog box will appear.

3.   Click OK to close the New Windows Phone Application dialog box and create your project.

4.   Right-click the project in the Solution Explorer and select Add Reference.

5.   In the Add Reference dialog box, locate and select the C1.Phone.dll assembly and select OK.

6.   Add the XAML namespace to the <phone:PhoneApplicationPage> tag by adding xmlns:c1="clr-namespace:C1.Phone;assembly=C1.Phone" so it appears similar to the following:

<phone:PhoneApplicationPage x:Class="C1WP.MainPage"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:c1="clr-namespace:C1.Phone;assembly=C1.Phone" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True">

7.   Edit the TitlePanel content to change the text in the TextBlock controls. It will appear similar to the following:

<!--TitlePanel contains the name of the application and page title-->

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

    <TextBlock x:Name="ApplicationTitle" Text="ComponentOne Studio for Windows Phone" Style="{StaticResource PhoneTextNormalStyle}"/>

    <TextBlock x:Name="PageTitle" Text="NumericBox" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

8.   In the XAML window of the project, place the cursor between the <Grid x:Name="ContentPanel"></Grid> tags and click once.

9.   Add the following XAML markup cursor between the <Grid x:Name="ContentPanel"></Grid> tags to add a StackPanel containing a TextBlock to the application:

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

<TextBlock Height="30" Name="tb1" Text="Enter Combination:" />

</StackPanel>

10.  Add the following markup between the <TextBlock /> and </StackPanel> tags to add five C1NumericBox controls to your application:

<c1:C1NumericBox x:Name="c1nb1" Width="190" Height="70" Minimum="0" Maximum="9" ValueChanged="c1nb1_ValueChanged"></c1:C1NumericBox>

<c1:C1NumericBox x:Name="c1nb2" Width="190" Height="70" Minimum="0" Maximum="9" ValueChanged="c1nb2_ValueChanged"></c1:C1NumericBox>

<c1:C1NumericBox x:Name="c1nb3" Width="190" Height="70" Minimum="0" Maximum="9" ValueChanged="c1nb3_ValueChanged"></c1:C1NumericBox>

<c1:C1NumericBox x:Name="c1nb4" Width="190" Height="70" Minimum="0" Maximum="9" ValueChanged="c1nb4_ValueChanged"></c1:C1NumericBox>

<c1:C1NumericBox x:Name="c1nb5" Width="190" Height="70" Minimum="0" Maximum="9" ValueChanged="c1nb5_ValueChanged"></c1:C1NumericBox>

Note that in each of the C1NumericBox controls you set the following:

•      Name: Adds a unique identifier that allows you to access the control in code.

•      Height: Sets the vertical size of the control.

•      Width: Sets the horizontal size of the control.

•      Minimum: Sets the minimum valued that can be entered in the C1NumericBox control. Users will not be able to enter values below the minimum providing built-in data validation.

•      Maximum: Sets the maximum valued that can be entered in the C1NumericBox control. Users will not be able to enter values above the maximum providing built-in data validation.

•      ValueChanged: Sets the event handler that handles when the value of the C1NumericBox is changed. You'll add the code for this event handler in a later step.

11.  Add the following markup between the last </c1:C1NumericBox> tag and the </StackPanel> tag to add a TextBlock and Button to the application:

<TextBlock Height="30" Name="tb2" Text="Invalid Combination." Foreground="Red" />

<Button x:Name="btn1" Content="Enter" Visibility="Collapsed" Height="70" Margin="2" Click="btn1_Click"></Button>   

Your complete markup will appear like the following:

•      XAML Markup

You've successfully created a Windows Phone application, added C1NumericBox controls to the application, and customized those controls. In the next step you'll complete setting up the application.