ComponentOne InputPanel for UWP
Binding InputPanel with ObservableCollection
Data Binding > Binding InputPanel with ObservableCollection

Collection binding can be implemented in InputPanel using ObservableCollection which works similar to a regular collection. To bind InputPanel to an ObservableCollection, the ObservableCollection<T> class is used to obtain a collection, which acts as a binding source and then the ItemsSource property gets this collection to bind it to the InputPanel control.

Perform the following steps for data binding using ObservableCollection<T> class:

  1. Set up the application
  2. Create a data source for InputPanel
  3. Bind InputPanel to ObservableCollection

Set up the application

  1. Create a UWP application.
  2. Add the InputPanel control to the application and name it InPanel.
Back to Top

Create a data source for InputPanel

  1. Add a new class, Employee.cs, to the application.
  2. Add the data generators and fields to the class. 
    '' ** fields
Private cid As Integer
Private eid As Integer
Private empoccupation As EOccupation
Private firstname As String, lastname As String
Private empfather As String
Private activeemp As Boolean
Private hiredate As DateTime
Private empweight As Double

' ** data generators
Shared rnd As New Random()
Shared firstNames As String() = "Andy|Ben|Charlie|Fred|Jack|Karl|Larry|Mark".Split("|"c)
Shared lastNames As String() = "Ambers|Cole|Danson|Myers|Paulson|Richards".Split("|"c)
Shared countries As String() = "China|India|United States|Brazil|Russia|Japan".Split("|"c)

    // ** fields
int id, cid;
string first, last;
string father;
EOccupation occupation;
bool active;
DateTime hired;
double weight;

// ** data generators
static Random rnd = new Random();
static string[] firstNames = "Andy|Ben|Charlie|Fred|Jack|Karl|Larry|Mark".Split('|');
static string[] lastNames = "Ambers|Cole|Danson|Myers|Paulson|Richards".Split('|');
static string[] countries = "China|India|United States|Brazil|Russia|Japan".Split('|');
  3. Add properties to the class using the following code. 
    Public Property ID() As Integer
    Get
        Return eid
    End Get
    Set
        If Value <> eid Then
            eid = Value
        End If
    End Set
End Property
Public ReadOnly Property Country() As String
    Get
        Return countries(cid)
    End Get
End Property

Public Property CountryID() As Integer
    Get
        Return cid
    End Get
    Set
        If Value <> cid AndAlso Value > -1 AndAlso Value < countries.Length Then
            cid = Value
        End If
    End Set
End Property

Public Property Occupation() As EOccupation
    Get
        Return empoccupation
    End Get
    Set
        If Value <> empoccupation Then
            empoccupation = Value
        End If
    End Set
End Property

Public Property Active() As Boolean
    Get
        Return activeemp
    End Get
    Set
        If Value <> activeemp Then
            activeemp = Value
        End If
    End Set
End Property

Public Property First() As String
    Get
        Return firstname
    End Get
    Set
        If Value <> firstname Then
            firstname = Value
        End If
    End Set
End Property

Public Property Last() As String
    Get
        Return lastname
    End Get
    Set
        If Value <> lastname Then
            lastname = Value
        End If
    End Set
End Property

Public Property Hired() As DateTime
    Get
        Return hiredate
    End Get
    Set
        If Value <> hiredate Then
            hiredate = Value
        End If
    End Set
End Property

Public Property Weight() As Double
    Get
        Return empweight
    End Get
    Set
        If Value <> empweight Then
            empweight = Value
        End If
    End Set
End Property

' some read-only stuff
Public ReadOnly Property Father() As String
    Get
        Return empfather
    End Get
End Property

' ** utilities
Private Shared Function GetString(arr As String()) As String
    Return arr(rnd.[Next](arr.Length))
End Function

' ** static value providers
Public Shared Function GetCountries() As String()
    Return countries
End Function
Public Shared Function GetFirstNames() As String()
    Return firstNames
End Function
Public Shared Function GetLastNames() As String()
    Return lastNames
