InputPanel と DataGrid の統合

InputPanel と ComponentOne の DataGrid または MS DataGrid の統合は簡単です。これは、どちらのコントロールにもテンプレート RowDetailsTemplate が埋め込まれているためです。このテンプレートを使用して、行の詳細をコンパクトなレイアウトに簡単に表示することができます。このテンプレートをデザインビューで操作し、XAML ビューで連結を設定して、統合を実装することができます。

次の図に、データグリッド（C1DataGrid）と統合された InputPanel を示します。

InputPanel を ComponentOne DataGrid と統合するには、次の手順を実行します。

アプリケーションの設定
データソースの作成
InputPanel と DataGrid との統合

先頭に戻る

アプリケーションの設定

WPF アプリケーションを作成し、デザイナに InputPanel コントロールを追加します。
C1.WPF.DataGrid dll をアプリケーションの References フォルダに追加します。

XAML でグリッドの RowDetailsTemplate を初期化し、次のように連結プロパティを設定します。

XAML	コードのコピー
<DataGrid Name="dataGrid" Margin="0,0,0,10"> <DataGrid.RowDetailsTemplate> <DataTemplate> <c1:C1InputPanel CurrentItem="{Binding .}" /> </DataTemplate> </DataGrid.RowDetailsTemplate> </DataGrid>

データソースの作成

InputPanel にレコードを追加するための Customer クラスを作成し、Occupation フィールドの値を受け入れる列挙を作成します。

Visual Basic
C#

Visual Basic

Public Class Customer
    Public Property ID() As String
        Get
            Return m_ID
        End Get
        Set(value As String)
            m_ID = Value
        End Set
    End Property
    Private m_ID As String
    Public Property 国() As String
        Get
            Return m_Country
        End Get
        Set(value As String)
            m_Country = Value
        End Set
    End Property
    Private m_Country As String

    Public Property 名前() As String
        Get
            Return m_Name
        End Get
        Set(value As String)
            m_Name = Value
        End Set
    End Property
    Private m_Name As String


    Public Property 年齢() As Integer
        Get
            Return m_Age
        End Get
        Set(value As Integer)
            m_Age = Value
        End Set
    End Property
    Private m_Age As Integer
    Public Property 重量() As Double
        Get
            Return m_Weight
        End Get
        Set(value As Double)
            m_Weight = Value
        End Set
    End Property
    Private m_Weight As Double
    Public Property 職業() As Occupation
        Get
            Return m_Occupation
        End Get
        Set(value As Occupation)
            m_Occupation = Value
        End Set
    End Property
    Private m_Occupation As Occupation
    Public Property 電話番号() As String
        Get
            Return m_Phone
        End Get
        Set(value As String)
            m_Phone = Value
        End Set
    End Property
    Private m_Phone As String
    Public Property 給料() As Integer
        Get
            Return m_Salary
        End Get
        Set(value As Integer)
            m_Salary = Value
        End Set
    End Property
    Private m_Salary As Integer

    Public Sub New(id As String, country As String, _
                   name As String, age As Integer, weight As Double, _
                   occupation As Occupation, _
        phone As String, salary As Integer)
        Me.ID = id
        Me.国 = country
        Me.名前 = name
        Me.年齢 = age
        Me.重量 = weight
        Me.職業 = occupation
        Me.電話番号 = phone
        Me.給料 = salary
    End Sub
End Class

Public Enum Occupation
        医者,
        芸術家,
        教育者,
        エンジニア,
        重役,
        その他
End Enum

public class Customer
{
   public string ID { get; set; }
    public string 国 { get; set; }     
    public string 名前 { get; set; }
    public string 電話番号 { get; set; }
    public int 給料 { get; set; }
    public int 年齢 { get; set; }
    public double 重量 { get; set; }
    public Occupation 職業 { get; set; }

    public Customer(string id, string country, string name, 
        int age, double weight, Occupation occupation, string phone, int salary)
    {
        this.ID = id;
        this.国 = country;
        this.名前 = name;
        this.年齢 = age;
        this.重量 = weight;
        this.職業 = occupation;
        this.電話番号 = phone;
        this.給料 = salary;
    }
}

public enum Occupation
{
    医者,
    芸術家,
    教育者,
    エンジニア,
    重役,
    その他
}

MainWindow.xaml.cs ファイルに切り替え、次のコードを追加して、クラスコンストラクタでレコードのコレクションを作成します。

Visual Basic
C#

Visual Basic

        Dim data As New List(Of Customer)()
             data.Add(new Customer("100001", "米国", "Jack Danson", 40, 102.03, _
Occupation.重役, "1371234567", 400000000));
            data.Add(new Customer("100002", "中国", "Tony Tian", 32, 82.2, _
Occupation.エンジニア, "1768423846", 500));
            data.Add(new Customer("100003", "イラン", "Larry Frommer", 15, 40.432, _
Occupation.芸術家, "8473637486", 600));
            data.Add(new Customer("100004", "ドイツ", "Charlie Krause", 26, 69.32, _
Occupation.医者, "675245438", 700));
            data.Add(new Customer("100005", "インド", "Mark Ambers", 51, 75.45, _
Occupation.その他, "1673643842", 800));

List<Customer> data = new List<Customer>();
 data.Add(new Customer("100001", "米国", "Jack Danson", 40, 102.03, _
 Occupation.重役, "1371234567", 400000000));
data.Add(new Customer("100002", "中国", "Tony Tian", 32, 82.2, _
Occupation.エンジニア, "1768423846", 500));
data.Add(new Customer("100003", "イラン", "Larry Frommer", 15, 40.432, _
Occupation.芸術家, "8473637486", 600));
data.Add(new Customer("100004", "ドイツ", "Charlie Krause", 26, 69.32, _
Occupation.医者, "675245438", 700));
data.Add(new Customer("100005", "インド", "Mark Ambers", 51, 75.45, _
Occupation.その他, "1673643842", 800));

先頭に戻る

InputPanel と DataGrid との統合

InputPanel をデータグリッドと統合するには、クラスコンストラクタでデータグリッドの ItemsSource プロパティをコレクションに設定します。
- Visual Basic
- C#
- Visual Basic
dataGrid.ItemsSource = data
- C#
dataGrid.ItemsSource = data.ToList<Customer>();

先頭に戻る

同様に、InputPanel コントロールを MS DataGrid と統合することができます。それには、その RowDetailTemplate プロパティを使用します。