MaskedTextBox クイックスタート

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

アプリケーションの設定

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

プロジェクトをセットアップし、C1MaskedTextBox コントロールをアプリケーションに追加するには、次の手順に従います。

Visual Studio で、［ファイル］→［新しいプロジェクト］を選択します。
[新しいプロジェクト]ダイアログボックスで、[WPFアプリケーション]を選択します。
プロジェクトの名前と場所を入力し、[OK]をクリックして新しいアプリケーションを作成します。

XAMLで、次のコードを追加します。

Colorized Example Code

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

C1MaskedTextBoxおよびLabelコントロールをStackPanelに追加するには、次の手順を行います。

ツールボックスに移動し、［C1MaskedTextBox］アイコンをダブルクリックして、MainWindow にコントロールを追加します。この手順３を複数回繰り返して、合計４つの C1MaskedTextBox コントロールを追加します。
ツールボックスで、Label アイコンをダブルクリックして、このコントロールを MainWindow に追加します。この手順４を複数回繰り返して、合計５つの標準の Label コントロールを追加します。
コントロールのサイズを変更して再配置します。 LabelコントロールとC1MaskedTextBoxコントロールを交互に配置し、次の画像のように配置されていることを確認します。

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

外観のカスタマイズ

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

次の手順に従います。

［デザイン］ビューで、Label1 コントロールを１回クリックして選択し、［プロパティ］ウィンドウに移動し、その Content プロパティを「社員情報」に設定します。
残りの各 Label コントロールを順に選択し、［プロパティ］ウィンドウに移動して、それぞれを次のように設定します。

Content プロパティのデフォルトの「Label」テキストを削除します。
FontSize プロパティを「9」に設定します。

［XAML］ビューに切り替え、Watermark="名前" を <c1:C1MaskedTextBox>タグに追加して、C1MaskedTextBox1 を次のようにカスタマイズします。

XAML
コードのコピー
<c1:C1MaskedTextBox Height="23" Margin="21,46,167,0" Name="C1MaskedTextBox1" VerticalAlignment="Top" Watermark="名前" />
これで、コントロールにウォーターマークが追加されます。

XAML	コードのコピー
<c1:C1MaskedTextBox Height="23" Margin="21,46,167,0" Name="C1MaskedTextBox1" VerticalAlignment="Top" Watermark="名前" />

［XAML］ビューに切り替え,Watermark="社員ID" Mask="000-00-0000" を<c1:C1MaskedTextBox> タグに追加して、C1MaskedTextBox2 を次のようにカスタマイズします。

XAML
コードのコピー
<c1:C1MaskedTextBox Margin="14,98,12,0" Name="C1MaskedTextBox2" Height="23" VerticalAlignment="Top" Watermark="社員ID" Mask="000-00-0000" />
これで、コントロールにウォーターマークとマスクが追加されます。

XAML	コードのコピー
<c1:C1MaskedTextBox Margin="14,98,12,0" Name="C1MaskedTextBox2" Height="23" VerticalAlignment="Top" Watermark="社員ID" Mask="000-00-0000" />

Watermark="入社日" Mask="00/00/0000" を <c1:C1MaskedTextBox> タグに追加して、C1MaskedTextBox3 を次のようにカスタマイズします。

XAML
コードのコピー
<c1:C1MaskedTextBox Height="23" Margin="14,0,12,87" Name="C1MaskedTextBox3" VerticalAlignment="Bottom" Watermark="入社日" Mask="00/00/0000"/>
これで、コントロールにウォーターマークとマスクが追加されます。

XAML	コードのコピー
<c1:C1MaskedTextBox Height="23" Margin="14,0,12,87" Name="C1MaskedTextBox3" VerticalAlignment="Bottom" Watermark="入社日" Mask="00/00/0000"/>

Watermark="電話番号" Mask="(999) 000-0000" を <c1:C1MaskedTextBox> タグに追加して、C1MaskedTextBox4 を次のようにカスタマイズします。

