このクイックスタートガイドでは、リストを使用した InputPanel コントロールへのデータの追加と表示について詳しく説明します。最初に Visual Studio で UWPアプリケーションを作成し、そこに InputPanel コントロールを追加します。項目のリストを作成し、そのリストを InputPanel に連結します。

InputPanel コントロールにデータを追加して表示する単純な UWP アプリケーションを作成するには、次の手順に従います。

1. アプリケーションの設定
2. InputPanel へのデータの追加と表示

次の図に、C1InputPanel コントロールに表示されたレコードを示します。

アプリケーションの設定

1. Visual Studio で Blank App (ユニバーサル Windows)プロジェクトを作成します。
2. InputPanel コントロールを XAML デザイナに追加し、コントロールの名前を 'InPanel'に設定します。
   C1.UWP.InputPanel と共に、次の参照がアプリケーションに自動的に追加されます。
   • C1.UWP
   • C1.UWP.Calendar
   • C1.UWP.DateTimeEditors

先頭に戻る

InputPanel へのデータの追加と表示

1. コードビューに切り替え、データを定義するためにクラス Customer を追加します。
2. 次のコードを追加して、クラスに 1 つの列挙といくつかのプロパティを作成します。
   • Visual Basic
   • C#

   • Visual Basic

       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 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
   {
       医者,
       芸術家,
       教育者,
       エンジニア,
       支配人,
       その他
   }
   

3. 次のコードを使用して、Customer のリストを作成し、リストにデータを追加します。
   • Visual Basic
   • C#

   • Visual Basic

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

   • C#

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

4. 次のコードに示すように、 ItemsSource プロパティを使用してリストを InputPanel に連結します。
   • Visual Basic
   • C#

   • Visual Basic

   InPanel.ItemsSource = data
   

   • C#

   InPanel.ItemsSource = data;
   

先頭に戻る