試してみよう: SimpleComboBox の展開ボタンの外観のカスタマイズ

このページは WPF プロジェクトにのみに適用

SimpleComboBox の ToggleButton コントロール テンプレートを使用すると、Microsoft Expression Blend でコンボ ボックスの展開ボタンの外観を簡単にカスタマイズできます。

SimpleComboBox の展開ボタンをカスタマイズするには

  1. Expression Blend で、アートボード上に SimpleComboBox を描画します。

    tip noteヒント :

    Simple スタイルのコントロールは、[アセット] パネルの [スタイル] カテゴリにある [Simple Styles] に表示されます。一覧からコントロールを選択したら、アートボードに描画できます。

  2. [オブジェクトとタイムライン] パネルでコンボ ボックスを右クリックし、[SimpleComboBoxItem の追加] をクリックして、コンボ ボックスにアイテムを追加します。

  3. 前の手順を繰り返して、コンボ ボックスにさらに 1 つまたは 2 つのアイテムを追加します。

  4. [オブジェクトとタイムライン] パネルの ComboBox を右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。SimpleStyles.xaml リソース ディクショナリを変更しない場合は、[テンプレートの編集] ではなく、[コピーして編集] をクリックし、新しいテンプレートを作成してドキュメントに保存します。コピーの作成の詳細については、「リソースの作成」を参照してください。

    tip noteヒント :

    テンプレートの編集モードを終了して、ドキュメントのスコープに戻るには、[オブジェクトとタイムライン] パネルのオブジェクト ツリーの上にある [スコープを <オブジェクト名> に戻す] Cc294708.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.40).png をクリックします。

    既存のテンプレートを編集するためにテンプレート編集モードに戻るには、[オブジェクトとタイムライン] パネルでテンプレートを編集するオブジェクトを右クリックし、[テンプレートの編集] をポイントして [現在のテンプレートの編集] をクリックします。

  5. コントロール テンプレートの編集スコープで、[オブジェクトとタイムライン]パネルのすべてのノードを展開します。

  6. [オブジェクトとタイムライン] パネルで ToggleButton オブジェクトを右クリックし、[テンプレートの編集] をポイントして、次のいずれかの操作を行います。

    • 手順 4 で [現在のテンプレートの編集] を選択した場合は、ここでも [現在のテンプレートの編集] をクリックし、SimpleStyles.xaml に保存されている ExpanderToggleButton コントロール テンプレートを編集します。

    • 手順 4 で [コピーの編集] を選択した場合は、ここでも [コピーの編集] をクリックして ExpanderToggleButton コントロール テンプレートのコピーを作成し、それを ComboBox のテンプレートと同じ場所に格納します。

    展開ボタンの外観は、ExpanderToggleButton コントロール テンプレートでデザインされています。テンプレートの Grid がコンボ ボックスの幅いっぱいに広がります。このようにデザインすることで、ユーザーがコンボ ボックス内のどこをクリックしても、ドロップダウン リストが表示されるようにします。

  7. [オブジェクトとタイムライン] パネルで Arrow オブジェクトを選択し、これがアートボードのどこに表示されるかを確認します。Arrow オブジェクトは、ComboBox コントロールの展開ボタンを示す Path です。

    Arrow オブジェクトを変更するには、[個別選択] ツール Cc294708.6dd6571f-c116-451d-8dd2-1f88b8406362(ja-jp,Expression.40).png を使用してパス上の点を調整します。または、Arrow オブジェクトを削除して、[ツール] パネルの [ペン] ツール Cc294708.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ja-jp,Expression.40).png で新しいオブジェクトを作成することもできます。

    tip noteヒント :

    アートボードにズーム インするには、アートボードの下端にある [ズーム] テキスト ボックス Cc294708.12524287-c48b-4cfc-b614-01951207239d(ja-jp,Expression.40).png を使用するか、Ctrl キーを押しながらマウスのスクロール ボタンを回します。
    tip noteヒント :

    [ペン] ツールを使用してパス オブジェクトを描画する代わりに、Microsoft Expression Design からインポートしたアート リソース、またはプロジェクトに追加したイメージ ファイルを使用することもできます。

  8. 展開ボタンがクリックされたときのロールオーバー効果は、ToggleButton コントロール テンプレート内の Rectangle オブジェクトの外観を変更するプロパティ トリガーによって定義されています。展開ボタンがクリックされたときに Arrow オブジェクトを回転させるプロパティを、既存のトリガーに設定することができます。[オブジェクトとタイムライン ] パネルで Arrow オブジェクトが選択された状態で、[トリガー] パネルの IsChecked = True をクリックします。次に、[プロパティ] パネルの [変換] で [回転] タブをクリックして、[角度] テキスト ボックスに「180」と入力します。

    ユーザーが展開ボタンをクリックしてコンボ ボックスを展開すると Arrow オブジェクトが 180°回転し、再び展開ボタンをクリックすると元の角度に戻ります。

    tip noteヒント :

    [トリガー] パネルでプロパティ トリガーを選択した状態になっている間は、Expression Blend のどこで行った変更もすべてそのトリガーの条件として設定されます。変更を行う前に、適切なトリガーが選択されていることを確認してください。コントロール テンプレートの既定の状態を変更する場合は、[トリガー] の [既定] をクリックします。

  9. F5 キーを押してアプリケーションをテストし、変更結果を確認します。

関連項目

概念

SimpleComboBox および SimpleComboBoxItem

Copyright ©2011 by Microsoft Corporation. All rights reserved.

  • Last updated on