Collapse All Expand All

In the previous step you created a new WinRT-style project and added five controls to the application. In this step you'll continue by adding C1NumericBox controls to customize the application.

Complete the following steps:

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

2. Navigate to the Toolbox and double-click the C1NumericBox icon to add the control to the StackPanel. The XAML markup will now look similar to the following:

Markup	Copy Code
<Xaml:C1NumericBox></Xaml:C1NumericBox>

Note that the C1.Xaml namespace and <Xaml:C1NumericBox></Xaml:C1NumericBox> tags have been added to the project.

3. Give your control a name by adding x:Name="c1nb1" to the <Xaml:C1NumericBox> tag so that it appears similar to the following:

Markup	Copy Code
<Xaml:C1NumericBox x:Name="c1nb1">

By giving it a unique identifier, you'll be able to access the control in code.

4. Add a margins by adding Margin="5" to the <Xaml:C1NumericBox> tag so that it appears similar to the following:

Markup	Copy Code
<Xaml:C1NumericBox x:Name="c1nb1" Margin="2">

Controls will now appear spaced on the page.

5. Set your control's limits by adding Minimum="0" Maximum="9" to the <Xaml:C1NumericBox> tag so that it appears similar to the following:

Markup	Copy Code
<Xaml:C1NumericBox x:Name="c1nb1" Margin="2" Minimum="0" Maximum="9">

The C1NumericBox.Minimum and C1NumericBox.Maximum properties will set the minimum and maximum values that are allowed in the control. Users will not be able to enter values outside of that range providing built-in data validation.

6. Add ValueChanged="c1nb1_ValueChanged" to the <Xaml:C1NumericBox> tag so that it appears similar to the following:

Markup	Copy Code
<Xaml:C1NumericBox x:Name="c1nb1" Margin="2" Minimum="0" Maximum="9" ValueChanged="c1nb1_ValueChanged">

You will add code for the c1nb1_ValueChanged event handler in a later step.

7. Add the following XAML just below the existing <Xaml:C1NumericBox x:Name="c1nb1"></Xaml:C1NumericBox> tags:

Markup

Copy Code

<Xaml:C1NumericBox x:Name="c1nb2" Minimum="0" Maximum="9" Margin="5" ValueChanged="c1nb2_ValueChanged"></Xaml:C1NumericBox> <Xaml:C1NumericBox x:Name="c1nb3" Minimum="0" Maximum="9" Margin="5" ValueChanged="c1nb3_ValueChanged"></Xaml:C1NumericBox> <Xaml:C1NumericBox x:Name="c1nb4" Minimum="0" Maximum="9" Margin="5" ValueChanged="c1nb4_ValueChanged"></Xaml:C1NumericBox> <Xaml:C1NumericBox x:Name="c1nb5" Minimum="0" Maximum="9" Margin="5" ValueChanged="c1nb5_ValueChanged"></Xaml:C1NumericBox>

This will add four additional C1NumericBox controls so that you have a total of five controls on the page.

You've successfully added C1NumericBox controls to the application and customized those controls. In the next step you'll add code to the application.

 

 

---

Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback