InputPanel for UWP | ComponentOne
Data Binding / Binding InputPanel with ObservableCollection
In This Topic
    Binding InputPanel with ObservableCollection
    In This Topic

    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