メインコンテンツへスキップ

ナレッジベース

[FlexGrid for WinForms][Input for WinForms] FlexGridの会員情報一覧の入力画面を、Inputのコントロールを用いて作成する方法

作成日: 2024/01/31    最終更新日: 2024/01/31

 

文書種別

使用方法

 

詳細

Inputの各種コントロールを用いて会員情報を入力し、FlexGridに一覧として登録するサンプルを紹介します。

FlexGrid_Input_入力画面-s.png

氏名、メールアドレス、パスワードなどの入力にはC1TextBoxを用い、登録日の入力にはC1DateEditを、お知らせメールの可否にはC1CheckBoxを、カードの種類の選択にはC1DropDownControlをそれぞれ使用します。このC1DropDownControlには、ラジオボタンでの選択およびOKボタンを含む独自のフォームをプルダウンさせます。

この際、以下に示すようなInputコントロールの各種機能も利用します。
・C1TextBoxのImeSetKanaModeプロパティにより、氏名を入力したときに自動的にフリガナを設定
・メールアドレスの入力用C1TextBoxでは、入力可能な文字種を半角英数字に限定
・C1TextBoxのPasswordCharプロパティで、入力したパスワードを伏字で表示
・メールアドレスの入力ボックスを２つ用意し、Validatingイベントでこれらの入力値が一致しているかどうかを検査

入力を終了した後に「適用」ボタンをクリックし、入力値に問題がなければ※各種データをFlexGridの行に設定します。
※ 本サンプルでは、氏名とメールアドレスの入力が正しかどうかをチェックしています。

以下に、上記内容を設定するためのコードを記載します。
フォーム上に、８個のC1TextBox、２個のC1CheckBox、C1DateEdit／C1DropDownControl／c1ComboBoxおよびC1FlexGridをそれぞれ１つずつ追加し、下記コードを設定して動作をご確認ください。

なお、本ナレッジの最後にこのサンプルのプロジェクトファイルを添付します。
・FlexGrid_Input_VB.zip
・FlexGrid_Input_CS.zip

◎サンプルコード（VB） 
Imports C1.Win.C1Input
Imports C1.Win.C1Input.GrapeCity.Editors

