CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/02/27 14:00
目次

GUIの作成

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

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

フォームのレイアウト
フォームのレイアウト

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

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

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

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

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

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

「テスト接続」ボタンをクリックして接続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
C#
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
C#
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
C#
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
C#
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
C#
private void checkBox1_Click(object sender, RoutedEventArgs e)
{
    if(checkBox1.IsChecked ==true)
    {
        c1DataGrid1.CanUserGroup = true;
    }else
    {
        c1DataGrid1.CanUserGroup = false;
    }
}
CheckBoxコントロールをクリックするとグループ化の領域が表示される
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
C#
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キーによるカレントセルの移動方法


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5