手順2：C1NumericBox のコントロールの追加

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

次の手順に従います。

プロジェクトの XAML ウィンドウで、カーソルを <StackPanel x:Name="sp2"> タグと </StackPanel> タグの間に置きます。

ツールボックスに移動し、［C1NumericBox］アイコンをダブルクリックして、StackPanel にコントロールを追加します。XAML マークアップは次のようになります。

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

C1.Xaml 名前空間と <Xaml:C1NumericBox></Xaml:C1NumericBox> タグがプロジェクトに追加されています。

x:Name="c1nb1" を <Xaml:C1NumericBox> タグに追加して、コントロールに名前を付けます。次のようになります。

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

それに一意の識別子を付けると、コードでそのコントロールにアクセスできるようになります。

<Xaml:C1NumericBox> タグに Margin="5" を追加して、マージンを追加します。次のようになります。

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

ページ上でコントロールが間隔を開けて表示されます。

Minimum="0" Maximum="9" を <Xaml:C1NumericBox> タグに追加して、コントロールに制限を設定します。次のようになります。

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

Minimum プロパティと Maximum プロパティは、コントロールに入力できる最小値と最大値を設定します。データ検証機能が組み込まれているため、ユーザーはこの範囲外の値を入力できなくなります。

<Xaml:C1NumericBox> タグに ValueChanged="c1nb1_ValueChanged" を追加します。次のようになります。

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

c1nb1_ValueChanged イベントハンドラのコードは、この後の手順で追加します。

既存の <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>

コードのコピー

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