XAML
コードのコピー
<c1:C1MaskedTextBox Height="23" Margin="14,0,12,33" Name="C1MaskedTextBox4" VerticalAlignment="Bottom" Watermark="電話番号" Mask="(999) 000-0000"/>
これで、コントロールにウォーターマークとマスクが追加されます。

XAML	コードのコピー
<c1:C1MaskedTextBox Height="23" Margin="14,0,12,33" Name="C1MaskedTextBox4" VerticalAlignment="Bottom" Watermark="電話番号" Mask="(999) 000-0000"/>

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

アプリケーションへのコードの追加

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

次の手順に従います。

［デザイン］ビューで、C1MaskedTextBox1 をダブルクリックしてコードビューに切り替え、C1MaskedTextBox1_TextChanged イベントハンドラを作成します。［デザイン］ビューに戻り、各 C1MaskedTextBox コントロールでこの手順を繰り返して、各コントロールに TextChanged イベントハンドラを作成します。
［コード］ビューで、次の import 文をページの先頭に追加します。

Visual Basic
コードのコピー
Imports C1.WPF       
C#
コードのコピー
using C1.WPF;       

Visual Basic	コードのコピー
Imports C1.WPF

C#	コードのコピー
using C1.WPF;

C1MaskedTextBox1_TextChanged イベントハンドラにコードを追加します。次のようになります。

Visual Basic	コードのコピー
Private Sub C1MaskedTextBox1_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs) Handles C1MaskedTextBox1.TextChanged Me.Label2.Content = "マスク： " & Me.C1MaskedTextBox1.Mask & " 値： " & Me.C1MaskedTextBox1.Value & " テキスト： " & Me.C1MaskedTextBox1.Text End Sub

Visual Basic

コードのコピー

Private Sub C1MaskedTextBox1_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs) Handles C1MaskedTextBox1.TextChanged
    Me.Label2.Content = "マスク： " & Me.C1MaskedTextBox1.Mask & "  値： " & Me.C1MaskedTextBox1.Value & "  テキスト： " & Me.C1MaskedTextBox1.Text
End Sub

C#	コードのコピー
private void c1mtb1_TextChanged(object sender, TextChangedEventArgs e) { this.lbl2.Content = "マスク： " + this.c1mtb1.Mask + " 値： " + this.c1mtb1.Value + " テキスト： " + this.c1mtb1.Text; }

コードのコピー

private void c1mtb1_TextChanged(object sender, TextChangedEventArgs e)
{
    this.lbl2.Content = "マスク： " + this.c1mtb1.Mask + " 値： " + this.c1mtb1.Value + " テキスト： " + this.c1mtb1.Text;
}

C1MaskedTextBox2_TextChanged イベントハンドラにコードを追加します。次のようになります。

Visual Basic	コードのコピー
Private Sub C1MaskedTextBox2_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs) Handles C1MaskedTextBox2.TextChanged Me.Label3.Content = "マスク： " & Me.C1MaskedTextBox2.Mask & " 値： " & Me.C1MaskedTextBox2.Value & " テキスト： " & Me.C1MaskedTextBox2.Text End Sub

Visual Basic

コードのコピー

Private Sub C1MaskedTextBox2_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs) Handles C1MaskedTextBox2.TextChanged
    Me.Label3.Content = "マスク： " & Me.C1MaskedTextBox2.Mask & "  値： " & Me.C1MaskedTextBox2.Value & "  テキスト： " & Me.C1MaskedTextBox2.Text
End Sub

C#	コードのコピー
private void c1MaskedTextBox2_TextChanged(object sender, TextChangedEventArgs e) { this.label3.Content = "マスク： " + this.c1MaskedTextBox2.Mask + " 値： " + this.c1MaskedTextBox2.Value + " テキスト： " + this.c1MaskedTextBox2.Text; }

コードのコピー

private void c1MaskedTextBox2_TextChanged(object sender, TextChangedEventArgs e)
{
    this.label3.Content = "マスク： " + this.c1MaskedTextBox2.Mask + " 値： " + this.c1MaskedTextBox2.Value + " テキスト： " + this.c1MaskedTextBox2.Text;
}

