はじめに
WPF対応のC1DataGridコントロールは、初めて使う方でもすぐにデータベースのデータをグリッド表示することができる扱いやすいコントロールです。
しかも、グループ化や集計、フィルタ機能など高度な機能があらかじめ実装されているので、複雑で難しいコードを書く必要は一切ありません。
また、WPF用コントロールなので、WPFの高度なデザイン性を生かしたアプリケーションを作成できます。
今回は、このC1DataGridコントロールを使い、SQL Server上のデータをグリッド表示するWPFアプリケーションを作ってみました。
対象読者
Visual Basic 2010／2012、またはVisual C# 2010／2012を使ってプログラムを作ったことがある人。
必要な環境
Visual Basic 2010／2012、Visual C# 2010／2012、Visual Studio 2010／2012、SQL Server Expressでプログラムが作れる環境。
なお、本プログラムは次の環境で開発・動作確認を行っています。
- OS：Windows 7
- 開発Tool：Visual Studio 2010、.NET Framework 4、SQL Server Express
プログラム実行時の注意事項
本稿の実行ファイル（バイナリファイル）を動かすには、zipファイルに同梱してある以下のファイルが必要になります（.NET Framework 4でのみご使用いただけます）。
| ファイル名 | 説明 |
|---|---|
| C1.WPF.4.dll | 本体アセンブリ |
| C1.WPF.DataGrid.4.dll | 本体アセンブリ |
| C1.WPF.DateTimeEditors.4.dll | 本体アセンブリ |
このファイルを、実行プログラムと同じフォルダに格納します。
コンポーネントのインストール
トライアル版は、グレープシティのWebページから申し込みできます。
トライアル申込フォームが表示されますので、必要情報を入力して申し込むとトライアル版のダウンロード手順を記載したE-Mailが送られてきます。その手順にそってダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。
制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールと参照の追加
ComponentOne Studio 2013Jをインストールしたら、プロジェクトにコントロールを追加します。
ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。
追加するコンポーネントは、アセンブリ名が「C1.WPF.DataGrid.4」の「C1DataGrid」コントロールです。
これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。
| ファイル | 内容 |
|---|---|
| C1.WPF.4 | 本体アセンブリ |
| C1.WPF.DataGrid.4 | 本体アセンブリ |
| C1.WPF.DateTimeEditors | 本体アセンブリ |
また、プロジェクトに以下のランタイムライブラリが追加されます。
| ファイル | 内容 |
|---|---|
| C1.WPF.4.dll | 本体アセンブリ |
| C1.WPF.DataGrid.4.dll | 本体アセンブリ |
| C1.WPF.DateTimeEditors.4.dll | 本体アセンブリ |
なお、.NET Framework 4が必要です。
C1DataGridコントロールの概要
C1DataGridコントロールは、表形式データをWPFアプリケーションで簡単に表示、編集、分析することができるコントロールです。
ADO.NETデータセットなどの、System.Collections.IEnumerableインターフェイスを実装している任意のオブジェクトに対してデータ連結して、データの入力・編集を行うことが可能です。
グリッドデータは、グループ化や集計、フィルタ機能など高度な機能があらかじめ実装されているので、複雑で難しいコードを書く必要は一切ありません。
また、C1DataGridコントロールは、SilverlightとWPFで使用できる強力なグリッドコントロールで、オブジェクトモデルはMicrosoftのDataGridコントロールに基づいているため、C1DataGridコントロールに簡単に移行できます。
C1DataGridコントロールの特徴
C1DataGridコントロールは、以下のような特徴を持っています。
完全な対話式グリッド
エンドユーザーの使用感を高めるために、完全な対話式グリッドを作成します。
列のサイズ変更と並べ替え、行の編集、ソート、フィルタ処理、グループ化、フリーズ、選択など多くの対話式機能が組み込まれています。
データのグループ化と集計
Outlookスタイルのグループ化をサポートします。列ヘッダーをグリッドの上にある領域にドラッグするだけでデータをグループ化できます。展開/折りたたみ可能なノードが自動的に生成されます。グループ化したヘッダー行に、集計関数の計算結果や合計を表示することも可能です。
Excel形式のフィルタ機能
デフォルトでは、Excel形式のフィルタ機能をサポートしています。このタイプのフィルタ機能では、各列でドロップダウンメニューを使用できるため、ユーザーはフィルタ条件を作成できます。
高パフォーマンス
行と列の両方を再利用することで（UIの仮想化）、大規模なデータセットを処理する際に最適なパフォーマンスを得ることができます。
複数の組み込みの列タイプ
C1DataGridコントロールには、多くの列エディタが組み込まれており、それによってすべての標準データ型をサポートすることができます。テキスト、チェックボックス、DateTimeピッカー、コンボボックス、および画像のためのエディタが組み込まれています。マスク付きテキスト、ハイパーリンク、複数行テキスト、カラーピッカーなどカスタムの列エディタから、必要なエディタを選択することも可能です。
RowDetailsTemplateおよび階層のサポート
C1DataGridコントロールでは、各行の折りたたみ可能なセクション内にUIElementsを埋め込むことができるRowDetailsTemplateテンプレートがサポートされています。例えば、別のDataGridを埋め込むだけで、マスター/詳細グリッドを作成して階層データを表示できます。
上端行テンプレートと下端行テンプレート
上端行テンプレートと下端行テンプレートを使用して、カスタム行をグリッドに簡単に作成および追加することができます。例えば、独自のフィルタの設計、合計行の指定、UIElementsの埋め込みなどを行うことが可能です。
複数選択モード
すべてのセル選択オプションをエンドユーザーに提供します。具体的には、単一セル、単一行、単一列、単一範囲、複数行、複数列、および複数範囲です。DataGrid for WPFコントロールはクリップボードをサポートするので、エンドユーザーは選択したセルをMicrosoft Excelなどの任意のテキストエディタに簡単に貼り付けることが可能です。
新規行
ユーザーは、グリッドの上部または下部のいずれかに空の新規行を表示することで、新規行をDataGrid for WPFに追加できます。
カスタム行とカスタム列
各DataGrid行に対して独自のデータテンプレートを設計し、複数のデータフィールドのデータを結合できる複合列を作成します。
ClearStyleを使って簡単に色を変更する
DataGrid for WPFは、ClearStyle技術（後述）をサポートしているため、色のプロパティをいくつか設定するだけで、グリッド全体のスタイルを簡単に設定できます。
C1DataGridコントロールの外観の操作
C1DataGridコントロールは、一般的なテーブル書式設定オプション（1行ごとの背景色の変更、ヘッダーの表示／非表示、グリッド線、スクロールバーなど）をサポートしています。さらに、ブラシ、スタイル、およびテンプレートのプロパティで、コントロールとその行、列、ヘッダー、セルの外観を完全に変更できます。
行および列ヘッダーの表示／非表示の設定
デフォルトでは、行ヘッダーと列ヘッダーがグリッドに表示されます。ただし、必要に応じて、一方または両方のヘッダーを非表示に設定できます。そのためには、HeadersVisibilityプロパティを設定します。HeadersVisibilityプロパティには、次のオプションの一つを設定できます。
| オプション | 説明 |
|---|---|
| None | 行ヘッダーと列ヘッダーの両方がグリッドで非表示になります |
| Column | 列ヘッダーのみがグリッドに表示されます |
| Row | 行ヘッダーのみがグリッドに表示されます |
| All（デフォルト） | 列ヘッダーと行ヘッダーの両方がグリッドに表示されます |
グリッド線の表示／非表示の設定
デフォルトでは、垂直方向と水平方向のグリッド線がグリッドに表示されます。ただし、必要に応じて、一方または両方のグリッド線を非表示に設定できます。そのためには、GridLinesVisibilityプロパティを設定します。GridLinesVisibilityプロパティには、次のオプションの一つを設定できます。
| オプション | 説明 |
|---|---|
| None | 水平方向と垂直方向の両方のグリッド線がグリッドで非表示になります |
| Horizontal | 水平方向のグリッド線のみがグリッドに表示されます |
| Vertical | 垂直方向のグリッド線のみがグリッドに表示されます |
| All（デフォルト） | 水平方向と垂直方向の両方のグリッド線がグリッドに表示されます |
新規行の表示／非表示の設定
デフォルトでは、グリッドの末尾に新規追加行が配置されます。ただし、必要に応じてその位置の変更が可能です。そのためには、NewRowVisibilityプロパティを設定します。NewRowVisibilityプロパティには、次のオプションの一つを設定できます。
| オプション | 説明 |
|---|---|
| Top | 新規追加行がグリッドの先頭に表示されます |
| Bottom（デフォルト） | 新規追加行がグリッドの末尾に表示されます |
垂直および水平スクロールバーの表示／非表示の設定
デフォルトでは、グリッドの内容の高さまたは幅がグリッドのサイズを超えたときにのみ、グリッドの水平スクロールバーと垂直スクロールバーが表示されます。ただし、必要に応じて、スクロールバーを常に表示または非表示になるように設定したり、まったく無効になるように設定できます。そのためには、VerticalScrollbarVisibilityプロパティとHorizontalScrollbarVisibilityプロパティの設定が必要になります。VerticalScrollbarVisibilityプロパティとHorizontalScrollbarVisibilityプロパティには、次のオプションの一つを設定することができます。
| オプション | 説明 |
|---|---|
| Disabled | 選択したスクロールバーは無効になります |
|
Auto （デフォルト） |
選択したスクロールバーは、グリッドの内容が グリッドウィンドウの大きさを超えるときだけ表示されます |
| Hidden | 選択したスクロールバーは非表示になります |
| Visible | 選択したスクロールバーは常に表示されます |
行の詳細の表示／非表示の設定
デフォルトでは、行の詳細は折りたたまれて表示されません。RowDetailsVisibilityModeプロパティを使用して、行の詳細を表示するかどうかと、いつ表示するかを設定できます。RowDetailsVisibilityModeプロパティには、次のオプションの一つを設定できます。
| オプション | 説明 |
|---|---|
| VisibleWhenSelected | 行の詳細は選択されたときにのみ表示されます |
| Visible | 行の詳細は常に表示されます |
| Collapsed（デフォルト） | 行の詳細は折りたたまれて表示されません |
ブラシ
C1DataGridコントロールが提供するブラシの複数のプロパティを使用して、コントロールとその行、列、ヘッダー、セルの外観を完全に変更できます。次の表では、いくつかのブラシについて説明します。
| ブラシ | 説明 |
|---|---|
| Background |
レンダリング時に使用される背景ブラシを取得または設定します （このブラシは、データグリッドのすべてのパーツに適用されます） |
| Foreground |
レンダリング時に使用される前景ブラシを取得または設定します （このブラシは、データグリッドのすべてのパーツに適用されます） |
| BorderBrush |
レンダリング時に使用される境界線ブラシを取得または設定します （このブラシは、テーマに基づいて、 データグリッドの一部のパーツに適用されます） |
| SelectedBrush |
選択された行、行ヘッダー、列ヘッダーなどのレンダリング時に使用される、 選択されたブラシを取得または設定します |
| MouseOverBrush |
マウスが行、行ヘッダー、列ヘッダーなどの上にあるときに使用される、 マウスオーバーブラシを取得または設定します |
| RowBackground | 行の背景ブラシを取得または設定します |
| RowForeground | 行の前景ブラシを取得または設定します |
| AlternatingRowBackground | 交互表示行の背景ブラシを取得または設定します |
| AlternatingRowForeground | 交互表示行の前景ブラシを取得または設定します |
| HorizontalGridLinesBrush | 水平線に適用されるブラシを取得または設定します |
| VerticalGridLinesBrush | 垂直線に適用されるブラシを取得または設定します |
ClearStyle
C1DataGridコントロールは、コントロールのテンプレートを変更することなくコントロールの色を簡単に変更できる、ComponentOne社の新しいClearStyle技術をサポートします。
C1DataGridコントロールの配色を設定するC1DataGrid.Backgroundプロパティなど、いくつかのプロパティを設定するだけで、C1DataGridコントロールの外観を全面的に変更できます。塗りつぶしのオプションも、単色だけでなく2色のグラデーションを使用できます。
GUIの作成
では、さっそくアプリケーションを作成していきます。
このアプリケーションでは、SQL Serverのデータベースファイル「平成23年度秋冬野菜収穫量_Data.mdf」をC1DataGridコントロールに連結し、データをグリッドで表示します。また、オプションでグループ化が行えるようにしますので、フォームにはC1DataGridコントロールとCheckBoxコントロールを配置します。
コントロールの配置とデータベース連結
① フォームにC1DataGridコントロールをドラッグ＆ドロップし、適当なサイズに広げます。
② Visual Studioのメニューから［データ］-［新しいデータソースの追加］を選択すると、「データソース構成ウィザード」が表示されます。
③ 「データベース」「データセット」を選び、［新しい接続］ボタンをクリックします。
「データソース」に「Microsoft SQL Serverデータベースファイル（SqlClient）」、「データベースファイル名」に「平成23年度秋冬野菜収穫量_Data.mdf」を選び、［テスト接続］ボタンをクリックして接続OKを確認します。
④ 続いてデータベースファイルをプロジェクトにコピーし、接続文字列を確認します。
⑤ テーブル「収穫量一覧」をクリックし、［完了］ボタンをクリックします。
⑥ C1DataGridコントロールの上にCheckBoxコントロールを配置し、「Content」プロパティを「グループ化」に変更してClickイベントハンドラを作成します。
データベース連結処理
ここまでの手順で、C1DataGridコントロールとデータベースファイルが連結されたので、続いてデータを取り出す処理を実装します。
① 2つの参照を設定します。1つは「C1.WPF.DataGrid」名前空間への参照で、もう一つは「データベースへの連結」で作成したテーブルアダプターです。
Imports C1.WPF.DataGrid Imports DataGrid_WPF_vb.平成23年度秋冬野菜収穫量_DataDataSetTableAdapters Class MainWindow
using C1.WPF.DataGrid;
using DataGrid_WPF_cs.平成23年度秋冬野菜収穫量_DataDataSetTableAdapters;
namespace DataGrid_WPF_cs
{
/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
② 次に、1つの変数とプロシージャ（C#はメソッド、以下同様）「newds」の宣言を作成します。
Imports C1.WPF.DataGrid
Imports DataGrid_WPF_vb.平成23年度秋冬野菜収穫量_DataDataSetTableAdapters
Class MainWindow
Inherits Window
Private _newds As 平成23年度秋冬野菜収穫量_DataDataSet = Nothing
Public ReadOnly Property newds() As 平成23年度秋冬野菜収穫量_DataDataSet
using C1.WPF.DataGrid;
using DataGrid_WPF_cs.平成23年度秋冬野菜収穫量_DataDataSetTableAdapters;
namespace DataGrid_WPF_cs
{
/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
private 平成23年度秋冬野菜収穫量_DataDataSet _newds = null;
public 平成23年度秋冬野菜収穫量_DataDataSet newds
③ この中に、クエリを実行してテーブルアダプターにデータを埋める式を記述します。
Public ReadOnly Property newds() As 平成23年度秋冬野菜収穫量_DataDataSet
Get
If _newds Is Nothing Then
_newds = New 平成23年度秋冬野菜収穫量_DataDataSet
Dim TA As New 収穫量一覧TableAdapter
TA.Fill(_newds.収穫量一覧)
End If
Return _newds
End Get
End Property
public 平成23年度秋冬野菜収穫量_DataDataSet newds
{
get
{
if(_newds == null)
{
_newds = new 平成23年度秋冬野菜収穫量_DataDataSet();
収穫量一覧TableAdapter TA = new 収穫量一覧TableAdapter();
TA.Fill(_newds.収穫量一覧);
}
return _newds;
}
}
④ 作成したプロシージャ「newds」を、アプリケーション初期化のプロシージャで呼び出します。
これで、アプリケーション起動時にグリッドにデータベースのデータが埋め込まれます。
Public Sub New()
' この呼び出しはデザイナーで必要です。
InitializeComponent()
' InitializeComponent() 呼び出しの後で初期化を追加します。
Me.C1DataGrid1.ItemsSource = newds.収穫量一覧
End Sub
public MainWindow()
{
InitializeComponent();
this.c1DataGrid1.ItemsSource = newds.収穫量一覧;
}
⑤ アプリケーションを実行し、グリッドにデータが表示されていることを確認します。
グループ化の処理
続いて、グループ化の処理を作成します。グループ化とは、データを指定した列にある同じデータをグループにする機能です。
C1DataGridコントロールでは、CanUserGroupプロパティをTrueに設定すると、グリッドの上部にグループ化専用のエリアが表示され、ここに列名をドラッグ＆ドロップするとグループ化が行われます。
今回は、CheckBoxコントロールのオンオフ機能を利用して、グループ化の有効・無効を切り替えます。
Private Sub CheckBox1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles CheckBox1.Click
If CheckBox1.IsChecked = True Then
C1DataGrid1.CanUserGroup = True
Else
C1DataGrid1.CanUserGroup = False
End If
End Sub
private void checkBox1_Click(object sender, RoutedEventArgs e)
{
if(checkBox1.IsChecked ==true)
{
c1DataGrid1.CanUserGroup = true;
}else
{
c1DataGrid1.CanUserGroup = false;
}
}
また、セルをクリックするとソート機能が働いて、セルをダブルクリックするとそのまま数値を変更できる数値入力ボックスが使え、列見出しをクリックするとフィルタ機能が使えるようになっています。
外観の変更
ここまでで、データベースのデータをグリッドで表示でき、グループ化機能も使えるようになりました。あとは、カラーをカスタマイズして見栄えのよい表になるように仕上げます。
今回変更する部位は次のとおりです。
| プロパティ | 設定値 | 説明 |
|---|---|---|
| GroupingPanelBackground | #FFBB1CC7, #FFE7A9EB | グループ化領域の背景色（グラデーション） |
| GroupingPanelForeground | White | グループ化領域の前景色 |
| HeaderBackground | BlueViolet | ヘッダー領域の背景色 |
| HeaderForeground | White | ヘッダー領域の前景色 |
| MouseOverBrush | #FFEBDF33 | マウスホバー時の背景色 |
| SelectedBackground | #FFF86060 | 選択したセルの背景色 |
では、GroupingPanelBackgroundプロパティのグラデーション設定を行ってみます。他のプロパティも同じ操作でカラーパレットを使って変更します。
① プロパティウィンドウで、GroupingPanelBackgroundプロパティの値欄にある「▼」ボタンをクリックします。
② カラーパレットが表示されます。デフォルトでは単色モードになっていますので、単色の場合はここで色を作成します。
左下にはカラー名で色を選べるリストボックスがあります。カラーピッカーも備えていますので、フォーム上の色を取り出して使うこともできます。
③ グラデーションを作成する場合は、左上の「グラデーションブラシ」アイコンをクリックします。
2色をブレンドするツールが表示されます。
④ 開始色のポインタをクリックし、色を選びます。
⑤ 終了色のポインタをクリックし、色を選びます。
このようにして、他のプロパティも色を設定していきます。
なお、行の交互表示の色が、デフォルトではVBとC#で違っています。この交互表示の色を変更したい場合は、「AlternatingRowBackground」プロパティを使用してください。
まとめ
C1DataGridコントロールは、このようにデータベース構成ウィザードの簡単な操作でデータベースとの連結が可能で、ソート、フィルタ処理、グループ化などの機能がすでに組み込まれていますので、コードを書かずにこれらの機能をすぐに使うことができます。
連結できるデータベースの種類も豊富なので、WPF独特のデザイン性の高さと組み合わせれば、視覚性の高いグリッドアプリケーションが作れるのではないでしょうか。