End Function

    public int ID
{
    get { return id; }
    set
    {
        if (value != id)
        {
            id = value;
        }
    }
}
public string Name
{
    get { return string.Format("{0} {1}", First, Last); }
}
        
public string Country
{
    get { return countries[cid]; }
}

        
public int CountryID
{
    get { return cid; }
    set
    {
        if (value != cid && value > -1 && value < countries.Length)
        {
            cid = value;
        }
    }
}

        
public EOccupation Occupation
{
    get
    {
        return occupation;
    }
    set
    {
        if (value != occupation)
        {
            occupation = value;
        }
    }
}


        
public bool Active
{
    get { return active; }
    set
    {
        if (value != active)
        {
            active = value;
        }
    }
}

        
public string First
{
    get { return first; }
    set
    {
        if (value != first)
        {
            first = value;
        }
    }
}

        
public string Last
{
    get { return last; }
    set
    {
        if (value != last)
        {
            last = value;
        }
    }
}

        
public DateTime Hired
{
    get { return hired; }
    set
    {
        if (value != hired)
        {
            hired = value;
        }
    }
}

        
public double Weight
{
    get { return weight; }
    set
    {
        if (value != weight)
        {
            weight = value;
        }
    }
}

// some read-only stuff
public string Father
{
    get { return father; }
}

// ** utilities
static string GetString(string[] arr)
{
    return arr[rnd.Next(arr.Length)];
}

// ** static value providers
public static string[] GetCountries() { return countries; }
public static string[] GetFirstNames() { return firstNames; }
public static string[] GetLastNames() { return lastNames; }
  4. Create a constructor of Employee class and add the following code to it. 
    Private values As Array = [Enum].GetValues(GetType(EOccupation))
Public Sub New(eid As Integer)
    ID = eid
    First = GetString(firstNames)
    Last = GetString(lastNames)
    CountryID = rnd.[Next]() Mod countries.Length
    Occupation = DirectCast(values.GetValue(rnd.[Next] _
                 (values.Length - 1)), EOccupation)
    Active = rnd.NextDouble() >= 0.5
    Hired = DateTime.Today.AddDays(-rnd.[Next](1, 365))
    Weight = 50 + rnd.NextDouble() * 50
    empfather = String.Format("{0} {1}", GetString(firstNames), Last)
End Sub

    Array values = Enum.GetValues(typeof(EOccupation));
public Employee(int id)
{
    ID = id;
    First = GetString(firstNames);
    Last = GetString(lastNames);
    CountryID = rnd.Next() % countries.Length;
    Occupation = (EOccupation)(values.GetValue(rnd.Next
                 (values.Length - 1)));
    Active = rnd.NextDouble() >= .5;
    Hired = DateTime.Today.AddDays(-rnd.Next(1, 365));
    Weight = 50 + rnd.NextDouble() * 50;
    father = string.Format("{0} {1}", GetString(firstNames), Last);
}
  5. Create a method, GetEmployeeList, of ObservableCollection<T> class using the following code. 
    ' ** static list provider
Public Shared Function GetEmployeeList(count As Integer) _
    As ObservableCollection(Of Employee)
    Dim list = New ObservableCollection(Of Employee)()
    For i As Integer = 0 To count - 1
        Dim emp As New Employee(i)
        list.Add(emp)
    Next
    Return list
End Function

    // ** static list provider
public static ObservableCollection<Employee> GetEmployeeList(int count)
{
    var list = new ObservableCollection<Employee>();
    for (int i = 0; i < count; i++)
    {
        Employee emp = new Employee(i);
        list.Add(emp);
    }
    return list;
}
Back to Top

Bind InputPanel to ObservableCollection

  1. Add the following code to bind the InputPanel control with data using the ItemsSource property. 
    InPanel.ItemsSource = Employee.GetEmployeeList(50)

    InPanel.ItemsSource = Employee.GetEmployeeList(50);
  2. Press F5 to run the application.
Back to Top
See Also
Data Binding
Binding InputPanel with CollectionView

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page