Input Library for WPF
NumericBox クイックスタート
Input for WPF > NumericBox > NumericBox クイックスタート

このクイックスタートは、NumericBox for WPF を初めて使用するユーザーのために用意されています。このクイックスタートでは、C1NumericBoxコントロールをアプリケーションに追加し、コントロールの外観と動作をカスタマイズします。

コントロールの追加

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

次の手順に従います。

  1. Visual Studio で、［ファイル］→［新しいプロジェクト］を選択します。
  2. [新しいプロジェクト]ダイアログボックスで、[WPFアプリケーション]を選択します。
  3. プロジェクトの名前と場所を入力し、[OK]をクリックして新しいアプリケーションを作成します。
  4. ツールボックスに移動し、［C1NumericBox］アイコンをダブルクリックして、MainWindow または Main page にコントロールを追加します。
  5. C1NumericBox1 コントロールをクリックして選択し、［プロパティ］ウィンドウに移動します。
  6. ［プロパティ］ウィンドウで、次のプロパティを設定します。
  • Width = 40
  • Minimum = 0
  • Maximum = 9

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

  1. この手順9を複数回繰り返して、合計4つの標準の C1NumericBox コントロールを追加します。
  2. ［デザイン］ビューで、各コントロールが C1NumericBox1 から C1NumericBox5 の番号順に左から右に並んで表示されるように再配置します。

アプリケーションは次のように表示されます。

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

外観のカスタマイズ

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

次の手順に従います。

  1. Visual Studio のツールボックスに移動し、標準の Label コントロールを２回ダブルクリックして、Label1 と Label2 をプロジェクトに追加します。

  2. Visual Studio のツールボックスで、標準の Button コントロールをダブルクリックして Button1 をプロジェクトに追加します。

  3. Label1 を１回クリックして選択し、［プロパティ］ウィンドウでその Content プロパティを「組み合わせを入力してください。」に設定します。

  4. Label2 を１回クリックして選択し、［プロパティ］ウィンドウでその Content プロパティを「不正な組み合わせ！」に設定し、Foreground プロパティを Red に設定します。

  5. Button1 を１回クリックして選択し、［プロパティ］ウィンドウでその Content プロパティを「継続」に設定し、Visibility プロパティを Hidden に設定します。

アプリケーションは次のように表示されます。

 

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

Add Code to the Application

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

次の手順に従います。

  1. Button1 をダブルクリックしてコードビューに切り替え、Button1_Click イベントハンドラを作成します。
  2. 次の imports 文をページの先頭に追加します。
Visual Basic
コードのコピー 
Imports C1.WPF.Input
Imports System.Windows.Media
Imports System.Diagnostics

 

C#
コードのコピー 
using C1.WPF.Input;
using System.Windows.Media;
using System.Diagnostics;
  1. Window または Page クラスのすぐ内側にある次のグローバル変数を初期化します。
Visual Basic
コードのコピー 
Dim nb1 As Integer = 5
Dim nb2 As Integer = 2
Dim nb3 As Integer = 3
Dim nb4 As Integer = 7
Dim nb5 As Integer = 9

 

C#
コードのコピー 
int nb1 = 5;
int nb2 = 2;
int nb3 = 3;
int nb4 = 7;
int nb5 = 9;

これらの数字は、正しい「暗証番号」としてアプリケーションで使用されます。ユーザーが実行時に正しい番号の組み合わせを入力すると、ボタンが表示されます。

  1. Button1_Click イベントハンドラにコードを追加します。次のようになります。
Visual Basic
コードのコピー 
Private Sub btn1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btn1.Click
    HtmlPage.PopupWindow(New Uri("http://www.grapecity.com"), "new", Nothing)
End Sub

 

C#
コードのコピー 
private void btn1_Click(object sender, RoutedEventArgs e)
{
    HtmlPage.PopupWindow(New Uri("http://www.grapecity.com"), "new", null);
}
  1. 次に、以下のカスタム NBValidation イベントをコードに追加します。
Visual Basic
コードのコピー 
Private Sub NBValidation()
    If Me.c1nb1.Value = nb1 And Me.c1nb2.Value = nb2 And Me.c1nb3.Value = nb3 And Me.c1nb4.Value = nb4 And Me.c1nb5.Value = nb5 Then
        Me.lbl2.Foreground = New SolidColorBrush(Colors.Green)
        Me.lbl2.Content = "Combination Valid"
        Me.c1nb1.IsReadOnly = True
        Me.c1nb2.IsReadOnly = True
        Me.c1nb3.IsReadOnly = True
        Me.c1nb4.IsReadOnly = True
        Me.c1nb5.IsReadOnly = True
        Me.btn1.Visibility = Windows.Visibility.Visible
    End If
End Sub

 

C#
コードのコピー 
private void NBValidation()
{
    if (this.c1nb1.Value == nb1 & this.c1nb2.Value == nb2 & this.c1nb3.Value == nb3 & this.c1nb4.Value == nb4 & this.c1nb5.Value == nb5)
    {
        this.lbl2.Foreground = new SolidColorBrush(Colors.Green);
        this.lbl2.Content = "Combination Valid";
        this.c1nb1.IsReadOnly = true;
        this.c1nb2.IsReadOnly = true;
        this.c1nb3.IsReadOnly = true;
        this.c1nb4.IsReadOnly = true;
        this.c1nb5.IsReadOnly = true;
        this.btn1.Visibility = Windows.Visibility.Visible;
    }
}

