前の手順では、新しい UWP スタイルのプロジェクトを作成し、アプリケーションに５つのコントロールを追加しました。この手順では、引き続き、C1NumericBox コントロールを追加してアプリケーションをカスタマイズします。

次の手順に従います。

1. プロジェクトの XAML ウィンドウで、カーソルを <StackPanel x:Name="sp2"> タグと </StackPanel> タグの間に置きます。
2. ツールボックスに移動し、［C1NumericBox］アイコンをダブルクリックして、StackPanel にコントロールを追加します。XAML マークアップは次のようになります。

   	コードのコピー
   <Xaml:C1NumericBox></Xaml:C1NumericBox>

   C1.Xaml 名前空間と <Xaml:C1NumericBox></Xaml:C1NumericBox> タグがプロジェクトに追加されています。
3. x:Name="c1nb1" を <Xaml:C1NumericBox> タグに追加して、コントロールに名前を付けます。次のようになります。

   	コードのコピー
   <Xaml:C1NumericBox x:Name="c1nb1">

   それに一意の識別子を付けると、コードでそのコントロールにアクセスできるようになります。
4. <Xaml:C1NumericBox> タグに Margin="5" を追加して、マージンを追加します。次のようになります。

   	コードのコピー
   <Xaml:C1NumericBox x:Name="c1nb1" Margin="2">

   ページ上でコントロールが間隔を開けて表示されます。
5. Minimum="0" Maximum="9" を <Xaml:C1NumericBox> タグに追加して、コントロールに制限を設定します。次のようになります。

   	コードのコピー
   <Xaml:C1NumericBox x:Name="c1nb1" Margin="2" Minimum="0" Maximum="9">

   Minimum プロパティと Maximum プロパティは、コントロールに入力できる最小値と最大値を設定します。データ検証機能が組み込まれているため、ユーザーはこの範囲外の値を入力できなくなります。
6. <Xaml:C1NumericBox> タグに ValueChanged="c1nb1_ValueChanged" を追加します。次のようになります。

   	コードのコピー
   <Xaml:C1NumericBox x:Name="c1nb1" Margin="2" Minimum="0" Maximum="9" ValueChanged="c1nb1_ValueChanged">

   c1nb1_ValueChanged イベントハンドラのコードは、この後の手順で追加します。
7. 既存の <Xaml:C1NumericBox x:Name="c1nb1"></Xaml:C1NumericBox> タグのすぐ下に、次の XAML を追加します。

   コードのコピー

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

   これで、さらに４つの C1NumericBox コントロールが追加され、合計５つのコントロールがページに置かれます。

これで、アプリケーションに C1NumericBox コントロールを追加し、これらのコントロールをカスタマイズできました。次の手順では、アプリケーションにコードを追加します。