次の方法で共有

試してみよう : SimpleListBox の選択アイテムの外観の変更

  • [アーティクル]

このページは WPF プロジェクトにのみ適用されます。

SimpleListBoxItem コントロール テンプレートを使用すると、Microsoft Expression Blend でリスト ボックスの選択アイテムの外観を簡単にカスタマイズできます。

SimpleListBox の選択アイテムの外観を変更するには

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

    Cc295254.alert_tip(ja-jp,Expression.10).gifヒント :

    簡易スタイルを使用するには、[アセット ライブラリ] Cc295254.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png の [コントロール] タブで [簡易スタイル] をクリックします。一覧から簡易スタイル コントロールを選択したら、アートボード上で描画できます。

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

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

    Cc295254.alert_tip(ja-jp,Expression.10).gifヒント :

    テンプレートの編集モードを終了し、ドキュメントのスコープに戻るには、[上へスコープ] ボタン Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.10).png をクリックします。このボタンは、[組み合わせ] パネルの要素ツリーの上にあります。

    既存テンプレートのテンプレート編集モードに戻るには、[オブジェクトとタイムライン] でテンプレートを編集する要素を右クリックし、[コントロール パーツ (テンプレート) の編集] をクリックし、[テンプレートの編集] をクリックします。

  4. [組み合わせ] パネルの [トリガ] で IsSelected = True をクリックします。既定では、枠の背景色は、[トリガ] の [アクティブな際のプロパティ] に表示されるとおり、アイテムの選択時に変更されます。背景色を変更するには、[オブジェクトとタイムライン] で [Border] をクリックし、[プロパティ] パネルの [ブラシ] で Background プロパティを変更します。

    Cc295254.alert_tip(ja-jp,Expression.10).gifヒント :

    [組み合わせ] パネルの [トリガ] で、あるプロパティ トリガが選択されている場合、Expression Blend で編集を行うと、変更される値が、そのトリガの条件に設定されます。変更を行う前に、適切なトリガが選択されていることを確認してください。コントロール テンプレートの既定の状態に影響を与える変更を行う場合は、[トリガ] で [既定] をクリックします。

  5. 変更を加えたテンプレートを使用するアイテムをリスト ボックスに追加するには、[上へスコープ] ボタン Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.10).png をクリックしてドキュメントの編集スコープに戻り、リスト ボックス要素をダブルクリックしてアクティブにしてから、[アセット ライブラリ] の [ローカル スタイル] タブからカスタム スタイルを追加します。

  6. アプリケーションを実行して (F5)、効果を確認してください。

ItemContainerStyle テンプレートを使用して選択アイテムの外観を変更するには

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

    Cc295254.alert_tip(ja-jp,Expression.10).gifヒント :

    簡易スタイル コントロールは、アセット ライブラリ Cc295254.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png の [コントロール] タブにある [簡易スタイル] カテゴリーで使用できます。一覧から簡易スタイル コントロールを選択したら、アートボード上で描画できます。

  2. [オブジェクトとタイムライン] でリスト ボックスをダブルクリックして選択した後、[四角形] Cc295254.ae750268-92e8-403a-9e07-b662da4e9e1e(ja-jp,Expression.10).png またはその他のコントロールをアートボードのリスト ボックス内に描画して、リスト ボックスにアイテムをいくつか追加します。あるいは、リスト ボックス要素を右クリックして、[SimpleListBoxItem の追加] をクリックしてもかまいません。

    Cc295254.alert_tip(ja-jp,Expression.10).gifヒント :

    データ バインドを使用してリスト ボックスにアイテムを自動的に生成してみる場合は、このユーザー ガイドの「試してみよう : RSS ニュース リーダーの作成」の手順を使用できます。

  3. [オブジェクトとタイムライン] で [ListBox] オブジェクトをクリックします。[オブジェクト] メニューの [他のスタイルの編集] をポイントし、[ItemContainerStyle の編集] をポイントして [コピーの編集] をクリックします。

    [スタイル リソースの作成] ウィンドウが表示されます。[スタイル リソースの作成] ウィンドウのオプションの詳細については、「リソースの作成」を参照してください。この手順では、既定値のままにして [OK] をクリックします。

    Expression Blend は、ListBoxItem のスタイルの編集モードに移行します。

  4. テンプレートは、Style 要素に含まれています。このため、ListBoxItem のテンプレートを編集するには、[オブジェクトとタイムライン] で [Style] 要素を右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[テンプレートの編集] をクリックします。

    Cc295254.alert_note(ja-jp,Expression.10).gifメモ :

    コントロール テンプレートは Style 要素に含まれ、手順 3 では [コピーの編集] をクリックしてスタイルのコピーを作成したので、ここでは [コピーの編集] ではなく [テンプレートの編集] をクリックします。

    Expression Blend は、ListBoxItemStyleTemplate の編集スコープに入ります。これは、リスト ボックスがすべてのアイテムに対して使用するテンプレートです。このテンプレートには、Bd という名前の Border 要素、ContentPresenter 要素、および IsSelected 状態用の 2 つのトリガが含まれています。

  5. [組み合わせ] パネルの [トリガ] で、いずれかの [IsSelected] トリガをクリックし、そのトリガの記録モードを開始します。次に、[Bd] 要素のプロパティを変更します。

  6. アプリケーションを実行して (F5)、効果を確認してください。

関連項目

概念

SimpleListBox および SimpleListBoxItem