XamDataGrid ベーシックその 1 - Blend の概要

0 ユーザーが評価
この投稿には確認済みの回答があります。 0 返信 | 1 サポーター

トップ 10 投稿者 
女性
投稿 22
IG Employee

元記事 (英語): Curtis Taylor - http://forums.infragistics.com/blogs/curtis_taylor/archive/2010/08/16/xamdatagrid-101-part-1.aspx

XamDataGrid ベーシックその 1 - Blend の概要

 

XamDataGrid は NetAdvantage for WPF 製品のプレミア コントロールです。Infragistics データ グリッドの魅力は、他のグリッド コントロールと比べてパフォーアンスが非常に高いことです。XamDataGrid コントロールは非常に速く、カスタマイズ可能です。グリッドがカスタマイズ可能で、オブジェクト モデルのさまざまな部分のスタイル設定や書式設定が可能です。この記事では、グリッドのカスタマイズ方法を説明します。

サンプル プロジェクトの作成

XamDataGrid は自動的にデータを書式設定します。グリッドにコレクションをバインドし、グリッドがプロパティからデータ フィールドを展開して、デフォルト書式でエディターを割り当てます。Expression Blend で WPF 4.0 プロジェクトを作成して、サンプル データを XamDataGrid にバインドします。

Expression Blend 4 で新しい WPF Application プロジェクトを作成します。.NET バージョン は 4.0 を選択する必要があります。このプロジェクトで新しい NetAdvantage CLR 4.0 コントロールである XamColorPicker コントロールを使用するためです。テスト プロジェクトは XDG101 と名前付けました。

NetAdvantage for WPF のリソースを追加します。プロジェクト パネルの [参照設定] フォルダーを右クリックします。

Blend では、アセンブリの DLL を含むフォルダーを参照する必要があります。Program Files フォルダーを参照して、Infragistics\NetAdvantage\2010.2 フォルダーを選択します。

このフォルダーは WPF フォルダーおよび WPFCommon フォルダーを含み、後で使用する DLL を含みます。NetAdvantage for WPF Data Visualization と共有する DLL があるため、WPFCommon フォルダーはこの共有される DLL を含みます。

WPFCommon\Bin フォルダーの InfragisticsWPF4.v10.2.dll をプロジェクト参照設定に追加します。

参照の追加ダイアログで WPF\CLR4.0\Bin フォルダーから以下の DLL を追加します。

InfragisticsWPF4.Controls.Editors.XamColorPicker.v10.2.dll
InfragisticsWPF4.DataPresenter.v10.2.dll
InfragisticsWPF4.Editors.v10.2.dll

Blend のデータ パネルでプロジェクト データを追加します。データを「このドキュメント」に追加すると、アプリケーションの代わりにメイン ウィンドウにデータ ソースのインスタンス化を追加します。



サンプル データを追加したときに、デフォルトで 2 つのプロパティを含むクラスが追加されます。最初のプロパティは Lorem ipsum 書式設定の文字列です。このプロパティの名前をクリックして、プロパティを「ProductName」に名前を変更します。

2 つ目のデフォルト プロパティはブール値のタイプです。このプロパティの名前を「ForSale」に変更します。

データ パネルで Collection の右にある「+」アイコン ボタンをクリックして、他のプロパティを追加します。ボタンをクリックすると、デフォルトで String プロパティを追加します。プロパティの名前を「Icon」に変更します。プロパティの右側で、タイプと書式設定をカスタマイズできます。新しく追加したプロパティのタイプを Image に変更します。

Location フィールドは空のまま変更しません。このように、Blend はサンプル画像をプロジェクトに追加します。Location を設定すると、カスタム画像のフォルダーをデータに追加できます。

次に、「ID」という名前のプロパティを追加します。Type を Number に設定して、Length を 4 に設定します。

次に、「ColorKey」と名前のプロパティを追加します。Type を String に設定して、Format を Colors に設定します。

最後に、「Price」と名前のプロパティを追加します。Type を Number に設定して、Length を 2 に設定します。

次に、XamDataGrid のインスタンスを MainWindow のメイン レイアウトに追加します。アセット パネルの検索フィールドを使用すると XamDataGrid を簡単に見つけることができます。

アセット リストで XamDataGrid をダブルクリックするか、ウィンドウのデザイン領域にドラッグします。

