CodeZine(コードジン)

特集ページ一覧

SQL Serverのデータをグリッドで表示するWPFアプリケーションの作成

ComponentOne Studio Enterprise 2011JのC1FlexGridコントロールを使ったWPFアプリケーションの作成

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

アプリケーションの作成とデータベースファイルの組み込み

 では、アプリケーションを作成していきましょう。使用するコントロールは、C1FlexGrid、TextBlock、CheckBoxの3つだけです。

GUIのデザイン

 Gridを3行に分割し、それぞれコントロールを配置していきます。TextBlockコントロールはページの見出しに使用します。ドロップシャドウをつけて見栄えを良くします。

 C1FlexGridコントロールは、サイズを決め枠線を表示するだけであとは何もしません。列見出しやデータ用セルの作成は、データを連結した時点で自動的に行われます。チェックボックスは、グループ化のオンオフに使用するので、Checked/Uncheckedイベントハンドラを作成しておきます。

GUIのデザイン
GUIのデザイン

 なお、C1FlexGridコントロールへのデータ連結をWindowオブジェクトの初期化イベントで実行するので、次の手順で[Loaded]イベントハンドラを作成しておいてください。

  1. デザイナでWindowをクリックし、プロパティウィンドウの[イベント]をクリック

    プロパティウィンドウの[イベント]をクリック
    プロパティウィンドウの[イベント]をクリック
  2. イベントリストから[Loaded]をクリック

    イベントリストから[Loaded]をクリック
    イベントリストから[Loaded]をクリック
作成したXAMLコード
<Window x:Class="WPF_FG_Data_cs.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="800" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" Loaded="Window_Loaded">
    <Grid Height="449" Width="769">
        <Grid.RowDefinitions>
            <RowDefinition Height="59*" />
            <RowDefinition Height="290*" />
            <RowDefinition Height="100*" />
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Height="31" Name="TextBlock1" Text="SQL Server データをFlexGridで表示する" Width="394" FontSize="20" Foreground="Brown">
                <TextBlock.Effect>
                    <DropShadowEffect BlurRadius="5" Color="#C3000000" />
                </TextBlock.Effect>
        </TextBlock>
        <c1:C1FlexGrid Grid.Row="1" Margin="43,13,38,34" Name="C1FlexGrid1" Width="688" BorderBrush="Blue" BorderThickness="2" />
        <CheckBox Content="カテゴリ名でグループ化" Grid.Row="2" Height="16" HorizontalAlignment="Left" Margin="43,11,0,0" 
                  Name="CheckBox1" VerticalAlignment="Top" Checked="CheckBox1_Checked" Unchecked="CheckBox1_Unchecked" />
    </Grid>
</Window>

データベースファイルのプロジェクトへの組み込み

 GUIがデザインできたら、使用するデータベースをプロジェクトに組み込みます。使用するデータベースファイルは、SQL Serverのサンプルデータベース「AdventureWorksLT2008_Data.mdf」内に複数のテーブルで構成されています。この中にある「Product」と「ProductCategory」という2つのテーブルにあるデータ内で、「Color」が「"Black"」に該当するデータを抽出するクエリを実行し、結果セットをC1FlexGridコントロールで表示します。

使用するデータベースのテーブルとデータ
使用するデータベースのテーブルとデータ

 まず、ソリューションエクスプローラのプロジェクト名の上でマウスの右ボタンを押して、ショートカットメニューから[追加]-[新しい項目]を選びます。

[追加]-[新しい項目]を選ぶ
[追加]-[新しい項目]を選ぶ

 テンプレートリストから[ADO.NET Entity Data Model]を選び、[追加]ボタンをクリックします。

[ADO.NET Entity Data Model]選ぶ
[ADO.NET Entity Data Model]選ぶ

 [データベースから生成]が選択されているのを確認し、[次へ]ボタンをクリックします。

[データベースから生成]が選択されているのを確認
[データベースから生成]が選択されているのを確認

 [新しい接続]ボタンをクリックし、[Microsoft SQL Server データベースファイル]を選択して[続行]ボタンを押します。

[Microsoft SQL Server データベースファイル]を選択して[続行]ボタンを押す
[Microsoft SQL Server データベースファイル]を選択して[続行]ボタンを押す

 [参照]ボタンをクリックして、使用するデータベースファイルを選びます。

[参照]ボタンで使用するデータベースファイルを選ぶ
[参照]ボタンで使用するデータベースファイルを選ぶ

 [テスト接続]ボタンをクリックし、データベースファイルに接続できることを確認します。

テスト接続にて、データベースファイルに接続できることを確認
テスト接続にて、データベースファイルに接続できることを確認

 ウィザードに戻り、[エンティティ接続設定に名前を付けてApp.Configに保存]欄の名前を「sql_db1」に変更し、[次へ]ボタンをクリックします。プロジェクトにコピーするかどうかのダイアログが表示されたら、そのままOKボタンをクリックします。

[エンティティ接続設定に名前を付けてApp.Configに保存]欄の名前を「sql_db1」に変更
[エンティティ接続設定に名前を付けてApp.Configに保存]欄の名前を「sql_db1」に変更

 データベースオブジェクトを指定する画面に移るので、[テーブル]を展開し[Product]と[ProductCategory]の2つのテーブルにチェックを付け[完了]ボタンをクリックします。

[Product]と[ProductCategory]にチェックを付け[完了]ボタンをクリック
[Product]と[ProductCategory]にチェックを付け[完了]ボタンをクリック

 データベースが組み込まれると、プロジェクトに「Model1.edmx」というファイルが追加され、2つのテーブルデータがリレーション付きで表示されます。

2つのテーブルデータが表示される
2つのテーブルデータが表示される

 これで、プロジェクトにデータベースファイルを組み込むことができました。


  • ブックマーク
  • 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