手順2：アプリケーションのカスタマイズ

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

次の手順に従います。

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

StackPanel 内に次のマークアップを追加して、２つの標準 TextBlock コントロールを追加します。

	コードのコピー
<TextBlock Margin="2,2,2,10" Name="tb1" Text="社員情報" /> <TextBlock FontSize="16" Margin="2,2,2,0" Text="社員 ID" />

追加したマークアップのすぐ下にカーソルを置き、ツールボックスに移動します。C1MaskedTextBox アイコンをダブルクリックして、このコントロールを StackPanel に追加します。これで、参照と XAML 名前空間が自動的に追加されます。XAML マークアップは次のようになります。

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

グリッド内で Name="c1mtb1" VerticalAlignment="Top" Margin="2" Mask="000-00-0000" TextChanged="c1mtb1_TextChanged" を <Xaml:C1MaskedTextBox/> タグに追加して、C1MaskedTextBox コントロールを初期化し、コントロールに名前を付けます。次のようになります。

	コードのコピー
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Xaml:C1MaskedTextBox Name="c1mtb1" VerticalAlignment="Top" Margin="2" Mask="000-00-0000" TextChanged="c1mtb1_TextChanged"/> </Grid>

このマークアップでは、コントロールに名前を付け、マージンと配置を設定し、ボックスのコンテンツのマスクを設定しています。後の手順で、イベントハンドラのコードを追加します。

<Xaml:C1MaskedTextBox> タグの直後にカーソルを置き、次の XAML を追加して、C1MaskedTextBox および TextBlock コントロールを StackPanel に追加します。

	コードのコピー
<TextBlock x:Name="tb2" FontSize="16" Margin="2" /> <TextBlock FontSize="16" Margin="2,2,2,0" Text="名前"/> <Xaml:C1MaskedTextBox Name="c1mtb2" VerticalAlignment="Top" Margin="2" TextChanged="c1mtb2_TextChanged"></Xaml:C1MaskedTextBox> <TextBlock x:Name="tb3" FontSize="16" Margin="2"/> <TextBlock FontSize="16" Margin="2" Text="入社日"/> <Xaml:C1MaskedTextBox Name="c1mtb3" VerticalAlignment="Top" Margin="2" Mask="00/00/0000" TextChanged="c1mtb3_TextChanged"></Xaml:C1MaskedTextBox> <TextBlock x:Name="tb4" FontSize="16" Margin="2"/> <TextBlock FontSize="16" Margin="2,2,2,0" Text="電話番号"/> <Xaml:C1MaskedTextBox Name="c1mtb4" VerticalAlignment="Top" Margin="2" Mask="(999) 000-0000" TextChanged="c1mtb4_TextChanged"></Xaml:C1MaskedTextBox> <TextBlock x:Name="tb5" FontSize="16" Margin="2"/>

コードのコピー

これで、アプリケーションのユーザーインタフェースを設定できました。次の手順では、コードをアプリケーションに追加します。