要素を追加したときに、Blend は特定の Layout プロパティを設定して配置します。XamDataGrid をウィンドウに合わせるために、プロパティ パネルの Layout カテゴリですべてのプロパティをリセットします。「リセット」は詳細レイアウト メニューでプロパティをデフォルト設定に戻すオプションです。各プロパティの右の矩形をクリックすると、詳細レイアウト メニューにアクセスできます。

データを XamDataGrid に割り当てるには、オブジェクトとタイムライン パネルでコントロールを選択して、プロパティ パネルの Content カテゴリで DataSource プロパティを検索します。

DataSource の詳細レイアウト メニューにアクセスして、データ バインディング オプションを選択します。

「データ バインディングの作成」ダイアログでは、コレクションをバインディング式に割り当てます。これはデータ フィールドのタブにあります。

コレクションを選択してダイアログを閉じた後に、XamDataGrid が作成したデータと共に生成されます。

データの書式設定

データの書式設定をカスタマイズする方法を説明します。各ヘッダーのラベルはプロパティ名と一致することに注意してください。ラベルのテキストをオーバーライドします。アイコンの幅と高さをオーバーライドします。アイコンをグリッドに最小のフィールドに移動します。ID フィールドで浮動小数点を含む数値を削除します。Price 数値フィールドを通貨として書式設定します。最後に、ColorKey フィールドのエディターとして XamColorPicker 要素を割り当てます。

フィールドの作成をオーバーライドするには、XamDataGrid の AutoGenerateFields 機能を無効にします。このプロパティはデータ グリッドの FieldLayoutSettings プロパティにあります。プロパティ パネルの Behavior カテゴリで LayoutFieldSettings を検索します。このプロパティの隣りにある「新規」ボタンをクリックすると、プロパティのカスタマイズ可能なインスタンスを追加します。Blend は FieldLayoutSettings のプロパティを表示するには展開します。AutoGenerateFields プロパティを無効にします。

各フィールドが XamDataGrid で表示する方法を定義するカスタム FieldLayout を追加します。プロパティ ペインの「その他」カテゴリで FieldLayouts (コレクション) プロパティを検索します。省略記号ボタンをクリックすると、FieldLayout のインスタンスを追加するダイアログを表示します。

FieldLayout コレクション エディターで FieldLayout インスタンスを追加します。

 

追加した FieldLayout のプロパティには、Fields コレクションがあります。Fields コレクション ボタンをクリックすると、Field コレクション エディター ダイアログが表示されます。ここでデータ ソースのプロパティに基づいて Field を追加します。

「別のアイテムを追加」ボタンをクリックすると、オブジェクトの選択ダイアログが表示されます。このダイアログでは Field または UnboundField を選択します。UnboundField (バインドされていないフィールド) はデータ ソースのプロパティから派生されないフィールドです。

Field オブジェクトを追加します。

Field コレクション エディター ダイアログで Field が表示され、その Field のプロパティはダイアログの右側に表示されます。最初のフィールドを Icon プロパティに設定するには、Field の Name プロパティをデータ ソースのプロパティ名と同じ名前に設定します。

Name フィールドに「Icon」を入力します。

アイコン画像のラベルは必要ないため、Label フィールドに「 」を入力します。

アイコンの幅と高さを制限するには、Width と Height フィールドに 30 を入力します。

Field コレクション エディターで「別のアイテムを追加」をクリックします。「OK」をクリックしてエディターを閉じた場合、 FieldLayout コレクション エディター ダイアログで Field 省略記号をクリックします。

新しい Field を追加します。

ProductName プロパティをフィールドに割り当てます。Field の Name プロパティに「ProductName」を割り当て、Label プロパティに「Product Name」を設定します。Width プロパティを 160 に設定します。

3 つ目の Field を追加して、以下のプロパティを設定します。

Name: 「ForSale」

Label: 「For Sale」

Width: 「70」

4 つ目の Field を追加して、以下のプロパティを設定します。

Name: 「ID」

Label: 「ID」

Width: 「60」

5 つ目の Field を追加して、以下のプロパティを設定します。

Name: 「ColorKey」

Label: 「Color Key」

6 つ目の Field を追加して、以下のプロパティを設定します。

Name: 「Price」

Label: 「Price」

Width: 「70」

[OK] を 2 回クリックして 2 つのダイアログを閉じます。プロジェクトを実行すると、新しいフィールド レイアウトのグリッドが表示されます。

以下のコードは Blend が作成された XAML です。

エディターの書式設定

