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