ComponentOne DataGrid for WPF and Silverlight
DataGrid for WPF and Silverlight Overview / Task-Based Help / Creating a DataGrid
In This Topic
    Creating a DataGrid
    In This Topic

    You can easily create a C1DataGrid control at design time in Expression Blend, in XAML, and in code. Note that if you create a C1DataGrid control as in the following steps, it will appear empty. You will need to bind the grid or populate it with data.

    At Design Time in Blend

    To create a C1DataGrid control in Blend, complete the following steps:

    1. Navigate to the Projects window and right-click the References folder in the project files list. In the context menu choose Add Reference, locate and select the C1.WPF.DataGrid.dll assembly, and click Open.

      The dialog box will close and the references will be added to your project and the controls will be available in the Asset Library.

    2. In the Toolbox click on the Assets button (the double chevron icon) to open the Assets dialog box.
    3. In the Asset Library dialog box, choose the Controls item in the left pane, and then click on the C1DataGrid icon in the right pane:

      The C1DataGrid icon will appear in the Toolbox under the Assets button.

    4. Click once on the design area of the UserControl to select it. Unlike in Visual Studio, in Blend you can add WPF controls directly to the design surface as in the next step.
    5. Double-click the C1DataGrid icon in the Toolbox to add the control to the panel. The C1DataGrid control will now exist in your application.
    6. If you choose, can customize the control by selecting it and setting properties in the Properties window. For example, set the C1DataGrid control's Name property to "c1datagrid1" the Height property to "180", and the Width property to "250".

    In XAML

    To create a C1DataGrid control using XAML markup, complete the following steps:

    1. In the Visual Studio Solution Explorer, right-click the References folder in the project files list. In the context menu choose Add Reference, select the C1.WPF.DataGrid.dll assembly, and click OK.
    2. Add a XAML namespace to your project by adding xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml to the initial <UserControl><Window> tag. It will appear similar to the following:

      XAML
      Copy Code
      <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1DataGrid.MainWindow" Width="640" Height="480"><UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml x:Class="C1DataGrid.MainPage" Width="640" Height="480">
      
    3. Add a <c1:C1DataGrid> tag to your project within the <Grid> tag to create a C1DataGrid control. The markup will appear similar to the following:
      XAML
      Copy Code
      <Grid x:Name="LayoutRoot" Background="White">
          <c1:C1DataGrid Name="c1datagrid1" Height="180" Width="250" />
      </Grid>
      

      This markup will create an empty C1DataGrid control named "c1datagrid1" and set the control's size.

    In Code

    To create a C1DataGrid control in code, complete the following steps:

    1. In the Visual Studio Solution Explorer, right-click the References folder in the project files list. In the context menu choose Add Reference, select the C1.WPF.dll and C1.WPF.DataGrid.dll assemblies, and click OK.
    2. Right-click within the MainPage.xamlMainWindow.xaml window and select View Code to switch to Code view
    3. Add the following import statements to the top of the page:
      Visual Basic
      Copy Code
      Imports C1.WPF|variable=WPF.DataGrid
      

      C#
      Copy Code
      using C1.WPF|variable=WPF.DataGrid;
      
    4. Add code to the page's constructor to create the C1DataGrid control. It will look similar to the following:
      Visual Basic
      Copy Code
      Public Sub New()
          InitializeComponent()
          Dim c1datagrid1 As New C1DataGrid
          c1datagrid1.Height = 180
          c1datagrid1.Width = 250
          LayoutRoot.Children.Add(c1datagrid1)
      End Sub
      
             

       

      C#
      Copy Code
      public MainPage()
      {
          InitializeComponent();
          C1DataGrid c1datagrid1 = new C1DataGrid();
          c1datagrid1.Height = 180;
          c1datagrid1.Width = 250;
          LayoutRoot.Children.Add(c1datagrid1);
      }
      

      This code will create an empty C1DataGrid control named "c1datagrid1", set the control's size, and add the control to the page.

    What You've Accomplished

    Run your application and observe that you've created a C1DataGrid control.

    Note that when you create a C1DataGrid control as in the above steps, it will appear empty. You can add items to the control that can be interacted with at run time.