書式設定を完了するには、スタイルを追加します。Expression Blend でスタイルを作成するには、スタイル設定するオブジェクト タイプのインスタンスが必要です。スタイル設定するオブジェクトが Blend がアクセスできないコンテキストに存在することは問題となります。たとえば、XamDataGrid は各フィールド タイプの XamEditor 派生をインスタンス化します。インスタンスが暗黙的に割り当てられるため、Blend が参照する明示的なインスタンスがないために、 エディターのスタイルを作成できません。この問題を回避するには、XAML テキスト エディターでスタイルを作成します。または、スタイル設定するエディター タイプのインスタンスを作成して、エディターのスタイルを作成し、エディターのインスタンスを解除してから XamDataGrid フィールドにスタイルを割り当てることもできます。私は 2 番目の方法を推薦をします。

実行する前に、オブジェクトとタイムライン パネルの LayoutRoot が選択されていることを確認します。

アセット ペインで XamNumericEditor を入力し、エディター コントロールをダブルクリックして Window に追加します。

オブジェクトとタイムラインで XamNumericEditor を選択して、メニュー バーから[オブジェクト -> スタイルの編集 -> 空のスタイルを作成] メニュー項目を選択します。

[スタイル リソースの作成] ダイアログで、スタイルの名前を「NumericEditorIDStyle」に設定して、ドキュメントに追加します。

Blend のデザイナーはスタイル編集モードになります。このモードでは、プロパティの変更は現在のスタイルの Setter になります。

XamNumericEditor で小数点の右に数字を表示しないように書式設定するには、Mask プロパティにマスクを設定します。

Mask プロパティに「nnnn」を入力します。

「スコープを戻す」ボタンをクリックして、スタイル編集モードを終了します。

スタイルが設定したため、XamNumericEditor は必要ありません。

[オブジェクトとタイムライン] パネルから XamNumericEditor 要素を削除します。

スタイルが Window のリソース ディクショナリに追加されました。

スタイルを適用するには、ID フィールドの Field.Settings.EditorStyle プロパティに設定します。

XamDataGrid の FieldLayouts (コレクション) プロパティの省略記号ボタンをクリックして、FieldLayout コレクション エディター ダイアログで Fields (コレクション) の省略ボタンをクリックして、Field コレクション エディター ダイアログの 4 つ目の Field を選択して、ID フィールドの Setting プロパティの右にある「新規」ボタンをクリックします。

そのフィールドの追加プロパティ設定が表示されます。EditorStyle プロパティを検索します。EditorStyle の詳細オプションでは、ローカル リソース オプションが無効です。将来のバージョンで有効になる可能性があります。その代わりに、カスタム式を追加します。

[カスタム式] ダイアログで、以下のテキストを入力します:

{StaticResource NumericEditorIDStyle}

これにより書式設定が ID フィールドに適用されます。

Price フィールドに通貨書式設定を適用するには、Editor タイプを XamNumericEditor から XamCurrencyEditor に変更します。ID フィールドを変更する方法と同じですが、スタイルを設定する必要はありません。その前に、mscorlib アセンブリ名前空間への参照を追加する必要があります。

XAML エディターでこの手順を実行します。以下のテキストを XAML エディターで Window タグに追加します。

xmlns:sys="clr-namespace:System;assembly=mscorlib"

 

デザイン エディターに戻ります。XamDataGrid の FieldLayouts ダイアログで Field ダイアログを開いて、Price フィールドのプロパティ エディターを開きます。最後のフィールドが Price フィールドです。Settings の [新規] ボタンをクリックします。

Settings プロパティで EditAsType を検索して、詳細オプションでカスタム式オプションに以下のテキストを追加します。

{x:Type sys:Decimal}

EditorType プロパティの詳細オプションで以下のカスタム式を追加します。

{x:Type igEditors:XamCurrencyEditor}

追加した 2 つのカスタム式から以下の XAML が生成されます。

OK をクリックすると、Price フィールドは現在ロケールの通貨書式を表示します。

CellValuePresenter DataTemplate のオーバーライド

グリッドの書式をカスタマイズする最後の手順は ColorKey フィールドの変更です。DataTemplate 定義を含む CellValuePresenter スタイルを作成します。DataTemplate は ColorKey 値を XamColorPicker コントロールの SelectedColor プロパティにバインドします。

CellValuePresenter スタイルを作成する方法については、さまざまな XAML の例がヘルプで参照できます。CellValuePresenter は各フィールドに作成されますが、Blend はそれらのオブジェクトにアクセスできません。CellValuePresenter は XamDataGrid レコードの UI でセルを表示される方法を定義します。

