InputPanel は、MS DataGrid、ComponentOne の FlexGrid、DataGrid などのグリッドコントロールとのシームレスな統合をサポートしています。これらのグリッドコントロールには、RowDetailsTemplate というデータテンプレートが組み込まれており、これを使用して、各行の折りたたみ可能なセクション内に UI 要素を埋め込むことができます。このテンプレートを使用して InputPanel を埋め込み、各行の詳細をコンパクトなレイアウトで表示することができます。このテンプレートを XAML ビューで操作し、コードで連結を設定して、統合を実装することができます。このセクションでは、InputPanel を FlexGrid コントロールと統合する方法について説明します。

次の図に、FlexGrid（C1FlexGrid）と統合された InputPanel を示します。

InputPanel を ComponentOne FlexGrid と統合するには

• 手順 1：アプリケーションの設定
• 手順 2：データソースの作成
• 手順 3：InputPanel と FlexGrid との統合

先頭に戻る

手順 1：アプリケーションの設定

1. WPF アプリケーションを作成し、デザイナに InputPanel コントロールを追加します。
2. C1.WPF.DataGrid dll をアプリケーションの References フォルダに追加します。
3. XAML ビューでグリッドの RowDetailsTemplate を初期化し、次のように連結プロパティを設定します。

   XAML	コードのコピー
   <c1:C1FlexGrid Name="flexgrid"> <c1:C1FlexGrid.RowDetailsTemplate> <DataTemplate> <c1:C1InputPanel CurrentItem="{Binding .}"/> </DataTemplate> </c1:C1FlexGrid.RowDetailsTemplate> </c1:C1FlexGrid>

手順 2：データソースの作成

1. InputPanel にレコードを追加するための Customer クラスを作成し、職業 フィールドの値を受け入れる列挙を作成します。
   • Visual Basic
   • C#

   • Visual Basic

   Public Class Customer
       Public Property ID() As String
           Get
               Return m_ID
           End Get
           Set
               m_ID = Value
           End Set
       End Property
       Private m_ID As String
       Public Property 国() As String
           Get
               Return m_Country
           End Get
           Set
               m_Country = Value
           End Set
       End Property
       Private m_Country As String
   
       Public Property 名前() As String
           Get
               Return m_Name
           End Get
           Set
               m_Name = Value
           End Set
       End Property
       Private m_Name As String
   
   
       Public Property 年齢() As Integer
           Get
               Return m_Age
           End Get
           Set
               m_Age = Value
           End Set
       End Property
       Private m_Age As Integer
       Public Property 重量() As Double
           Get
               Return m_Weight
           End Get
           Set
               m_Weight = Value
           End Set
       End Property
       Private m_Weight As Double
       Public Property 職業() As Occupation
           Get
               Return m_Occupation
           End Get
           Set
               m_Occupation = Value
           End Set
       End Property
       Private m_Occupation As Occupation
       Public Property 電話番号() As String
           Get
               Return m_Phone
           End Get
           Set
               m_Phone = Value
           End Set
       End Property
       Private m_Phone As String
       Public Property 給料() As Integer
           Get
               Return m_Salary
           End Get
           Set
               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
   

   • C#

   public class Customer
   {
       public string ID { get; set; }
       public string 国 { get; set; }
   
       public string 名前 { get; set; }
   
   
       public int 年齢 { get; set; }
       public double 重量 { get; set; }
       public 職業 Occupation { get; set; }
       public string 電話番号 { get; set; }
       public int 給料 { 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
   {
       医者,
       芸術家,
       教育者,
       エンジニア,
       重役,
       その他
   }
   

2. 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, 職業.重役,
   "1371234567", 400000000))
   data.Add(New Customer("100002", "中国", "Tony Tian", 32, 82.2, 職業.エンジニア,
   "1768423846", 500))
   data.Add(New Customer("100003", "イラン", "Larry Frommer", 15, 40.432, 職業.芸術家,
   "8473637486", 600))
   data.Add(New Customer("100004", "ドイツ", "Charlie Krause", 26, 69.32, 職業.医者,
   "675245438", 700))
   data.Add(New Customer("100005", "インド", "Mark Ambers", 51, 75.45, 職業.その他,
   "1673643842", 800))
   

   • C#

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

先頭に戻る

手順 3：InputPanel と FlexGrid との統合

1. InputPanel を FlexGrid と統合するには、クラスコンストラクタでグリッドの ItemsSource プロパティをコレクションに設定します。
   • Visual Basic
   • C#

   • Visual Basic

   flexgrid.ItemsSource = data
   

   • C#

   flexgrid.ItemsSource = data.ToList<Customer>();
   

先頭に戻る