# Quick Start

## Content

This quick start familiarizes you with adding and displaying data to the InputPanel control using list. You begin with creating a WPF application in Visual Studio, adding the InputPanel control to it, creating a list of items, and binding it to InputPanel.

To create a simple WPF application for adding and displaying data in the InputPanel control, complete the following steps:

1. [Setting up the application](/componentone/docs/wpf/online-inputpanel/QuickStart#setting-up-the-application)
2. [Adding and displaying data in InputPanel](/componentone/docs/wpf/online-inputpanel/QuickStart#adding-and-displaying-data-in-inputpanel)

The following image shows a record displayed in the C1InputPanel control.

![](https://cdn.mescius.io/document-site-files/images/004dc683-5d50-40fc-ab9e-000a523035d7/images/inputpanel-quickstart.png)

### Setting up the application

1. Create a **WPF** project in Visual Studio.
2. Add the **InputPanel** control to the **XAML** designer and set the name of the control to **'InPanel'**.
    Notice that along with C1.WPF.InputPanel, the following references automatically get added to the application.
    * C1.WPF
    * C1.WPF.DateTimeEditors

### Adding and displaying data in InputPanel

1. Switch to the code view and add a class, **Customer**, to define data.
2. Add the following code to create an enumeration and add properties to the class. 

    ```vbnet
    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 Country() 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 Name() As String
            Get
                Return m_Name
            End Get
            Set(value As String)
                m_Name = value
            End Set
        End Property
        Public Property Phone() As String
            Get
                Return m_Phone
            End Get
            Set(value As String)
                m_Phone = value
            End Set
        End Property
        Private m_Phone As String
        Private m_Name As String
        Public Property Age() 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 Weight() 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 Occupation() 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 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 = country
            Me.Name = name
            Me.Age = age
            Me.Weight = weight
            Me.Occupation = occupation
            Me.Phone = phone
        End Sub
    End Class
    Public Enum Occupation
        Doctor
        Artist
        Educator
        Engineer
        Executive
        Other
    End Enum
    ```

    **csharp**

    ```csharp
    public class Customer
    {
        public string ID { get; set; }
        public string Country { get; set; }
        public string Name { get; set; }
        public string Phone { get; set; }
        public int Salary { get; set; }
        public int Age { get; set; }
        public double Weight { get; set; }
        public Occupation 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 = country; 
            this.Name = name; 
            this.Age = age; 
            this.Weight = weight; 
            this.Occupation = occupation; 
            this.Phone = phone;
            this.Salary = salary;
        }
    }
    public enum Occupation
    {
        Doctor,
        Artist,
        Educator,
        Engineer,
        Executive,
        Other
    }
    ```
3. Creates a list of Customers and add data to the list using the following code.

    ```vbnet
    Dim data As New List(Of Customer)()
    data.Add(New Customer("100001", "United States",
                          "Jack Danson", 40, 102.03,
                          Occupation.Executive, _
        "1371234567"))
    data.Add(New Customer("100002", "China",
                          "Tony Tian", 32, 82.2,
                          Occupation.Engineer, _
        "1768423846"))
    data.Add(New Customer("100003", "Iran",
                          "Larry Frommer", 15, 40.432,
                          Occupation.Artist, _
        "8473637486"))
    data.Add(New Customer("100004", "Germany",
                          "Charlie Krause", 26, 69.32,
                          Occupation.Doctor, _
        "675245438"))
    data.Add(New Customer("100005", "India",
                          "Mark Ambers", 51, 75.45,
                          Occupation.Other, _
        "1673643842"))
    ```

    ```csharp
    List<Customer> data = new List<Customer>();
    data.Add(new Customer("100001", "United States", "Jack Danson", 
        40, 102.03, Occupation.Executive, "1371234567", 400000000));
    data.Add(new Customer("100002", "China", "Tony Tian", 
        32, 82.2, Occupation.Engineer, "1768423846", 500));
    data.Add(new Customer("100003", "Iran", "Larry Frommer", 
        15, 40.432, Occupation.Artist, "8473637486", 600));
    data.Add(new Customer("100004", "Germany", "Charlie Krause", 
        26, 69.32, Occupation.Doctor, "675245438", 700));
    data.Add(new Customer("100005", "India", "Mark Ambers", 
        51, 75.45, Occupation.Other, "1673643842", 800));
    ```
4. Bind the list to InputPanel through the [ItemsSource](/componentone/api/wpf/online-inputpanel/dotnet-framework-api/C1.WPF.InputPanel.4.6.2/C1.WPF.InputPanel.C1InputPanel.ItemsSource.html) property as given in the following code.

```vbnet
 InPanel.ItemsSource = data
```

```csharp
 InPanel.ItemsSource = data;
```

## See Also

[Key Features](/componentone/docs/wpf/online-inputpanel/KeyFeatures)

[Data Binding](/componentone/docs/wpf/online-inputpanel/DataBinding)