.png "This page applies to WPF projects only")
SimpleComboBox の ToggleButton コントロール テンプレートを使用すると、Microsoft Expression Blend でコンボ ボックスの展開ボタンの外観を簡単にカスタマイズできます。
SimpleComboBox の展開ボタンをカスタマイズするには
Expression Blend のアートボードに [SimpleComboBox] を描きます。
.gif "ヒント")
ヒント :Simple スタイルのコントロールは、[アセット] パネルの [スタイル] カテゴリにある [Simple Styles] に表示されます。一覧からコントロールを選択したら、アートボードに描画できます。
[オブジェクトとタイムライン] パネルでコンボ ボックスを右クリックし、[SimpleComboBoxItem の追加] をクリックして、コンボ ボックスにアイテムを追加します。
前の手順を繰り返して、コンボ ボックスにさらに 1 つまたは 2 つのアイテムを追加します。
[オブジェクトとタイムライン] パネルの [ComboBox] を右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。SimpleStyles.xaml リソース ディクショナリを変更しない場合は、[テンプレートの編集] ではなく、[コピーして編集] をクリックし、新しいテンプレートを作成してドキュメントに保存します。コピーの作成の詳細については、「リソースの作成」を参照してください。
ヒント :テンプレートの編集モードを終了してドキュメントのスコープに戻るには、[オブジェクトとタイムライン] パネルの要素ツリーの上にある [Scope up]
.png "Cc294708.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(JA-JP,Expression.30).png")
をクリックします。既存のテンプレートを編集するためにテンプレート編集モードに戻るには、[オブジェクトとタイムライン] パネルでテンプレートを編集する要素を右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。.
コントロール テンプレートの編集スコープで、[オブジェクトとタイムライン]パネルのすべてのノードを展開します。
[オブジェクトとタイムライン] パネルの [ToggleButton] を右クリックして [テンプレートの編集] をポイントし、次のいずれかの操作を行います。
手順 4. で [現在のテンプレートの編集] を選択した場合は、ここでも [現在のテンプレートの編集] をクリックし、SimpleStyles.xaml に保存されている ExpanderToggeButton コントロール テンプレートを編集します。
手順 4. で [コピーして編集] を選択した場合は、ここでも [コピーして編集] をクリックして ExpanderToggeButton コントロール テンプレートのコピーを作成し、それを ComboBox のテンプレートと同じ場所に格納します。
展開ボタンの外観は、ExpanderToggeButton コントロール テンプレートでデザインされています。テンプレートの Grid がコンボ ボックスの幅いっぱいに広がります。このようにデザインすることで、ユーザーがコンボ ボックス内のどこをクリックしても、ドロップダウン リストが表示されるようにします。
[オブジェクトとタイムライン] パネルで [Arrow] 要素を選択し、この要素がアートボードのどこに表示されるかを確認します。Arrow 要素は、ComboBox コントロールの展開ボタンを表す Path です。
Arrow 要素を変更するには、[個別選択] ツール
.png "Cc294708.6dd6571f-c116-451d-8dd2-1f88b8406362(JA-JP,Expression.30).png")
を使用してパス上の点を調整します。または、[Arrow] 要素を削除して、[ツール] パネルの [ペン] ツール .png "Cc294708.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(JA-JP,Expression.30).png")
で新しい要素を作成することもできます。ヒント :アートボードにズーム インするには、アートボードの下端にある [ズーム] テキスト ボックス
.png "Cc294708.12524287-c48b-4cfc-b614-01951207239d(JA-JP,Expression.30).png")
を使用するか、Ctrl キーを押しながらマウスのスクロール ボタンを回します。ヒント :ペン ツールでパス要素を描画する代わりに、Microsoft Expression Design 2 からインポートしたアート リソースや、プロジェクトに追加したイメージ ファイルを使用することもできます。
展開ボタンがクリックされたときのロールオーバー効果は、ToggleButton コントロール テンプレート内の Rectangle 要素の外観を変更するプロパティ トリガーによって定義されています。展開ボタンがクリックされたときに Arrow 要素を回転させるプロパティを、既存のプロパティに設定することができます。[オブジェクトとタイムライン ] パネルで [Arrow] 要素を選択し、[トリガー] の [IsChecked = True] をクリックします。次に、[プロパティ] パネルの [変換] で [回転 ] タブをクリックして、[角度] テキスト ボックスに「180」と入力します。
ユーザーが展開ボタンをクリックしてコンボ ボックスを展開すると Arrow 要素が 180°回転し、再び展開ボタンをクリックすると元の角度に戻ります。
ヒント :[トリガー] パネルでプロパティ トリガーを選択した状態になっている間は、Expression Blend のどこで行った変更もすべてそのトリガーの条件として設定されます。変更を行う前に、適切なトリガーが選択されていることを確認してください。コントロール テンプレートの既定の状態を変更する場合は、[トリガー] の [既定] をクリックします。
F5 キーを押してアプリケーションをテストし、変更結果を確認します。