SQL Serverのデータをグリッド表示するWPFアプリケーションの作成【増補改訂版】

ComponentOne Studioを活用したWindowsフォームアプリケーションの作成

2015/02/27 14:00

ポスト

ダウンロードサンプルファイル（バイナリ） (1.8 MB)
ダウンロードサンプルファイル（C#） (1.1 MB)
ダウンロードサンプルファイル（VB） (1.1 MB)

GUIの作成

　では、さっそくアプリケーションを作成していきます。

　このアプリケーションでは、SQL Serverのデータベースファイル「平成23年度秋冬野菜収穫量_Data.mdf」をC1DataGridコントロールに連結し、データをグリッドで表示します。また、オプションでグループ化が行えるようにしますので、フォームにはC1DataGridコントロールとCheckBoxコントロールを配置します。

フォームのレイアウト

コントロールの配置とデータベース連結

　1. フォームにC1DataGridコントロールをドラッグアンドドロップし、適当なサイズに広げます。

　2. Visual Studioのメニューから「データ－新しいデータソースの追加」を選びクリックします。「データソース構成ウィザード」が表示されます。

データソース構成ウィザード

　3. 「データベース」「データセット」を選び、「新しい接続」ボタンをクリックします。

　「データソース」に「Microsoft SQL Server データベースファイル（SqlClient）」を選び、「データベースファイル名」に「平成23年度秋冬野菜収穫量_Data.mdf」を選び、「テスト接続」ボタンをクリックして接続OKを確認します。

「テスト接続」ボタンをクリックして接続OKを確認

　4. 続いてデータベースファイルをプロジェクトにコピーし、接続文字列を確認します。

　5. テーブル「収穫量一覧」をクリックし、「完了」ボタンをクリックします。

テーブル「収穫量一覧」をクリックし、「完了」ボタンをクリック

　6. C1DataGrid コントロールの上にCheckBoxコントロールを配置し、「Content」プロパティを「グループ化」に変更しClickイベントハンドラを作成します。

データベース連結処理

　ここまでの作成で、C1DataGridコントロールとデータベースファイルが連結されましたので、データを取り出す処理をコードで作成します。

　1. 2つの参照を設定します。一つは「C1.WPF.DataGrid」名前空間への参照で、もう一つは「データベースへの連結」で作成したテーブルアダプターです。

Visual Basic

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」の宣言を作成します。

Visual Basic

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. この中に、クエリを実行してテーブルアダプターにデータを埋める式を記述します。

Visual Basic

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#はメソッド）で呼び出します。これで、アプリケーション起動時にグリッドにデータベースのデータが埋め込まれます。

Visual Basic

Public Sub New()
    ' この呼び出しはデザイナーで必要です。
    InitializeComponent()

    ' InitializeComponent() 呼び出しの後で初期化を追加します。

     Me.C1DataGrid1.ItemsSource = newds.収穫量一覧

End Sub

public MainWindow()
    {
        InitializeComponent();
        this.c1DataGrid1.ItemsSource = newds.収穫量一覧;
    }

　5. アプリケーションを実行し、グリッドにデータが表示されていることを確認します。

アプリケーション実行結果

グループ化の処理

　続いて、グループ化の処理を作成します。グループ化とは、データを指定した列にある同じデータをグループにする機能です。

　C1DataGridコントロールでは、CanUserGroupプロパティをTrueに設定すると、グリッドの上部にグループ化専用のエリアが表示され、ここに列名をドラッグアンドドロップするとグループ化が行われます。

　今回は、CheckBoxコントロールのオンオフ機能を利用して、グループ化の有効・無効を切り替えます。

Visual Basic

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;
    }
}

CheckBoxコントロールをクリックするとグループ化の領域が表示される

この領域に列名「地方名」をドラッグアンドドロップすると

データが地方名でグループ化される

　また、セルをクリックするとソート機能が働き、セルをダブルクリックするとそのまま数値を変更できる数値入力ボックスが使え、列見出しをクリックするとフィルタ機能が使えるようになっています。

セルをダブルクリックすると数値入力ボックスが使えるようになる

列見出しをクリックするとフィルタ機能が使える

外観の変更

　ここまでで、データベースのデータをグリッドで表示でき、グループ化機能も使えるようになりました。あとは、カラーをカスタマイズして見栄えのよい表になるように仕上げます。

　今回変更する部位は次のとおりです。

プロパティ	設定値	説明
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を加えた値を設定します。

　なお、このコードを実行すると、カレントセルの移動が行単位からセル単位に替わります。

Visual Basic

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	新規行までスクロールし、編集を開始します。

（参考：［DataGrid for WPF］Enterキーによるカレントセルの移動方法）

次のページ
その他のテクニック

この記事は参考になりましたか？

印刷用を表示

ポスト

ComponentZine（ComponentOne）連載記事一覧: 【ComponentOne Data Services活用術】kintoneのデータをWi...

業務アプリ開発用UIコンポーネント「ComponentOne」がBlazorに対応！サン...

WPF／WinFormsアプリをマイグレーションして、ComponentOneを利用したモ...

もっと読む

この記事の著者: 瀬戸遥（セトハルカ）

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事