Public Class Form1
    Dim nRow = 0
    Dim bFG = False

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        'c1DropDownControlの追加（DropDownForm1クラス）
        c1DropDownControl1.DropDownFormClassName = "FlexGrid_Input.DropDownForm1"
        c1DropDownControl1.ImagePadding = New Windows.Forms.Padding(0, 0, 0, 0)
        c1DropDownControl1.Tag = Nothing
        c1DropDownControl1.VisibleButtons = DropDownControlButtonFlags.DropDown

        ' -------- Inputの設定 --------
        ' 登録日の設定
        c1DateEdit1.FormatType = FormatTypeEnum.CustomFormat
        c1DateEdit1.CustomFormat = "yyyy/MM/dd"
        c1DateEdit1.Value = Date.Today 'デフォルト値
        c1DateEdit1.Placeholder = "日付を選択してください"
        c1DateEdit1.VisibleButtons = DropDownControlButtonFlags.DropDown 'ドロップダウンボタンを非表示

        ' 氏名入力ボックスのプレースホルダー
        c1TextBox1.Placeholder = "葡萄"
        c1TextBox2.Placeholder = "花子"

        ' フリガナの表示
        c1TextBox1.ImeSetKanaMode(KanaMode.Katakana)
        Dim output = New ReadingStringOutput(c1TextBox3, ReadingStringOutputMode.Append)
        c1TextBox1.ImeSetReadingStringOutput(output)
        c1TextBox2.ImeSetKanaMode(KanaMode.Katakana)
        Dim output2 = New ReadingStringOutput(c1TextBox4, ReadingStringOutputMode.Append)
        c1TextBox2.ImeSetReadingStringOutput(output2)

        ' メールアドレスに半角英数字のみの入力を許可
        c1TextBox5.CharCategory = CharCategory.SingleByte
        c1TextBox6.CharCategory = CharCategory.SingleByte

        ' パスワードの伏字（マスク）の設定
        c1TextBox7.PasswordChar = "*"c

        ' カード番号用マスク文字の設定
        c1TextBox8.EditMask = "9999 9999 9999 9999"

        ' カードの種類ドロップダウンのプレースホルダー
        c1DropDownControl1.Placeholder = "選択してください"

        ' 検証のためのイベント呼び出し
        c1TextBox1.CausesValidation = True
        c1TextBox2.CausesValidation = True
        c1TextBox5.CausesValidation = True
        c1TextBox6.CausesValidation = True

        ' ラベルの設定
        label11.Text = "氏名を入力してください"
        label12.Text = "メールアドレスを入力してください"
        label13.Text = ""
        label14.Text = ""


        ' -------- FlexGridの設定 --------
        ' ヘッダーの設定
        C1FlexGrid1(0, 1) = "登録日"
        C1FlexGrid1(0, 2) = "氏名"
        C1FlexGrid1(0, 3) = "フリガナ"
        C1FlexGrid1(0, 4) = "性別"
        C1FlexGrid1(0, 5) = "メールアドレス"
        C1FlexGrid1(0, 6) = "パスワード"
        C1FlexGrid1(0, 7) = "カードの種類"
        C1FlexGrid1(0, 8) = "カード番号"
        C1FlexGrid1(0, 9) = "お知らせ"

        ' チェックボックスの設定
        C1FlexGrid1.Cols(9).DataType = GetType(Boolean)
    End Sub

    Private Sub c1TextBox1_Validating(sender As Object, e As System.ComponentModel.CancelEventArgs) Handles c1TextBox1.Validating
        ' 苗字が入力されたかチェック
        bFG = True
        label11.Text = ""
        If c1TextBox1.Text Is "" Then
            'c1TextBox3.Text = "";
            label11.Text = "氏名を入力してください"
            bFG = False
        End If
    End Sub

    Private Sub c1TextBox1_TextChanged(sender As Object, e As EventArgs) Handles c1TextBox1.TextChanged
        ' 苗字のクリア時にフリガナをクリア
        If c1TextBox1.Text Is "" Then
            c1TextBox3.Text = ""
        End If
    End Sub

    Private Sub c1TextBox2_Validating(sender As Object, e As System.ComponentModel.CancelEventArgs) Handles c1TextBox2.Validating
        ' 名前が入力されたかチェック
        bFG = True
        label11.Text = ""
        If c1TextBox2.Text Is "" Then
            label11.Text = "氏名を入力してください"
            bFG = False
        End If
    End Sub

    Private Sub c1TextBox2_TextChanged(sender As Object, e As EventArgs) Handles c1TextBox2.TextChanged
        ' 名前のクリア時にフリガナをクリア
        If c1TextBox2.Text Is "" Then
            c1TextBox4.Text = ""
        End If
    End Sub

    Private Sub c1TextBox5_Validating(sender As Object, e As System.ComponentModel.CancelEventArgs) Handles c1TextBox5.Validating
        ' メールアドレスの入力をチェック
        bFG = True
        label12.Text = ""
        If c1TextBox5.Text Is "" Then
            label12.Text = "メールアドレスを入力してください"
            bFG = False
        End If
    End Sub

    Private Sub c1TextBox6_Validating(sender As Object, e As System.ComponentModel.CancelEventArgs) Handles c1TextBox7.Validating, c1TextBox6.Validating
        ' メールアドレス（再）の一致をチェック
        bFG = True
        label13.Text = ""
        If c1TextBox6.Text <> c1TextBox5.Text Then
            label13.Text = "メールアドレスが違っています"
            bFG = False
        End If
    End Sub

    Private Sub c1CheckBox2_CheckStateChanged(sender As Object, e As EventArgs) Handles c1CheckBox2.CheckStateChanged
        ' パスワードの伏字の解除・設定
        c1TextBox7.PasswordChar = "*"c
        If c1CheckBox2.CheckState = CheckState.Checked Then
            c1TextBox7.PasswordChar = Microsoft.VisualBasic.ChrW(0)
        End If
    End Sub

    Private Sub c1TextBox1_Click(sender As Object, e As EventArgs) Handles c1TextBox1.Click
        label14.Text = ""
    End Sub

    Private Sub c1TextBox5_Click(sender As Object, e As EventArgs) Handles c1TextBox5.Click
        label14.Text = ""
    End Sub

    Private Sub c1TextBox7_Click(sender As Object, e As EventArgs) Handles c1TextBox7.Click
        label14.Text = ""
    End Sub

    Private Sub c1Button1_Click(sender As Object, e As EventArgs) Handles c1Button1.Click
        label14.Text = ""
        If bFG = True Then
            ' FlexGridに入力値を適用
            nRow = nRow + 1
            C1FlexGrid1(nRow, 0) = nRow.ToString()
            C1FlexGrid1(nRow, 1) = c1DateEdit1.Text
            C1FlexGrid1(nRow, 2) = c1TextBox1.Text.ToString() & " " + c1TextBox2.Text
            C1FlexGrid1(nRow, 3) = c1TextBox3.Text.ToString() & " " + c1TextBox4.Text
            C1FlexGrid1(nRow, 4) = c1ComboBox1.Text
            C1FlexGrid1(nRow, 5) = c1TextBox5.Text
            C1FlexGrid1(nRow, 6) = c1TextBox7.Text
            C1FlexGrid1(nRow, 7) = c1DropDownControl1.Text
            C1FlexGrid1(nRow, 8) = c1TextBox8.Text

            C1FlexGrid1(nRow, 9) = False
            If c1CheckBox1.Checked = True Then
                C1FlexGrid1(nRow, 9) = True
            End If
        Else
            label14.Text = "データを確認してください"
        End If
    End Sub
