.png)
GUIの作成
では、さっそくアプリケーションを作成していきます。
このアプリケーションでは、SQL Serverのデータベースファイル「平成23年度秋冬野菜収穫量_Data.mdf」をC1DataGridコントロールに連結し、データをグリッドで表示します。また、オプションでグループ化が行えるようにしますので、フォームにはC1DataGridコントロールとCheckBoxコントロールを配置します。
コントロールの配置とデータベース連結
1. フォームにC1DataGridコントロールをドラッグアンドドロップし、適当なサイズに広げます。
2. Visual Studioのメニューから「データ－新しいデータソースの追加」を選びクリックします。「データソース構成ウィザード」が表示されます。
3. 「データベース」「データセット」を選び、「新しい接続」ボタンをクリックします。
「データソース」に「Microsoft SQL Server データベース ファイル（SqlClient）」を選び、「データベースファイル名」に「平成23年度秋冬野菜収穫量_Data.mdf」を選び、「テスト接続」ボタンをクリックして接続OKを確認します。
4. 続いてデータベースファイルをプロジェクトにコピーし、接続文字列を確認します。
5. テーブル「収穫量一覧」をクリックし、「完了」ボタンをクリックします。
6. C1DataGrid コントロールの上にCheckBoxコントロールを配置し、「Content」プロパティを「グループ化」に変更しClickイベントハンドラを作成します。
データベース連結処理
ここまでの作成で、C1DataGridコントロールとデータベースファイルが連結されましたので、データを取り出す処理をコードで作成します。
1. 2つの参照を設定します。一つは「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
{
2. 次に、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
3. この中に、クエリを実行してテーブルアダプターにデータを埋める式を記述します。
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;
}
}
4. 作成したプロシージャ（C#はメソッド）「newds」を、アプリケーション初期化のプロシージャ（C#はメソッド）で呼び出します。これで、アプリケーション起動時にグリッドにデータベースのデータが埋め込まれます。
Public Sub New()
' この呼び出しはデザイナーで必要です。
InitializeComponent()
' InitializeComponent() 呼び出しの後で初期化を追加します。
Me.C1DataGrid1.ItemsSource = newds.収穫量一覧
End Sub
public MainWindow()
{
InitializeComponent();
this.c1DataGrid1.ItemsSource = newds.収穫量一覧;
}
5. アプリケーションを実行し、グリッドにデータが表示されていることを確認します。
グループ化の処理
続いて、グループ化の処理を作成します。グループ化とは、データを指定した列にある同じデータをグループにする機能です。
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プロパティのグラデーション設定を行ってみます。他のプロパティも同じ操作でカラーパレットを使って変更します。
1. プロパティウィンドウで、GroupingPanelBackgroundプロパティの値欄にある「▼」ボタンをクリックします。
2. カラーパレットが表示されます。デフォルトでは単色モードになっていますので、単色の場合はここで色を作成します。左下にはカラー名で色を選べるリストボックスがあります。カラーピッカーも備えていますので、フォーム上の色を取り出して使うこともできます。
3. グラデーションを作成する場合は、左上の「グラデーションブラシ」アイコンをクリックします。2色をブレンドするツールが表示されます。
4. 開始色のポインタをクリックし、色を選びます。
5. 終了色のポインタをクリックし、色を選びます。
このようにして、他のプロパティも色を設定していきます。
なお、行の交互表示の色が、デフォルトではVBとC#で違っています。この交互表示の色を変更したい場合は、「AlternatingRowBackground」プロパティを使用してください。
Enterキーでのカレントセルの移動
C1DataGridコントロールは、表のようにデフォルトではキーボードの矢印キーを使ってカレントセルを移動できるようになっていますが、これをEnterキーを使ってカレントセルを移動するように変更できます。
例えば、Enterキーを押した際に下のセルにカレントセルを移動するには、DataGridのKeyDownイベントでCurrentRowロパティの設定をする必要があります。
処理はビハインドコードに作成します。
まずc1DataGrid1_KeyDownイベントハンドラを定義します。次に、そのイベントハンドラの中で、現在のカレントセルの行番号を取得し、Enterキーが押されたら行方向にカレントセルを移動させます。現在のカレントセルの行番号を取得するには、SelectedIndexプロパティを使用します。
そして、カレントセルを次の行に移動させるには、CurrentRowプロパティに現在のカレントセルの行番号に1を加えた値を設定します。
なお、このコードを実行すると、カレントセルの移動が行単位からセル単位に替わります。
Public Sub New()
' この呼び出しはデザイナーで必要です。
InitializeComponent()
' InitializeComponent() 呼び出しの後で初期化を追加します。
Me.C1DataGrid1.ItemsSource = newds.収穫量一覧
'Enterキーによるカレントセルの移動
Me.C1DataGrid1.SelectionMode = C1.WPF.DataGrid.DataGridSelectionMode.MultiRange
AddHandler Me.C1DataGrid1.KeyDown, AddressOf c1DataGrid1_KeyDown
End Sub
'Enterキーによるカレントセルの移動
Private Sub c1DataGrid1_KeyDown(sender As Object, e As System.Windows.Input.KeyEventArgs)
If e.Key = System.Windows.Input.Key.Enter Then
e.Handled = True
If C1DataGrid1.SelectedIndex <> C1DataGrid1.Rows.Count - 1 Then
'現在のカレントセルの行番号を取得
Dim r As Integer = C1DataGrid1.SelectedIndex + 1
' カレント行変更
C1DataGrid1.CurrentRow = C1DataGrid1.Rows(r)
' 選択範囲変更
C1DataGrid1.Selection.Clear()
C1DataGrid1.Selection.Add(C1DataGrid1(C1DataGrid1.CurrentRow.Index, C1DataGrid1.CurrentColumn.Index))
' スクロール設定
C1DataGrid1.ScrollIntoView(r, 0)
End If
End If
End Sub
public MainWindow()
{
InitializeComponent();
this.c1DataGrid1.ItemsSource = newds.収穫量一覧;
// Enterキーによるカレントセルの移動
this.c1DataGrid1.SelectionMode = C1.WPF.DataGrid.DataGridSelectionMode.MultiRange;
this.c1DataGrid1.KeyDown += c1DataGrid1_KeyDown;
}
// Enterキーによるカレントセルの移動
void c1DataGrid1_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
if (e.Key == System.Windows.Input.Key.Enter)
{
e.Handled = true;
if (c1DataGrid1.SelectedIndex != c1DataGrid1.Rows.Count - 1)
{
//現在のカレントセルの行番号を取得
var r = ++c1DataGrid1.SelectedIndex;
// カレント行変更
c1DataGrid1.CurrentRow = c1DataGrid1.Rows[r];
// 選択範囲変更
c1DataGrid1.Selection.Clear();
c1DataGrid1.Selection.Add(c1DataGrid1[c1DataGrid1.CurrentRow.Index, c1DataGrid1.CurrentColumn.Index]);
// スクロール設定
c1DataGrid1.ScrollIntoView(r, 0);
}
}
}
| キーの組み合わせ | 説明 |
|---|---|
| ↓ | フォーカスを現在のセルの真下のセルに移動します。フォーカスが最後の行にある場合は、［↓］キーを押してもフォーカスは移動しません。 |
| ↑ | フォーカスを現在のセルの真上のセルに移動します。フォーカスが最初の行にある場合は、［↑］キーを押してもフォーカスは移動しません。 |
| ← | フォーカスを行内の前のセルに移動します。フォーカスが行の最初のセルにある場合は、［←］キーを押してもフォーカスは移動しません。 |
| → | フォーカスを行内の次のセルに移動します。フォーカスが行の最後のセルにある場合は、［→］キーを押してもフォーカスは移動しません。 |
| Home | フォーカスを現在の行内の最初のセルに移動します。 |
| End | フォーカスを現在の行内の最後のセルに移動します。 |
| Page Down | コントロールを表示されている行数分下にスクロールします。フォーカスは、最後に表示されている行の同じ列に移動します。最後の行の一部が表示されていない場合は、最後の行が完全に表示されるまでグリッドがスクロールします。 |
| Page Up | コントロールを表示されている行数分上にスクロールします。フォーカスは、最初に表示されている行の同じ列に移動します。最初の行の一部が表示されていない場合は、最初の行が完全に表示されるまでグリッドがスクロールします。 |
| Tab |
現在のセルが編集モードにある場合は、フォーカスを現在の行の次の編集可能なセルに移動します。フォーカスがすでに行の最後のセルにある場合は、実行された変更をコミットし、フォーカスを次の行の最初の編集可能なセルに移動します。フォーカスがコントロールの最後のセルにある場合は、フォーカスを親コンテナのタブオーダーで次のコントロールに移動します。 現在のセルが編集モードにない場合は、フォーカスを親コンテナのタブオーダーで次のコントロールに移動します。 |
| Shift+Tab |
現在のセルが編集モードにある場合は、フォーカスを現在の行の前の編集可能なセルに移動します。フォーカスがすでに行の最初のセルにある場合は、実行された変更をコミットし、フォーカスを前の行の最後のセルに移動します。フォーカスがコントロールの最初のセルにある場合は、フォーカスを親コンテナのタブオーダーで前のコントロールに移動します。 現在のセルが編集モードにない場合は、フォーカスを親コンテナのタブオーダーで前のコントロールに移動します。 |
| Ctrl+↓ | フォーカスを現在の列内の最後のセルに移動します。 |
| Ctrl+↑ | フォーカスを現在の列内の最初のセルに移動します。 |
| Ctrl+→ | フォーカスを現在の行内の最後のセルに移動します。 |
| Ctrl+← | フォーカスを現在の行内の最初のセルに移動します。 |
| Ctrl+Home | フォーカスをコントロール内の最初のセルに移動します。 |
| Ctrl+Page Down | Page Down と同じです。 |
| Ctrl+Page Up | Page Up と同じです。 |
| Enter | 選択されたセルで編集モードに入るか、編集モードを終了します（グリッドと列の IsReadOnly プロパティが False の場合）。 |
| F2 | 選択されたセルで編集モードに入ります（グリッドと列の IsReadOnly プロパティが False の場合）。フォーカスが新規行にある場合、新規行の最初の編集可能なセルの編集を開始します。 |
| Esc | セルまたは新規行の編集をキャンセルします。 |
| Del | 選択された行を削除します。 |
| Insert | 新規行までスクロールし、編集を開始します。 |
