WinRT XAML (Part 11) FlexGrid

March 08 2013

Script 11: FlexGrid in Studio for WinRT XAML

Display tabular data across columns and down rows with this simple, yet powerful grid control. ComponentOne FlexGrid® for WinRT XAML delivers a familiar, traditional datagrid re-designed for modern, touch-based enterprise applications. This control is still considered Beta.

Touch Support

In the future there are no scroll bars. Designed to provide a UX more fitting for the mobile world, FlexGrid for WinRT XAML allows users to drag the grid to scroll across columns and down rows. It uses inertial-based scrolling so it feels more natural on Windows 8.

Flexible Data Binding

Easily bind the C1FlexGrid control to anything that implements IEnumerable or bind directly to a list of objects. FlexGrid and its columns can be bound to directly in XAML following best MVVM practices.

Group, Sort and Filter

The C1FlexGrid control recognizes the IC1CollectionView interface and exposes extended functionality such as grouping, sorting, filtering, and adding new items. FlexGrid uses the C1CollectionView automatically when you set it's ItemsSource property to an object that is not an ICollectionView already. The C1CollectionView class is included in the C1.Xaml assembly. It implements the IC1CollectionView interface which includes sorting, filtering, and grouping. Grouped rows can expand and collapse by tapping.

Unbound

In addition to data binding support, C1FlexGrid also works great in unbound mode. Simply add rows and columns to the grid using familiar syntax from the WinForms version of the control. When unbound, the C1FlexGrid control stores data internally.

Cell Editing

C1FlexGrid supports cell editing like a traditional desktop grid control. Cells obtain focus and display a default TextBox cell editor or custom editor if provided.

Custom Cells

C1FlexGrid makes it easier to define custom cells by providing a more simpler interface, ICellFactory. Custom cells are useful if you want to display anything other than text in a grid cell, or if you need to apply conditional formatting.

Cell Merging

C1FlexGrid enables cell merging at the grid level. Just set the AllowMerging property on specific rows and columns to enable this feature where you need it. Cell merging will merge adjacent cells that have the same content, while positioning the text so that it is always most readable to the user.

Column and Row Headers

FlexGrid supports multiple fixed rows for column headers and multiple fixed columns for row headers. This concept allows you to create "bands" or multi-cell headers useful for organizing columns into groups. Cell merging is used to achieve this functionality.

Column and Row Freezing

Freeze any number of rows and columns by simply setting the Rows.Frozen or Columns.Frozen properties. Frozen panes never scroll out of view.

Autosize Rows and Columns

The C1FlexGrid control has AutoSizeRow and AutoSizeColumn methods that take into account the data currently visible. This can be done quickly and accurately.

Save to Stream

Output and persist data with ease using the Save method. Formats include plain text, html and CSV.

Getting Started with FlexGrid

Step 1 of 3: Adding C1FlexGrid to the Application

In this step you'll begin in Visual Studio to create a WinRT-style application using FlexGrid for WinRT XAML. To set up your project and add a C1FlexGrid control to your application, complete the following steps:

In Visual Studio 2012 Select File | New | Project.
In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project.

Open MainPage.xaml if it isn't already open, place the cursor between the and tags.
Navigate to the Toolbox and double-check the C1FlexGrid icon to add the control to your application.

<FlexGrid:C1FlexGrid HorizontalAlignment="Left" VerticalAlignment="Top"/>

Edit the C1FlexGrid's markup so it appears similar to the following:

<FlexGrid:C1FlexGrid x:Name="flexgrid1" AllowResizing="Both" AllowDragging="Both" AllowDrop="True" ColumnHeaderForeground="White"/>

This markup gives the control a name, sets the ability to resize, drag, and drop columns and rows, and sets the color of the header text.

You've successfully created a WinRT-style application. In the next step you'll add code to the application to add data to be displayed in the grid.

Step 2 of 3: Adding Data to the C1FlexGrid Application

In the previous step you created a new WinRT-style project and added a C1FlexGrid control to the application, but the grid currently contains no data – if you run the application now you'll see a blank grid. In this step you'll continue by adding an XML data source to your project and binding the grid to the data source.

To add a data source and bind the grid in Visual Studio, complete the following steps:

In the Solution Explorer window, right-click the project and select Add | New Item.
In the Add New Item dialog box, select XML File from the list of installed templates, name the file "Products.xml", and click Add to close the dialog box.

The Products.xml file should now be included in your project, and should have opened automatically.

Replace the existing text in the Products.xml file with the following XML markup and save the file:

•XML to add:;)

<?xml version="1.0" encoding="utf-8" ?>

This will add data taken from the Products table of the standard Microsoft Northwind database.

Select View | Code to switch to Code view.

Add code to the page's constructor so that it appears like the following:

public MainPage() { this.InitializeComponent();

   LoadData();

}

private void LoadData() { // Initialize the XML data source. XDocument ProductsDoc = XDocument.Load("Products.xml"); List<Product> data = (from Product in ProductsDoc.Descendants("Product") select new Product

                         {
                             Name = Product.Attribute("Name").Value,
                             Category = Product.Attribute("Category").Value,
                             Unit = Product.Attribute("Unit").Value,
                             Price = Product.Attribute("Price").Value
                         }
   ).ToList(); // Bind the C1FlexGrid control to the data source. flexgrid1.ItemsSource = data;

}

Add the following code just below the page's constructor and within the main class:

// Create the Product class.

public class Product { public string Name { get; set; } public string Category { get; set; } public string Unit { get; set; } public string Price { get; set; } }

Add this using statement:

using System.Xml.Linq;

In this step you completed adding data to your application. In the next step you'll run the application and observe run-time interactions.

Step 3 of 3: Running the C1FlexGrid Application

Now that you've created a WinRT-style application and customized the application's appearance and behavior, the only thing left to do is run your application. To run your application and observe FlexGrid for WinRT XAML's run-time behavior, complete the following steps:

From the Debug menu, select Start Debugging to view how your application will appear at run time. Notice that product data appears in the grid:

Click a column header, for example Category, and drag it before or after another column header, for example Price, to change the location of the column.
Click a row header, for example for "Ikura", and drag it before or after another row header, for example Aniseed Syrup, to change the location of the row.
Click the right edge of a column header, for example Name, and drag the edge of the column to resize the column header.

Congratulations! You've completed the FlexGrid for WinRT XAML quick start and created a FlexGrid for WinRT XAML application, customized the C1FlexGrid control, and viewed some of the run-time capabilities of your application.

See this example in our documentation in both VB and C#

Next: Blog Series (Part 12) Guages: Windows 8 Studio for WinRT XAML

MESCIUS inc.