This quick start familiarizes you with adding a FlexGrid control and populating it with data. You begin with creating a WPF application in Visual Studio, adding the FlexGrid control, and binding it with data.

To create a simple WPF application for adding and displaying data in FlexGrid, complete the following steps:

1. Add FlexGrid control to WPF application
2. Add data to display in FlexGrid
3. Bind FlexGrid with data

The following image shows a FlexGrid populated with a sample data of customers.

Add FlexGrid control to WPF application

You can add FlexGrid control to WPF application through XAML, and through code.

Through XAML

1. Create a WPF project in Visual Studio.
2. Drag the FlexGrid control onto the XAML designer, that is MainWindow.xaml.
   The C1.WPF.FlexGrid.dll gets added to the references folder of your project.
3. Set the name of the control as 'grid' by editing the XAML code as illustrated in the following code example.
   • WPF
   • Silverlight

   <Window x:Class="FilterRow.MainWindow"
           ...
           xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
           ... >
       <Grid x:Name="LayoutRoot">
           <c1:C1FlexGrid Name='grid' Grid.Row="1"/>
       </Grid>
   </Window>
   

   <UserControl x:Class="MainTestApplication.MainPage"
                ...
                xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
                ... > 
     <Grid x:Name="LayoutRoot">
       <c1:C1FlexGrid Name='grid' Grid.Row="1"/>
     </Grid>
   </UserControl>
   

Through code

1. Create a WPF project in Visual Studio.
2. Add the C1.WPF.FlexGrid .dll file to the References folder of the project.
3. Switch to the code view, that is MainWindow.xaml.cs file, and add the following using statement.
   • WPF
   • Silverlight

   using C1.WPF.FlexGrid;
   

   using C1.Silverlight.FlexGrid;
   

4. Add the following code in the MainWindow class constructor to add a FlexGrid control.
   • WPF
   • Silverlight

   var grid = new C1FlexGrid();
   Parent.Children.Add(grid);
   

   var grid = new C1.Silverlight.FlexGrid.C1FlexGrid();
   LayoutRoot.Children.Add(grid);
   

Back to Top

Add data to display in FlexGrid

1. Switch to the code view, that is MainWindow.xaml.cs.
2. Create a class, Customer, and use the following code to add data to be displayed in the FlexGrid.

   C#

   Copy Code

   public class Customer { //fields int _id, _countryID; string _first, _last; double _weight; //data generators static Random _rnd = new Random(); static string[] _firstNames = "Andy|Ben|Charlie|Dan|Ed|Fred|Gil|Herb|Jim|Elena|Stefan|Alaric|Gina".Split('|'); static string[] _lastNames = "Ambers|Bishop|Cole|Danson|Evers|Frommer|Salvatore|Spencer|Saltzman|Rodriguez".Split('|'); static string[] _countries = "China|India|United States|Japan|Myanmar".Split('|'); public Customer() : this(_rnd.Next()) { } public Customer(int id) { ID = id; First = GetString(_firstNames); Last = GetString(_lastNames); CountryID = _rnd.Next() % _countries.Length; Weight = 50 + _rnd.NextDouble() * 50; } //Object model public int ID { get { return _id; } set { if (value != _id) { _id = value; RaisePropertyChanged("ID"); } } } public string Name { get { return string.Format("{0} {1}", First, Last); } } public string Country { get { return _countries[_countryID]; } } public int CountryID { get { return _countryID; } set { if (value != _countryID && value > -1 && value < _countries.Length) { _countryID = value; RaisePropertyChanged(null); } } } public string First { get { return _first; } set { if (value != _first) { _first = value; RaisePropertyChanged(null); } } } public string Last { get { return _last; } set { if (value != _last) { _last = value; RaisePropertyChanged(null); } } } public double Weight { get { return _weight; } set { if (value != _weight) { _weight = value; RaisePropertyChanged("Weight"); } } } // ** utilities static string GetString(string[] arr) { return arr[_rnd.Next(arr.Length)]; } static string GetName() { return string.Format("{0} {1}", GetString(_firstNames), GetString(_lastNames)); } // ** static list provider public static ObservableCollection<Customer> GetCustomerList(int count) { var list = new ObservableCollection<Customer>(); for (int i = 0; i < count; i++) { list.Add(new Customer(i)); } return list; } // this interface allows bounds controls to react to changes in the data objects. void RaisePropertyChanged(string propertyName) { OnPropertyChanged(new PropertyChangedEventArgs(propertyName)); } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged(PropertyChangedEventArgs e) { if (PropertyChanged != null) PropertyChanged(this, e); } }

Bind FlexGrid with data

1. Set the ItemsSource property to populate the grid with random data coming from the Customer class.

   C#	Copy Code
   //Binding the grid with data grid.ItemsSource = Customer.GetCustomerList(12);

Back to Top