Like most other grids, once you've added the grid to your application, you'll populate it using the ItemsSource property that expects an object that implements an IEnumerable interface. In most cases, though, you'll work at a higher level and use an object that implements the C1CollectionView interface.

The C1CollectionView class delivers functionality that's missing in the UWP ICollectionView, like sorting, filtering, grouping, and editing.  C1CollectionView provides a familiar object model, but fills the ICollectionView gaps with a rich interface.

For example, to display a list of customer objects in a C1FlexGrid for UWP application, you would use code such as this:

List<Customer> customers = await GetCustomerData();
var view = new C1.Xaml.C1CollectionView(customers);

 And then bind it to your C1FlexGrid control:

c1FlexGrid1.ItemsSource = view;

You could also bind the grid directly to the customer list, of course. But binding to a C1CollectionView is usually a better idea because it retains a lot of the data configuration for the application, and that can be shared across controls.

If you bind many different controls to the same C1CollectionView object, they will all show the same view. Selecting an item in one control will automatically update the selection on all other controls. You can also share filtering, grouping, or sorting across all controls bound to the same view.

Using the above code, the grid will scan the data source and automatically generate columns for each public property of the data source items. Automatically created columns can be customized using code, or you may disable the automatic column generation altogether and create the columns yourself, in code or in XAML.

For example, the XAML below disables the automatic column generation and specifies the columns in XAML instead:

<FlexGrid:C1FlexGrid x:Name="flexgrid1" AllowResizing="Both" AllowDragging="Both" AllowDrop="True" AutoGenerateColumns="false" ColumnHeaderForeground="White" >
<FlexGrid:C1FlexGrid.Columns>
   <FlexGrid:Column Binding="{Binding Active, Mode=TwoWay}" />
   <FlexGrid:Column Binding="{Binding ID, Mode=TwoWay}" />
   <FlexGrid:Column Binding="{Binding Name, Mode=TwoWay}" Width="*"/>
   <FlexGrid:Column Binding="{Binding Country, Mode=TwoWay}" Width="*"/>
   <FlexGrid:Column Binding="{Binding Hired, Mode=TwoWay}" Format="d" Width="*" />
   <FlexGrid:Column Binding="{Binding Father, Mode=TwoWay}" Width="*"/>
   <FlexGrid:Column Binding="{Binding Weight, Mode=TwoWay}" Width="*"/>
</FlexGrid:C1FlexGrid.Columns>
</FlexGrid:C1FlexGrid>

This is similar to the XAML you would use to accomplish the same task using the Microsoft DataGrid or the original ComponentOne DataGrid controls:

<!-- create columns on an MSDataGrid (or C1DataGrid) -->
 <ms:DataGrid Name="_msSongs"
   AutoGenerateColumns="False" >
   <ms:DataGrid.Columns>
     <ms:DataGridTextColumn Binding="{Binding Name}" Header="Title"
         CanUserReorder="False" Width="300" />
     <ms:DataGridTextColumn Binding="{Binding Duration}" />
     <ms:DataGridTextColumn Binding="{Binding Size}" />
     <ms:DataGridTextColumn Binding="{Binding Rating}" Width="200" />
   </ms:DataGrid.Columns>
 </ms:DataGrid>

As you can see, the markup is virtually identical.

You can use the binding as an indexer into the grid's Columns collection. For example, if you wanted to make the "Name" column 300 pixels wide using code, you could write this:

flexgrid1.Columns["Rating"].Width = new GridLength(300);

This syntax should be familiar to C1FlexGrid users. It is exactly the same command you would use when working with the WPF version of the control.