End Class</>
◎サンプルコード（C#） 
using C1.Win.C1Input;
using C1.Win.C1Input.GrapeCity.Editors;

namespace FlexGrid_Input
{
    public partial class Form1 : Form
    {

        int nRow = 0;
        bool bFG = false;

        public Form1()
        {
            InitializeComponent();

            // c1DropDownControlの追加（DropDownForm1クラス）
            c1DropDownControl1.DropDownFormClassName = "FlexGrid_Input.DropDownForm1";
            c1DropDownControl1.ImagePadding = new System.Windows.Forms.Padding(0, 0, 0, 0);
            c1DropDownControl1.Tag = null;
            c1DropDownControl1.VisibleButtons = DropDownControlButtonFlags.DropDown;
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // -------- Inputの設定 --------
            // 登録日の設定
            c1DateEdit1.FormatType = FormatTypeEnum.CustomFormat;
            c1DateEdit1.CustomFormat = "yyyy/MM/dd";
            c1DateEdit1.Value = DateTime.Today; //デフォルト値
            c1DateEdit1.Placeholder = "日付を選択してください";
            c1DateEdit1.VisibleButtons = DropDownControlButtonFlags.DropDown; //ドロップダウンボタンを非表示

            // 氏名入力ボックスのプレースホルダー
            c1TextBox1.Placeholder = "葡萄";
            c1TextBox2.Placeholder = "花子";

            // フリガナの表示
            c1TextBox1.ImeSetKanaMode(KanaMode.Katakana);
            var output = new ReadingStringOutput(c1TextBox3, ReadingStringOutputMode.Append);
            c1TextBox1.ImeSetReadingStringOutput(output);
            c1TextBox2.ImeSetKanaMode(KanaMode.Katakana);
            var output2 = new ReadingStringOutput(c1TextBox4, ReadingStringOutputMode.Append);
            c1TextBox2.ImeSetReadingStringOutput(output2);

            // メールアドレスに半角英数字のみの入力を許可
            c1TextBox5.CharCategory = CharCategory.SingleByte;
            c1TextBox6.CharCategory = CharCategory.SingleByte;

            // パスワードの伏字（マスク）の設定
            c1TextBox7.PasswordChar = '*';

            // カード番号用マスク文字の設定
            c1TextBox8.EditMask = "9999 9999 9999 9999";

            // カードの種類ドロップダウンのプレースホルダー
            c1DropDownControl1.Placeholder = "選択してください";

            // 検証のためのイベント呼び出し
            c1TextBox1.CausesValidation = true;
            c1TextBox2.CausesValidation = true;
            c1TextBox5.CausesValidation = true;
            c1TextBox6.CausesValidation = true;

            // ラベルの設定
            label11.Text = "氏名を入力してください";
            label12.Text = "メールアドレスを入力してください";
            label13.Text = "";
            label14.Text = "";


            // -------- FlexGridの設定 --------
            // ヘッダーの設定
            c1FlexGrid1[0, 1] = "登録日";
            c1FlexGrid1[0, 2] = "氏名";
            c1FlexGrid1[0, 3] = "フリガナ";
            c1FlexGrid1[0, 4] = "性別";
            c1FlexGrid1[0, 5] = "メールアドレス";
            c1FlexGrid1[0, 6] = "パスワード";
            c1FlexGrid1[0, 7] = "カードの種類";
            c1FlexGrid1[0, 8] = "カード番号";
            c1FlexGrid1[0, 9] = "お知らせ";

            // チェックボックスの設定
            c1FlexGrid1.Cols[9].DataType = typeof(bool);
        }