C1MaskedTextBox3_TextChanged イベントハンドラにコードを追加します。次のようになります。

Visual Basic	コードのコピー
Private Sub C1MaskedTextBox3_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs) Handles C1MaskedTextBox3.TextChanged Me.Label4.Content = "マスク： " & Me.C1MaskedTextBox3.Mask & " 値： " & Me.C1MaskedTextBox3.Value & " テキスト： " & Me.C1MaskedTextBox3.Text End Sub

Visual Basic

コードのコピー

Private Sub C1MaskedTextBox3_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs) Handles C1MaskedTextBox3.TextChanged
    Me.Label4.Content = "マスク： " & Me.C1MaskedTextBox3.Mask & "  値： " & Me.C1MaskedTextBox3.Value & "  テキスト： " & Me.C1MaskedTextBox3.Text
End Sub

C#	コードのコピー
private void c1MaskedTextBox3_TextChanged(object sender, TextChangedEventArgs e) { this.label4.Content = "マスク： " + this.c1MaskedTextBox3.Mask + " 値： " + this.c1MaskedTextBox3.Value + " Text: " + this.c1MaskedTextBox3.Text; }

コードのコピー

private void c1MaskedTextBox3_TextChanged(object sender, TextChangedEventArgs e)
{
    this.label4.Content = "マスク： " + this.c1MaskedTextBox3.Mask + " 値： " + this.c1MaskedTextBox3.Value + " Text: " + this.c1MaskedTextBox3.Text;
}

C1MaskedTextBox4_TextChanged イベントハンドラにコードを追加します。次のようになります。

Visual Basic	コードのコピー
Private Sub C1MaskedTextBox4_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs) Handles C1MaskedTextBox4.TextChanged Me.Label5.Content = "マスク： " & Me.C1MaskedTextBox4.Mask & " 値： " & Me.C1MaskedTextBox4.Value & " テキスト： " & Me.C1MaskedTextBox4.Text End Sub

Visual Basic

コードのコピー

Private Sub C1MaskedTextBox4_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs) Handles C1MaskedTextBox4.TextChanged
    Me.Label5.Content = "マスク： " & Me.C1MaskedTextBox4.Mask & "  値： " & Me.C1MaskedTextBox4.Value & "  テキスト： " & Me.C1MaskedTextBox4.Text
End Sub

C#	コードのコピー
private void c1MaskedTextBox4_TextChanged(object sender, TextChangedEventArgs e) { this.label5.Content = "マスク：" + this.c1MaskedTextBox4.Mask + " 値： " + this.c1MaskedTextBox4.Value + " テキスト： " + this.c1MaskedTextBox4.Text; }

コードのコピー

private void c1MaskedTextBox4_TextChanged(object sender, TextChangedEventArgs e)
{
    this.label5.Content = "マスク：" + this.c1MaskedTextBox4.Mask + " 値： " + this.c1MaskedTextBox4.Value + " テキスト： " + this.c1MaskedTextBox4.Text;
}

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

アプリケーションの実行

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

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

各 C1MaskedTextBox コントロールに表示されるウォーターマークに注目してください。

最初の C1MaskedTextBox コントロールに数字を入力します。

コントロールの下にあるラベルには、マスク、現在の値、および現在のテキストが表示されます。

２番目の C1MaskedTextBox コントロールに文字列を入力します。

このコントロールにはマスクが設定されていません。したがって、必要なら、数字も他の文字もコントロールに入力できます。

３番目の C1MaskedTextBox コントロールに文字列を入力してみます。入力できないことがわかります。Mask プロパティは、数字のみを受け付けるように設定されていました。代わりに数値を入力します。これは問題ありません。
残りのコントロールに数字を入力します。アプリケーションは次の図のように表示されます。

各 C1MaskedTextBox コントロールの下に表示される Value プロパティには、リテラル文字が含まれません。一方、Text プロパティにはリテラル文字が含まれます。

おめでとうございます!

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