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

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

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

   これで、パネル内の要素は、中央で縦方向に配置されて表示されます。
6. プロジェクトの XAML ウィンドウで、カーソルを <StackPanel> タグと </StackPanel> タグの間に置きます。
7. Visual Studio のツールボックスに移動し、標準の TextBlock コントロールをダブルクリックしてプロジェクトに追加します。
8. x:Name="tb1" Text="組み合わせの入力" Margin="5" FontSize="24" を <TextBlock> タグに追加して、TextBlock に名前を付け、コンテンツを追加します。次のようになります。

   	コードのコピー
   <TextBlock x:Name="tb1" Text="組み合わせを入力してください" Margin="5" FontSize="24"/>

9. ツールボックスに移動し、［StackPanel］アイコンをダブルクリックして、TextBlock のすぐ下にある既存の StackPanel にパネルを追加します。
10. x:Name="sp2" Width="Auto" Height="Auto" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" を <StackPanel> タグに追加します。次のようになります。

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

    これで、パネル内の要素は、中央で横方向に配置されて表示されます。
11. カーソルを最初の </StackPanel> タグと２番目の </StackPanel> タグの間に置き、次のマークアップを追加して、２番目のラベルを作成します。

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

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

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

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

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