SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(AD)

高機能データグリッドを使用して
従業員情報を出力するWPFアプリケーションを作成する

WPF用データグリッドの利用とXPS形式のエクスポート

  • X ポスト
  • このエントリーをはてなブックマークに追加

プロジェクトにアセンブリを追加

 まず、Visual Studioを起動し、新しいプロジェクトを作成します。

 ソリューションエクスプローラにてプロジェクトを選択し、右クリックでコンテキストメニューから[参照の追加]を選択します。次に参照の追加ダイアログボックスにて.NETタブを選択し、以下のアセンブリへの参照をプロジェクトに追加します。

  1. Infragistics3.Wpf.DataPresenter.v9.1.dll
  2. Infragistics3.Wpf.Editors.v9.1.dll
  3. Infragistics3.Wpf.OutlookBar.v9.1.dll
  4. Infragistics3.Wpf.Reporting.v9.1.dll
  5. Infragistics3.Wpf.v9.1.dll

 次に、Window1.xamlにxamDataGridとxamOutlookBarならびテーマを定義するためのXML名前空間を宣言します。

xmlns:igOutlookBar="http://infragistics.com/OutlookBar"
xmlns:igDP="http://infragistics.com/DataPresenter"
xmlns:igThemes="http://infragistics.com/Themes"

ウィンドウをレイアウト

 WindowのHeightを600、Widthを800と設定し、さらに、ルートGridをDockPanelに変更します。

<Window x:Class="NASalesForce_CS.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:igOutlookBar="http://infragistics.com/OutlookBar"
    xmlns:igDP="http://infragistics.com/DataPresenter"
xmlns:igThemes="http://infragistics.com/Themes"
    Title="Window1" Height="600" Width="800" >
    <DockPanel>
    </DockPanel>
</Window>

xamOutlookBarをウィンドウに追加

 xamOutlookBarをウィンドウに追加し、DockPanelの左側にドックするよう、DockPanel.Dock = "Left"と指定します。このxamOutlookBarはデザインサーフェイス上でスマートタグが提供されており、いろいろな種類のグループをXAMLを記述することなく追加可能です。

<igOutlookBar:XamOutlookBar Name="xamOutlookBar1" DockPanel.Dock="Left" Width="200"/>
図2 - xamOutlookBarのスマートタグ
図2 - xamOutlookBarのスマートタグ

 スマートタグを使用しグリッドを含むグループを2個追加します。それぞれのHeaderを「動作」および「テーマ設定」と設定します。さらに、LargeImageプロパティを指定することでグループにアイコンを表示することができます。今回は「Images」フォルダをプロジェクトに作成し、インフラジスティックスが提供しているNetAdvantage ICONSのサンプル画像を追加しました。アイコンのサンプルやカタログも上記のページからダウンロードできます。

<igOutlookBar:XamOutlookBar Name="xamOutlookBar1" DockPanel.Dock="Left" Width="200">
    <!--OutlookBarGroup を定義します。-->
    <igOutlookBar:OutlookBarGroup Key="{x:Null}" Header="動作" LargeImage="Images\MedicalBag64.png" >
        <Grid />
    </igOutlookBar:OutlookBarGroup>
    <igOutlookBar:OutlookBarGroup Key="{x:Null}" Header="テーマ設定" LargeImage="Images\User Edit64.png">
        <Grid />
    </igOutlookBar:OutlookBarGroup>
</igOutlookBar:XamOutlookBar>

 最後にそれぞれのグループのコンテンツとして定義されているGridをStackPanelに変更し、データのバインドや、エクスポート、テーマ設定を行うUIを定義します。すべてが定義されると次のようなXAMLとなります。

<igOutlookBar:XamOutlookBar Name="xamOutlookBar1" DockPanel.Dock="Left"  Width="200">
    <!--OutlookBarGroup を定義します。-->
    <igOutlookBar:OutlookBarGroup Key="{x:Null}" Header="動作" LargeImage="Images\MedicalBag64.png" >
        <StackPanel>
            <Button Name="bindBtn" Content="データをバインド" Margin="20, 5" />
            <Button Name="exportBtn" Content="データをエクスポート" Margin="20, 5" />
        </StackPanel>
    </igOutlookBar:OutlookBarGroup>
    <igOutlookBar:OutlookBarGroup Key="{x:Null}" Header="テーマ設定" LargeImage="Images\User Edit64.png">
        <StackPanel>
            <TextBlock Text="テーマ:" />
            <ComboBox Name="themeBox" />
        </StackPanel>
    </igOutlookBar:OutlookBarGroup>
</igOutlookBar:XamOutlookBar>
図3 - コンテンツが追加されたxamOutlookBar
図3 - コンテンツが追加されたxamOutlookBar

次のページ
xamDataGridをウィンドウに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

インフラジスティックス・ジャパン株式会社 池原 大然(イケハラ ダイゼン)

国内ベンチャー企業にて.NETエンジニアとして開発に従事、2007年インフラジスティックス・ジャパンに入社。現在デベロッパー エバンジェリストとして、.NETやWPF/Silverlight製品や技術の啓蒙活動を行う。Microsoft MVP for Client App Dev 2010/04 ...

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

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4127 2009/07/07 14:27

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング