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

    Collection binding can be implemented in InputPanel using ICollectionView, an interface with record management, filtering, grouping, and sorting functionalities. To bind InputPanel to an ObservableCollection, InputPanel can be bound to an object that implements the ICollectionView interface. In the following example, we have used the ObservableCollection<T> class as a binding source to obtain the collection and the C1CollectionView class that implements the ICollectionView interface to display the source collection. Later, bind the InputPanel control to the ICollectionView using ItemsSource property of C1InputPanel class.

    Perform the following steps for data binding using ICollectionView:

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

    Set up the application

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

    Create a data source for InputPanel

    1. Add a new class, Product.cs, to the application.
    2. Add the following fields to the class. 
      Shared lines As String() = "Computers|Washers|Stoves".Split("|"c)
Shared colors As String() = "Red|Green|Blue|White".Split("|"c)

      static string[] lines = "Computers|Washers|Stoves".Split('|');
static string[] colors = "Red|Green|Blue|White".Split('|');
    3. Add the following properties and methods to the class. 
          <Display(Name:="Line")>
    Public Property Line() As String
        Get
            Return DirectCast(GetValue("Line"), String)
        End Get
        Set
            SetValue("Line", Value)
        End Set
    End Property

    <Display(Name:="Color")>
    Public Property Color() As String
        Get
            Return DirectCast(GetValue("Color"), String)
        End Get
        Set
            SetValue("Color", Value)
        End Set
    End Property

    <Display(Name:="Name")>
    Public Property Name() As String
        Get
            Return DirectCast(GetValue("Name"), String)
        End Get
        Set
            SetValue("Name", Value)
        End Set
    End Property

    <Display(Name:="Price")>
    Public Property Price() As Double
        Get
            Return CDbl(GetValue("Price"))
        End Get
        Set
            SetValue("Price", Value)
        End Set
    End Property

    <Display(Name:="Weight")>
    Public Property Weight() As Double
        Get
            Return CDbl(GetValue("Weight"))
        End Get
        Set
            SetValue("Weight", Value)
        End Set
    End Property

    <Display(Name:="Cost")>
    Public Property Cost() As Double
        Get
            Return CDbl(GetValue("Cost"))
        End Get
        Set
            SetValue("Cost", Value)
        End Set
    End Property

    <Display(Name:="Volume")>
    Public Property Volume() As Double
        Get
            Return CDbl(GetValue("Volume"))
        End Get
        Set
            SetValue("Volume", Value)
        End Set
    End Property

    <Display(Name:="Discontinued")>
    Public Property Discontinued() As Boolean
        Get
            Return CBool(GetValue("Discontinued"))
        End Get
        Set
            SetValue("Discontinued", Value)
        End Set
    End Property

    <Display(Name:="Rating")>
    Public Property Rating() As Integer
        Get
            Return CInt(GetValue("Rating"))
        End Get
        Set
            SetValue("Rating", Value)
        End Set
    End Property

    ' get/set values
    Private values As New Dictionary(Of String, Object)()
    Private Function GetValue(p As String) As Object
        Dim value As Object
        values.TryGetValue(p, value)
        Return value
    End Function
    Private Sub SetValue(p As String, value As Object)
        If Not Object.Equals(value, GetValue(p)) Then
            values(p) = value
            OnPropertyChanged(p)
        End If
    End Sub
    Protected Overridable Sub OnPropertyChanged(p As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(p))
    End Sub

    Public Shared Function GetLines() As String()
        Return lines
    End Function


#Region "INotifyPropertyChanged Members"

    Public Event PropertyChanged As PropertyChangedEventHandler _
        Implements INotifyPropertyChanged.PropertyChanged

      [Display(Name = "Line")]
public string Line
{
    get { return (string)GetValue("Line"); }
    set { SetValue("Line", value); }
}

[Display(Name = "Color")]
public string Color
{
    get { return (string)GetValue("Color"); }
    set { SetValue("Color", value); }
}

[Display(Name = "Name")]
public string Name
{
    get { return (string)GetValue("Name"); }
    set { SetValue("Name", value); }
}

[Display(Name = "Price")]
public double Price
{
    get { return (double)GetValue("Price"); }
    set { SetValue("Price", value); }
}

[Display(Name = "Weight")]
public double Weight
{
    get { return (double)GetValue("Weight"); }
    set { SetValue("Weight", value); }
}

