手順1：UWP/WinRT スタイルのアプリケーションの作成

この手順では、最初に Visual Studio で NumericBox for UWP/WinRT XAML を使用する UWP/WinRT スタイルのアプリケーションを作成します。C1NumericBox コントロールをアプリケーションに追加するだけで、完全な機能を備えた数値エディタとして使用できます。さらに、そのコントロールをアプリケーションに合わせてカスタマイズできます。

プロジェクトを設定するには、次の手順に従います。

Visual Studio で、［ファイル］→［新規作成］→［プロジェクト］を選択します。
［新しいプロジェクト］ダイアログボックスで、左ペインの言語を展開し、言語の下で［Windows ストア］を選択し、テンプレートリストで［新しいアプリケーション (XAML)］を選択します。名前を入力し、［OK］をクリックしてプロジェクトを作成します。
MainPage.xaml が開いていない場合は開きます。<Grid> タグと </Grid> タグの間にカーソルを置き、１回クリックします。
ツールボックスに移動し、［StackPanel］アイコンをダブルクリックして、MainPage.xaml にパネルを追加します。

x:Name="sp1" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" を <StackPanel> タグに追加します。次のようになります。

	コードのコピー
<StackPanel x:Name="sp1" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center"></StackPanel>

これで、パネル内の要素は、中央で縦方向に配置されて表示されます。

プロジェクトの XAML ウィンドウで、カーソルを <StackPanel> タグと </StackPanel> タグの間に置きます。
Visual Studio のツールボックスに移動し、標準の TextBlock コントロールをダブルクリックしてプロジェクトに追加します。

x:Name="tb1" Text="組み合わせの入力" Margin="5" FontSize="24" を <TextBlock> タグに追加して、TextBlock に名前を付け、コンテンツを追加します。次のようになります。

	コードのコピー
<TextBlock x:Name="tb1" Text="組み合わせの入力" Margin="5" FontSize="24"/>

ツールボックスに移動し、［StackPanel］アイコンをダブルクリックして、TextBlock のすぐ下にある既存の StackPanel にパネルを追加します。

x:Name="sp2" Width="Auto" Height="Auto" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" を <StackPanel> タグに追加します。次のようになります。

	コードのコピー
<StackPanel x:Name="sp2" Width="Auto" Height="Auto" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"></StackPanel>

これで、パネル内の要素は、中央で横方向に配置されて表示されます。

カーソルを最初の </StackPanel> タグと２番目の </StackPanel> タグの間に置き、次のマークアップを追加して、２番目のラベルを作成します。

	コードのコピー
<TextBlock x:Name="tb2" Text="組み合わせが不正" Foreground="Red" Margin="5" FontSize="18"/>

カーソルを <TextBlock> タグと２番目の </StackPanel> タグの間に置き、次のマークアップを追加して、非表示のボタンを作成します。

	コードのコピー
<Button x:Name="btn1" Content="Enter" Height="60" Visibility="Collapsed" Click="btn1_Click" Margin="5"></Button>

btn1_Click イベントハンドラは、後でコードに追加します。

これで、WinRT スタイルのアプリケーションを作成し、アプリケーションのユーザーインタフェースを設定し、アプリケーションにコントロールを追加できました。次の手順では、C1NumericBox コントロールを追加して、アプリケーションの設定を完成させます。