AUGUST 3, 2015 in WinRT XAML with 1716 views and 429 downloads

(+1, 1 votes)

Shows how to build a touch-friendly control that filters data in an ICollectionView.

Built for Visual Studio 2013

Built for .NET 4.5


The sample loads invoices from an OData source exposes them using a C1CollectionView object. The C1CollectionView supports the same sorting and filtering functionality available in the WPF/Silverlight versions of the ICollectionView interface.

The filter control allows you to select which properties should be exposed as filter parameters. These properties are shown on a list. When the user taps a property on the filter list (e.g. "Country"), the control shows a histogram with the unique values found in the collection (e.g. "US, 12 items"; "Canada, 20 items", etc). The user can then use the histogram to select a specific value to filter on (e.g. "Country = US").

The filtered data is also displayed in a FlexGrid control. Users can tap the column headers to filter the data as usual. They can also double-tap one of the numeric columns to change the display into a scrollable bar chart. This is a good way to show data graphically on devices with limited real-estate.

The sample includes two re-usable classes:

FilterControl: a touch-friendly filter control that can be used with any ICollectionView in Silverlight/WPF/Windows Phone apps or with the C1CollectionView class in WinRT apps (since the WinRT ICollectionView does not support filtering).

ChartingGrid: a grid derived from the C1FlexGrid that adds column charting capabilities. If the user double-taps a cell in a numeric column, that column turns into a bar chart and expands to fill the grid's non-frozen area. Double-tapping a second time turns the chart back into regular grid columns.