[Display(Name = "Cost")]
public double Cost
{
    get { return (double)GetValue("Cost"); }
    set { SetValue("Cost", value); }
}

[Display(Name = "Volume")]
public double Volume
{
    get { return (double)GetValue("Volume"); }
    set { SetValue("Volume", value); }
}

[Display(Name = "Discontinued")]
public bool Discontinued
{
    get { return (bool)GetValue("Discontinued"); }
    set { SetValue("Discontinued", value); }
}

[Display(Name = "Rating")]
public int Rating
{
    get { return (int)GetValue("Rating"); }
    set { SetValue("Rating", value); }
}

// get/set values
Dictionary<string, object> values = new Dictionary<string, object>();
object GetValue(string p)
{
    object value;
    values.TryGetValue(p, out value);
    return value;
}
void SetValue(string p, object value)
{
    if (!object.Equals(value, GetValue(p)))
    {
        values[p] = value;
        OnPropertyChanged(p);
    }
}
protected virtual void OnPropertyChanged(string p)
{
    if (PropertyChanged != null)
        PropertyChanged(this, new PropertyChangedEventArgs(p));
}
        
public static string[] GetLines()
{
    return lines;
}


#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged;
    4. Create a method, GetProducts, of IEnumerable interface using the following code. 
      Public Shared Function GetProducts(count As Integer) As IEnumerable
    Dim list = New ObservableCollection(Of Products)()

    Dim rnd = New Random(0)
    For i As Integer = 0 To count - 1
        Dim p = New Products()
        p.Line = lines(rnd.[Next]() Mod lines.Length)
        p.Color = colors(rnd.[Next]() Mod colors.Length)
        p.Name = String.Format("{0} {1}{2}",
                 p.Line.Substring(0, p.Line.Length - 1),
                 p.Line(0), i)
        p.Price = (rnd.[Next](1, 1000) + rnd.[Next](1, 1000) _
                  + rnd.[Next](1, 1000)) / 3
        p.Weight = (rnd.[Next](1, 100) + rnd.[Next](1, 100) _
                   + rnd.[Next](1, 300)) / 5
        p.Cost = rnd.[Next](1, 600)
        p.Volume = rnd.[Next](500, 5000)
        p.Discontinued = rnd.NextDouble() < 0.1
        p.Rating = rnd.[Next](0, 5)
        list.Add(p)
    Next
    Return list
End Function

      public static IEnumerable GetProducts(int count)
{
    var list = new ObservableCollection<Products>();

    var rnd = new Random(0);
    for (int i = 0; i < count; i++)
    {
        var p = new Products();
        p.Line = lines[rnd.Next() % lines.Length];
        p.Color = colors[rnd.Next() % colors.Length];
        p.Name = string.Format("{0} {1}{2}", 
                 p.Line.Substring(0, p.Line.Length - 1),
                 p.Line[0], i);
        p.Price = (rnd.Next(1, 1000) + rnd.Next(1, 1000) + 
                  rnd.Next(1, 1000)) / 3;
        p.Weight = (rnd.Next(1, 100) + rnd.Next(1, 100) + 
                   rnd.Next(1, 300)) / 5;
        p.Cost = rnd.Next(1, 600);
        p.Volume = rnd.Next(500, 5000);
        p.Discontinued = rnd.NextDouble() < .1;
        p.Rating = rnd.Next(0, 5);
        list.Add(p);
    }
    return list;
}
    5. Add the following code to create a property, CustomerCollectionView, of ICollectionView interface which uses the C1CollectionView class to display the source collection. 
      Private Shared view As ICollectionView
Public Shared ReadOnly Property CustomerCollectionView() As ICollectionView
    Get
        If view Is Nothing Then
            Dim products__1 = Products.GetProducts(50)
            view = New C1CollectionView(products__1)
        End If
        Return view
    End Get
End Property

      private static ICollectionView view;
public static ICollectionView CustomerCollectionView
{
    get
    {
        if (view == null)
        {
            var products = Products.GetProducts(50);
            view = new C1CollectionView(products);
        }
        return view;
    }
}
    Back to Top

    Bind InputPanel to ICollectionView

    1. Add the following code to bind the InputPanel control with data using the ItemsSource property. 
      InPanel.ItemsSource = CustomerCollectionView

      InPanel.ItemsSource = CustomerCollectionView;
    2. Press F5 to run the application.
    Back to Top
    See Also
    Data Binding
    Binding InputPanel with ObservableCollection