ユーザーが（上の手順 3で示した）正しい番号を入力すると、C1NumericBox コントロールは読み取り専用に設定されて編集できなくなります。コントロールの下にあるラベルのテキストは、正しいコードが入力されていることを示すように変更されます。また、ComponentOne Web サイトに移動するためのボタンが表示されます。

  1. C1NumericBox1_ValueChanged イベントハンドラにコードを入力して、NBValidation を初期化します。次のようになります。
Visual Basic
コードのコピー 
Private Sub c1nb1_ValueChanged(ByVal sender As System.Object, ByVal e As C1.WPF.PropertyChangedEventArgs(Of System.Double)) Handles c1nb1.ValueChanged
    NBValidation()
End Sub
Private Sub c1nb2_ValueChanged(ByVal sender As System.Object, ByVal e As C1.WPF.PropertyChangedEventArgs(Of System.Double)) Handles c1nb2.ValueChanged
    NBValidation()
End Sub
Private Sub c1nb3_ValueChanged(ByVal sender As System.Object, ByVal e As C1.WPF.PropertyChangedEventArgs(Of System.Double)) Handles c1nb3.ValueChanged
    NBValidation()
End Sub
Private Sub c1nb4_ValueChanged(ByVal sender As System.Object, ByVal e As C1.WPF.PropertyChangedEventArgs(Of System.Double)) Handles c1nb4.ValueChanged
    NBValidation()
End Sub
Private Sub c1nb5_ValueChanged(ByVal sender As System.Object, ByVal e As C1.WPF.PropertyChangedEventArgs(Of System.Double)) Handles c1nb5.ValueChanged
    NBValidation()
End Sub

 

C#
コードのコピー 
private void c1nb1_ValueChanged(object sender, PropertyChangedEventArgs<double> e)
{
    NBValidation();
}
private void c1nb2_ValueChanged(object sender, PropertyChangedEventArgs<double> e)
{
    NBValidation();
}
private void c1nb3_ValueChanged(object sender, PropertyChangedEventArgs<double> e)
{
    NBValidation();
}
private void c1nb4_ValueChanged(object sender, PropertyChangedEventArgs<double> e)
{
    NBValidation();
}
private void c1nb5_ValueChanged(object sender, PropertyChangedEventArgs<double> e)
{
    NBValidation();
}

この手順では、アプリケーションにコードを追加しました。次の手順では、アプリケーションを実行し、実行時の操作を確認します。

アプリケーションの実行

これまでに WPF アプリケーションを作成し、外観と動作をカスタマイズしたので、次にアプリケーションを実行します。アプリケーションを実行し、NumericBox for WPF の実行時の動作を確認するには、次の手順に従います。

  1. ［デバッグ］メニューから［デバッグ開始］を選択し、実行時にアプリケーションがどのように表示されるかを確認します。

アプリケーションは次の図のように表示されます。

 

  1. 最初（左端）の C1NumericBox コントロールに５が表示されるまで、このコントロールのアップボタンをクリックします。クリックするたびに数字が１だけインクリメントされます。これは、Increment プロパティがデフォルトで１に設定されているためです。

  2. ２番目の C1NumericBox の内部をクリックすると、「０」値が強調表示されます。「２」を入力して数字を書き換えます。

  3. ３番目の C1NumericBox コントロールでダウンボタンをクリックしてみると、数字が変わらないことがわかります。これは、Minimum プロパティが０に設定されているためです。コントロールは０未満の値を受け付けません。３が表示されるまでアップボタンをクリックします。

  4. ４番目の C1NumericBox コントロールで、０の前にカーソルを置き、クリックします。「５」を入力すると、「50」と表示されます。

  5. 最後の C1NumericBox コントロールの内部をクリックします。４番目の C1NumericBox の 50 が９にリセットされることがわかります。これは、Maximum プロパティが９に設定されており、コントロールが９より大きい値を受け付けないためです。

  6. 最後の C1NumericBox コントロールに９を入力します。

  7. ４番目の C1NumericBox コントロールのダウンボタンを２回クリックすると、７が表示されます。２番目の Label のテキストが変化し、ボタンが表示されます。

  1. C1NumericBox コントロールへの入力を試みたり、アップボタンやダウンボタンをクリックしても、入力は受け付けられません。これは、すべて正しい暗証番号を入力したときに IsReadOnly プロパティが True に設定され、コントロールの編集がロックされたためです。

  2. 表示された［Enter］ボタンをクリックすると、ComponentOne Web サイトに移動します。

おめでとうございます!

これで、NumericBox for WPF クイックスタートは完了です。NumericBox for WPF アプリケーションを作成し、コントロールの外観と動作をカスタマイズし、アプリケーションの実行時機能をいくつか確認することができました。

 

 

Copyright © MESCIUS inc. All rights reserved.