Expression Blend を使用してスタイルプロパティを編集

始める前に

Microsoft® Expression® Blend を使用して既存のコントロールスタイルのコピーを素早く簡単に変更できます。これによって、さまざまな Ultimate UI for WPF コントロールに指定できる固有のカスタムスタイルを作成できます。

コントロールの構成はスタイルを変更するために使用する手順を決定します。たとえば、xamGrid™ コントロールは CellControl オブジェクトなどの一般的に使用されるコントロールのためのスタイルプロパティを公開します。ただし、 RowSelectorCellControl オブジェクトなどのその他のネストされたコントロールには xamWebGrid コントロールによって直接公開される対応するスタイルプロパティがありません。代わりに、xamGrid コントロール内のネストされたオブジェクトは適切なスタイルプロパティを公開します。この特別なケースで、 RowSelectorSettings オブジェクトは RowSelectorCellControl オブジェクトのスタイルプロパティを公開します。

このトピックは、ページ上に xamGrid コントロールをすでに持っていることを前提とします。

達成すること

固有のカスタムスタイルを作成するために、xamGrid™ コントロールのコピーを編集する技法をいくつか学習します。固有のカスタムスタイルを作成するためにその他の Ultimate UI for WPF コントロールにその技法を適用できます。最初の技法は、xamGrid コントロールによって直接公開されるプロパティのスタイルを作成する方法を示します。2 番目の技法は、xamGrid コントロールによって直接公開される対応するスタイルプロパティを持たないネストされたコントロールのスタイルを作成する方法を示します。

以下の手順を実行します。

xamGrid の CellStyle プロパティを編集

Expression Blend を使用して、プロパティパネルで xamGrid コントロールの CellStyle プロパティを見つけます。

プロパティパネルで直接 CellStyle プロパティを編集できないことが分かります。幸運なことに、Expression Blend は以下のメニュー項目にナビゲートすることによってこれらのプロパティをスタイルする機能を提供します:

[オブジェクト] -> [他のスタイルの編集] -> ［セルスタイルの編集］ - > [コピーの編集]

SL Designers Guide Editing Style Properties Using Expression Blend 01.png

セルスタイルのコピーを作成します。スタイルのコピーを作成すると、Expression Blend はブラシやその他のオブジェクトをはじめとするスタイル全体を generic.xaml ファイルから自動的にコピーします。
1. [オブジェクト] メニューを開きます。
2. [他のスタイルの編集] メニュー項目を展開します。[他のスタイルの編集] メニュー項目を有効にするには、Expression Blend のビジュアルデザインサーフェイスで xamGrid コントロールを選択する必要があります。xamGrid コントロールによって直接公開されるスタイルプロパティはサブメニューに対応するメニュー項目があります。
3. [セルスタイルの編集] メニュー項目を展開します。
4. [コピーの編集] を選択します。

SL Designers Guide Editing Style Properties Using Expression Blend 02.png

[アプリケーション] オプションを選択し、[OK] ボタンをクリックして、アプリケーションのリソースディクショナリにスタイルのコピーを追加します。

スタイルをアプリケーションのリソースディクショナリに追加するとページはクリーンのままであり、アプリケーション内の他のページでこのスタイルを再利用することが可能となります。

SL Designers Guide Editing Style Properties Using Expression Blend 03.png

この時点で、Expression Blend はそれ自身で CellControl を含むビジュアルデザインサーフェースをロードします。

SL Designers Guide Editing Style Properties Using Expression Blend 04.png

これで CellControl オブジェクトの既存のコントロールテンプレートを変更する機会ができます。
1. CellControl オブジェクトを右クリックします。
2. [テンプレートの編集] メニュー項目を展開します。
3. [カレントの編集] を選択します。

SL Designers Guide Editing Style Properties Using Expression Blend 05.png

この時点で、CellControl オブジェクトを構成する要素を表示するツリーが表示されるはずです。探しているスタイルを取得するためにこのテンプレートを編集できます。追加のおまけとして、テンプレートの編集が完了したら、アプリケーションを実行するだけで結果を確認することができます。Expression Blend が CellStyle プロパティを自動的に設定するからです。

SL Designers Guide Editing Style Properties Using Expression Blend 06.png

ネストされたコントロールのスタイルの編集

スタイルを付けたいネストされたコントロールのインスタンスをページにドラッグします。

この例では、 xamGrid.RowSelectorSettings.Style プロパティを編集するために RowSelectorCellControl オブジェクトを使用します。[コントロール] -> [Infragistics] -> [コントロールのパーツ] - > [xamGrid] の下にあるアセットパネルでこのコントロールを見つけることができます。

SL Designers Guide Editing Style Properties Using Expression Blend 07.png

RowSelectorCellControl オブジェクトのスタイルのコピーを作成します。
1. [オブジェクト] メニューを開きます。
2. [スタイルの編集] メニュー項目を展開します。
3. [コピーの編集] を選択します。

SL Designers Guide Editing Style Properties Using Expression Blend 08.png

CellControl オブジェクトのスタイルを作成した時に表示されたのと同じダイアログが表示されます。このダイアログを使用してスタイル名を指定するだけでなく、アプリケーションのリソースディクショナリに配置します。

SL Designers Guide Editing Style Properties Using Expression Blend 09.png

CellControl オブジェクトのテンプレートを編集するために以前使用したのと同じ技法を使用してコントロールのテンプレートを編集できます。
1. RowSelectorCellControl オブジェクトを右クリックします。
2. [テンプレートの編集] メニュー項目を展開します。
3. [カレントの編集] を選択します。

SL Designers Guide Editing Style Properties Using Expression Blend 10.png

コントロールの特定の要素を変更することが可能となります。

SL Designers Guide Editing Style Properties Using Expression Blend 11.png

新たに作成したスタイルを行セレクターに適用するために今ひとつ追加の手順が必要となります。RowSelectorSettings オブジェクトの Style プロパティを作成したばかりのスタイルに設定する必要があります。

XAML の場合:

<ig:XamGrid>
    <ig:XamGrid.RowSelectorSettings>
        <ig:RowSelectorSettings Style="{StaticResource RowSelectorCellontrolStyle1}" />
    </ig:XamGrid.RowSelectorSettings>
</ig:XamGrid>

WPF | ヘルプ トピック

Expression Blend を使用してスタイル プロパティを編集