DataGrid for WPF/Silverlight
C1DataGrid コントロールの作成
製品の概要 > タスク別ヘルプ > C1DataGrid コントロールの作成

C1DataGrid コントロールは、Expression Blend で設計時に、XAML、およびコードで簡単に作成できます。次の手順で作成した C1DataGrid コントロールは、空で表示されます。グリッドを連結するか、グリッドにデータを設定する必要があります。

Blend での設計時

C1DataGrid コントロールを Blend で作成するには、次の手順に従います。

  1. [プロジェクト]ウィンドウに移動し、プロジェクトファイルリストで[参照]フォルダを右クリックします。コンテキストメニューから[参照の追加]を選択し、C1.WPF.DataGrid.dll または C1.Silverlight.DataGrid.dll アセンブリを見つけて選択し、[開く]をクリックします。

    [ツール]パネルが閉じ、プロジェクトに参照が追加されて、[アセット]パネルでコントロールを利用できるようになります。

  2. [ツール]パネルで、[アセット]ボタン(二重山かっこアイコン)をクリックして、[アセット]パネルを開きます。
  3. [アセット]パネルで、左ペインから[コントロール]→[すべて]項目を選択し、右ペインで[C1DataGrid]アイコンをクリックします。[C1DataGrid]アイコンが[ツール]パネルの[アセット]ボタンの下に表示されます。
  4. UserControl のデザイン領域をクリックして選択します。Visual Studio とは異なり Blend では、次の手順に示すように、WPF コントロールを直接デザインサーフェスに追加できます。
  5. [ツール]パネルの[C1DataGrid]アイコンをダブルクリックして、コントロールをパネルに追加します。これで、C1DataGrid コントロールがアプリケーションに追加されました。
  6. 必要に応じて、コントロールを選択し、[プロパティ]ウィンドウでプロパティを設定することにより、コントロールをカスタマイズすることもできます。たとえば、C1DataGrid コントロールの Name プロパティを「c1datagrid1"、Height プロパティを「180"、Width プロパティを「250」に設定します。

XAML の場合

C1DataGrid コントロールを XAML マークアップを使って作成するには、次の手順に従います。

  1. Visual Studio ソリューションエクスプローラで、プロジェクトファイルリスト内の[参照]フォルダを右クリックします。コンテキストメニューから[参照の追加]を選択し、C1.WPF.DataGrid.dll または C1.Silverlight.DataGrid.dll アセンブリを選択して、[OK]をクリックします。
  2. xmlns:c1grid="clr-namespace:C1.WPF.DataGrid;assembly=C1.WPF.DataGrid" または 
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    を初期状態の
    <UserControl>
    
    タグに追加することで、プロジェクトに XAML 名前空間を追加します。次のようになります。 
    XAML
    コードのコピー
    <UserControl xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation 
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml 
    xmlns:c1grid="clr-namespace:C1.WPF.DataGrid;assembly=C1.WPF.DataGrid" 
    x:Class="C1DataGrid.MainPage" Width="640" Height="480">
    
    XAML
    コードのコピー
    <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.MainPage" 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. <c1:C1DataGrid>
    
    タグをプロジェクトの
    <Grid>
    
    タグ内に追加して、C1DataGrid コントロールを作成します。マークアップは次のようになります。 
    XAML
    コードのコピー
    <Grid x:Name="LayoutRoot" Background="White">
        <datagrid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" />
    </Grid>
    

    このマークアップは、「c1datagrid1」という名前の空の C1DataGrid コントロールを作成し、コントロールのサイズを設定します。

コードの場合

C1DataGrid コントロールをコードで作成するには、次の手順に従います。

  1. Visual Studio ソリューションエクスプローラで、プロジェクトファイルリスト内の[参照]フォルダを右クリックします。コンテキストメニューから[参照の追加]を選択し、C1.WPF.4.dll および C1.WPF.DataGrid.4.dll アセンブリを選択して、[OK]をクリックします。
  2. [MainPage.xaml]ウィンドウ内で右クリックし、[コードの表示]を選択してコードビューに切り替えます。
  3. 次の import 文をページの先頭に追加します。
    Visual Basic
    コードのコピー
    Imports C1.WPF.DataGrid
    

    C#
    コードのコピー
    using C1.WPF.DataGrid;
    
    Visual Basic
    コードのコピー
    Imports C1.Silverlight.DataGrid
    

    C#
    コードのコピー
    using C1.Silverlight.DataGrid;
    

  4. ページのコンストラクタに、C1DataGrid コントロールを作成するコードを追加します。次のようになります。
    コードのコピー
    Public Sub New()
        InitializeComponent()
        Dim c1datagrid1 As New C1DataGrid
        c1datagrid1.Height = 180
        c1datagrid1.Width = 250
        LayoutRoot.Children.Add(c1datagrid1)
    End Sub
    
    コードのコピー
    public MainPage()
    {
        InitializeComponent();
        C1DataGrid c1datagrid1 = new C1DataGrid();
        c1datagrid1.Height = 180;
        c1datagrid1.Width = 250;
        LayoutRoot.Children.Add(c1datagrid1);
    }
    

このコードは、「c1datagrid1」という名前の空の C1DataGrid コントロールを作成し、コントロールのサイズを設定し、コントロールをページに追加します。

ここまでの成果

アプリケーションを実行し、C1DataGrid コントロールが作成されたことを確認します。

上記の手順で作成した C1DataGrid コントロールは、空で表示されます。実行時に操作できる項目をコントロールに追加できます。