        private void c1TextBox1_Validating(object sender, CancelEventArgs e)
        {
            // 苗字が入力されたかチェック
            bFG = true;
            label11.Text = "";
            if (c1TextBox1.Text == "")
            {
                //c1TextBox3.Text = "";
                label11.Text = "氏名を入力してください";
                bFG = false;
            }
        }

        private void c1TextBox1_TextChanged(object sender, EventArgs e)
        {
            // 苗字のクリア時にフリガナをクリア
            if (c1TextBox1.Text == "")
            {
                c1TextBox3.Text = "";
            }
        }

        private void c1TextBox2_Validating(object sender, CancelEventArgs e)
        {
            // 名前が入力されたかチェック
            bFG = true;
            label11.Text = "";
            if (c1TextBox2.Text == "")
            {
                label11.Text = "氏名を入力してください";
                bFG = false;
            }
        }

        private void c1TextBox2_TextChanged(object sender, EventArgs e)
        {
            // 名前のクリア時にフリガナをクリア
            if (c1TextBox2.Text == "")
            {
                c1TextBox4.Text = "";
            }
        }

        private void c1TextBox5_Validating(object sender, CancelEventArgs e)
        {
            // メールアドレスの入力をチェック
            bFG = true;
            label12.Text = "";
            if (c1TextBox5.Text == "")
            {
                label12.Text = "メールアドレスを入力してください";
                bFG = false;
            }
        }

        private void c1TextBox6_Validating(object sender, CancelEventArgs e)
        {
            // メールアドレス（再）の一致をチェック
            bFG = true;
            label13.Text = "";
            if (c1TextBox6.Text != c1TextBox5.Text)
            {
                label13.Text = "メールアドレスが違っています";
                bFG = false;
            }
        }

        private void c1CheckBox2_CheckStateChanged(object sender, EventArgs e)
        {
            // パスワードの伏字の解除・設定
            c1TextBox7.PasswordChar = '*';
            if (c1CheckBox2.CheckState == CheckState.Checked)
            {
                c1TextBox7.PasswordChar = (char)0;
            }
        }

        private void c1TextBox1_Click(object sender, EventArgs e)
        {
            label14.Text = "";
        }

        private void c1TextBox5_Click(object sender, EventArgs e)
        {
            label14.Text = "";
        }

        private void c1TextBox7_Click(object sender, EventArgs e)
        {
            label14.Text = "";
        }

        private void c1TextBox8_TextChanged(object sender, EventArgs e)
        {
            System.Diagnostics.Debug.WriteLine(c1TextBox7.Text);
        }

        private void c1Button1_Click(object sender, EventArgs e)
        {
            label14.Text = "";
            if (bFG == true)
            {
                // FlexGridに入力値を適用
                nRow = nRow + 1;
                c1FlexGrid1[nRow, 0] = nRow.ToString();
                c1FlexGrid1[nRow, 1] = c1DateEdit1.Text;
                c1FlexGrid1[nRow, 2] = c1TextBox1.Text + " " + c1TextBox2.Text;
                c1FlexGrid1[nRow, 3] = c1TextBox3.Text + " " + c1TextBox4.Text;
                c1FlexGrid1[nRow, 4] = c1ComboBox1.Text;
                c1FlexGrid1[nRow, 5] = c1TextBox5.Text;
                c1FlexGrid1[nRow, 6] = c1TextBox7.Text;
                c1FlexGrid1[nRow, 7] = c1DropDownControl1.Text;
                c1FlexGrid1[nRow, 8] = c1TextBox8.Text;

                c1FlexGrid1[nRow, 9] = false;
                if (c1CheckBox1.Checked == true)
                {
                    c1FlexGrid1[nRow, 9] = true;
                }
            }
            else
            {
                label14.Text = "データを確認してください";
            }
        }
    }
}
この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています