InputPanel は、行の詳細部分にコンパクトなレイアウトでデータを表示できる FlexGrid との統合をサポートしています。このコントロールを ComponentOne の FlexGrid コントロールに埋め込んで、RowDetailsTemplate を使用してデータを表示できます。このテンプレートを使用して、FlexGrid コントロールの各行の折りたたみ可能なセクション内に InputPanel を埋め込むことができます。

InputPanel を FlexGrid と統合するには、テンプレートを定義する必要があります。このテンプレートで、FlexGrid コントロールの RowDetailsTemplate プロパティに InputPanel コントロールを追加します。

次の図に、RowDetailsTemplate を使用して FlexGrid と統合した InputPanel を示します。

InputPanel を FlexGrid と統合するには

• 手順 1：アプリケーションの設定
• 手順 2：データソースの作成
• 手順 3：データソースへの FlexGrid の連結

先頭に戻る

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

1. UWP アプリケーションを作成し、FlexGrid コントロールを追加します。
2. FlexGrid の RowDetailsTemplate プロパティで、行の詳細部分に InputPanel コントロールを表示するためのデータテンプレートを作成します。

   XAML	コードのコピー
   <FlexGrid:C1FlexGrid x:Name="FlexGrid" Margin="20,50,0,10" HorizontalAlignment="Left" AlternatingRowBackground="{Binding GroupRowBackground, ElementName=FlexGrid}" > <FlexGrid:C1FlexGrid.RowDetailsTemplate> <DataTemplate> <InputPanel:C1InputPanel x:Name="InPanel" CurrentItem="{Binding}" HorizontalAlignment="Left"/> </DataTemplate> </FlexGrid:C1FlexGrid.RowDetailsTemplate> </FlexGrid:C1FlexGrid>

先頭に戻る

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

1. コードビューに切り替え、InputPanel に顧客の ID、名前、国、年齢、重量、電話番号などのレコードを追加するための 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 Sub New(id As String, country As String, name As String, age As Integer,
       weight As Double, occupation As Occupation,
       phone As String)
           Me.ID = id
           Me.国 = country
           Me.名前 = name
           Me.年齢 = age
           Me.重量 = weight
           Me.職業 = occupation
           Me.電話番号 = phone
       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 Customer(string id, string country, string name, int age,
                       double weight, Occupation occupation, string phone)
       {
           this.ID = id;
           this.国 = country;
           this.名前 = name;
           this.年齢 = age;
           this.重量 = weight;
           this.職業 = occupation;
           this.電話番号 = phone;
       }
   }
   
   public enum Occupation
   {
       医者,
       芸術家,
       教育者,
       エンジニア,
       支配人,
       その他
   }
   

2. クラスコンストラクタでプライベートメソッド InitializeFlexGrid を作成し、次のコードを追加してレコードのコレクションを作成します。
   • Visual Basic
   • C#

   • Visual Basic

   Dim data As New List(Of Customer)()
   data.Add(New Customer("100001", "米国", "Jack Danson",
            40, 102.03, 職業.支配人, "1371234567"))
   data.Add(New Customer("100002", "中国", "Tony Tian",
   32, 82.2, 職業.エンジニア, "1768423846"))
   data.Add(New Customer("100003", "イラン", "Larry Frommer",
            15, 40.432, 職業.芸術家, "8473637486"))
   data.Add(New Customer("100004", "ドイツ", "Charlie Krause",
            26, 69.32, 職業.医師, "675245438"))
   data.Add(New Customer("100005", "インド", "Mark Ambers",
            51, 75.45, 職業.その他, "1673643842"))
   

   • C#

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

3. MainPage クラスのコンストラクタで InitializeFlexGrid メソッドを呼び出します。

先頭に戻る

手順 3：データソースへの FlexGrid の連結

1. コードビューで、FlexGrid コントロールを Customer クラスに連結します（「クイックスタート」参照）。
   • Visual Basic
   • C#

   • Visual Basic

   'FlexGridをCustomerにバインドし、セルのマージを許可します
   FlexGrid.ItemsSource = data
   

   • C#

   //FlexGridをCustomerにバインドし、セルのマージを許可します
   FlexGrid.ItemsSource = data.ToList<Customer>();
   

2. アプリケーションをデバッグして、エラーがないかどうかを確認します。
3. ［F5］キーを押してアプリケーションを実行し、出力を確認します。

先頭に戻る