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