ComponentOne MultiSelect for UWP
Data Binding / Bind MultiSelect to a Data Source
In This Topic
    Bind MultiSelect to a Data Source
    In This Topic

    To bind MultiSelect to a data source, follow these steps:

    1. Add a Resources folder to your application and add an XML file, Northwind.xml, as a database to the folder.
    2. Add a Data folder to the application.
    3. Add a class named NorthWindData.cs to the Data folder, which contains all the properties related to the data in Northwind.xml and to access the XML file using the following code.
      Imports System
      Imports System.IO
      Imports System.Reflection
      Imports System.Collections.Generic
      Imports System.Xml.Serialization
      Imports Windows.Storage
      Imports System.Threading.Tasks
      Imports System.ComponentModel.DataAnnotations
      Imports System.Collections.ObjectModel
      
      Namespace MultiSelect_UWP
      
          Public Class NorthwindData
      
              <Display(Name:="CustomerID")>
              Public Property CustomerID As String
      
              <Display(Name:="CompanyName")>
              Public Property CompanyName As String
      
              <Display(Name:="ContactName")>
              Public Property ContactName As String
      
              <Display(Name:="ContactTitle")>
              Public Property ContactTitle As String
      
              <Display(Name:="Address")>
              Public Property Address As String
      
              <Display(Name:="City")>
              Public Property City As String
      
              <Display(Name:="PostalCode")>
              Public Property PostalCode As String
      
              <Display(Name:="Country")>
              Public Property Country As String
      
              <Display(Name:="Phone")>
              Public Property Phone As String
      
              <Display(Name:="Fax")>
              Public Property Fax As String
          End Class
      
          Public Class NorthwindStorage
      
              Public Shared Async Function Load() As Task(Of ObservableCollection(Of NorthwindData))
                  Try
                      Dim resourceUri As Uri = New Uri("ms-appx:///Resources/Northwind.xml")
                      Dim file = Await StorageFile.GetFileFromApplicationUriAsync(resourceUri)
                      Dim fileStream = Await file.OpenAsync(FileAccessMode.Read)
                      Dim xmls = New XmlSerializer(GetType(ObservableCollection(Of NorthwindData)))
                      Return CType(xmls.Deserialize(fileStream.AsStream()), ObservableCollection(Of NorthwindData))
                  Catch e As Exception
                      Throw New FileNotFoundException("File not found")
                  End Try
              End Function
          End Class
      End Namespace
      
      using System;
      using System.IO;
      using System.Reflection;
      using System.Collections.Generic;
      using System.Xml.Serialization;
      using Windows.Storage;
      using System.Threading.Tasks;
      using System.ComponentModel.DataAnnotations;
      using System.Collections.ObjectModel;
      
      namespace MultiSelect_UWP
      {
          public class NorthwindData
          {
              [Display(Name = "CustomerID")]
              public string CustomerID { get; set; }
      
              [Display(Name = "CompanyName")]
              public string CompanyName { get; set; }
      
              [Display(Name = "ContactName")]
              public string ContactName { get; set; }
      
              [Display(Name = "ContactTitle")]
              public string ContactTitle { get; set; }
      
              [Display(Name = "Address")]
              public string Address { get; set; }
      
              [Display(Name = "City")]
              public string City { get; set; }
      
              [Display(Name = "PostalCode")]
              public string PostalCode { get; set; }
      
              [Display(Name = "Country")]
              public string Country { get; set; }
      
              [Display(Name = "Phone")]
              public string Phone { get; set; }
      
              [Display(Name = "Fax")]
              public string Fax { get; set; }
          }
      
          public class NorthwindStorage
          {
              public static async Task<ObservableCollection<NorthwindData>> Load()
              {
                  try
                  {
                      Uri resourceUri = new Uri("ms-appx:///Resources/Northwind.xml");
                      
                      var file = await StorageFile.GetFileFromApplicationUriAsync(resourceUri);
                      var fileStream = await file.OpenAsync(FileAccessMode.Read);
                      var xmls = new XmlSerializer(typeof(ObservableCollection<NorthwindData>));
                      return (ObservableCollection<NorthwindData>)xmls.Deserialize(fileStream.AsStream());
                  }
                  catch (Exception e)
                  {
                      throw new FileNotFoundException("File not found");
                  }
              }
          }
      }
      
    4. Switch to MainPage.xaml.cs and add the following code to the class constructor to populate MultiSelect.
      Private Shadows Sub DispatchedHandler(ByVal  As PopulateUnboundGrid)
      
      Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
              new DispatchedHandler(PopulateUnboundGrid));
      
    5. Add the following code to fill MultiSelect with data.
      Private Async Sub PopulateUnboundGrid()
          Dim data = Await NorthwindStorage.Load()
          c1MultiSelect1.ItemsSource = data
          c1MultiSelect1.DisplayMemberPath = "CustomerID"
      End Sub
      
      private async void PopulateUnboundGrid()
      {
           var data = await NorthwindStorage.Load();
           c1MultiSelect1.ItemsSource = data;
           c1MultiSelect1.DisplayMemberPath = "CustomerID";
      }