また、XamDataGrid はこのコントロールのインスタンスを自動的に作成するため、アセット ペインで表示されません。XAML エディターでテンプレートを定義します。

XAML エディターで以下のテキストを (XAML の XamDataGrid ブロックの前または後に) LayoutRoot コンテンツに追加します。

<igDP:CellValuePresenter/>

デザイナーに戻って、CellValuePresenter は [オブジェクトとタイムライン] に表示されます。スタイルが設定可能なオブジェクトがアセット ペインにあります。

CellValuePresenter をデザイナーに追加します。CellValuePresenter を選択して、メニュー バーのオブジェクト メニューから [スタイルの編集] -> [空のスタイルを作成] オプションを選択します。

[スタイル リソースの作成] ダイアログでスタイルを ColorKeyCellStyle として名前付けます。

セル値プレゼンターに XamEditor 以外のコントロールに割り当てるために、DataTemplate を作成する必要があります。スタイル エディター デザイナーの上側の階層リンク バーでテンプレートを変更するメニューがあります。

デザイナーの上側の CellValuePresenter ラベルの隣りにパレット メニューがあります。このスタイルに使用可能なテンプレート エディターを表示します。ContentTemplate を編集するために、2 つ目のテンプレート エディターを選択します。空のテンプレートを作成します。

[DataTemplate リソースの作成] ダイアログで、「ColorCellDataTemplate」のスタイル名を追加します。

DataTemplate を作成するために、Blend はデザイナーを編集モードに変更します。

アセットから XamColorPicker コントロールを DataTemplate グリッドに追加します。

XamColorPicker がオブジェクトとタイムライン パネルで選択されていることを確認します。その後で、XamColorPicker のプロパティカテゴリで SelectedColor プロパティを検索します。

SelectedColor の詳細オプションで「データ バインディング」オプションを選択します。

「データ バインディングの作成」ダイアログでは、データ コンテキスト タブが選択されたことを確認して、「カスタム パス式を使用」フィールドに以下のテキストを入力します。

Value

また、すべての Layout プロパティがデフォルトに設定されていることを確認します。Blend は HorizontalAlignment を Left に設定する可能性があります。これでは正しく表示されません。Horizontal と Vertical の両方を Stretch に設定する必要があります。

Window レイアウトのスコープに戻って、LayoutRoot から CellValuePresenter を削除します。

スタイルを ColorKey フィールドに割り当てるために、XamDataGrid の FieldLayout の Field ダイアログに戻ります。

Field コレクション エディター ダイアログで最後の前の Field を選択します。

ColorKey フィールドで新規設定を追加します。

CellValuePresenterStyle プロパティで詳細オプションを選択します。

ローカル リソースのオプションから ColorKeyCellStyle を選択します。

最後にもう一つ変更があります。Blend のスタイルの割り当てで DynamicResource キーワードを使用します。ランタイムで DynamicResource を使用すると CellValuePresenter を割り当てるときに問題になる可能性がありますが、スタイルはローカルに定義されているため、DynamicResource を StaticResource に変更できます。XAML で変更できるか、詳細オプションで [カスタム式] オプションを選択して変更できます。ローカル リソースに割り当てたため、カスタム式フィールドはその式を表示します。ここでは DynamicResource を StaticResource に変更します。

開いたダイアログで OK をクリックして、アプリケーションを実行します。ColorKey フィールドで XamColorPicker が色を表示します。

Data パネルでレコードを追加してサンプル データをカスタマイズできます。

カスタム要素が表示されない場合、XAML が正しいことを確認するか、スタイル設定の割り当てを確認します。要素が表示されますが、配置が違う場合、割り当てられた Layout プロパティをクリアします。

添付のプロジェクトを参照してください。

Blend は完璧ではありませんが、XAML の自動作成は便利な機能です。プロパティとイベント名を XAML で表示し、スタイルとテンプレートを簡単に変更できるエディターを提供します。

XamDataGrid ベーシックその 2 のブログでは、背景をオーバーライドするスタイルを適用し、セル、ヘッダー ラベル、行集計の強調表示とホバー ブラシを説明し、セルとラベルのテキスト スタイルをオーバーライドする方法を説明します。

 

ページ 1 / 1 (1 項目) | RSS
Infragistics Japan
インフラジスティックス ジャパン