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

This page applies to WPF projects only

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

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

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

    Cc295254.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

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

    コピーの作成の詳細については、「リソースの作成」を参照してください。

    Cc295254.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

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

    Cc295254.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

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

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

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

    Cc295254.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

    Cc295254.alert_tip(JA-JP,Expression.30).gifヒント :

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

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

    [スタイル リソースの作成] ウィンドウが表示されます。この手順では、既定値のままにして [OK] をクリックします。

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

    [スタイル リソースの作成] ウィンドウのオプションの詳細については、「リソースの作成」を参照してください。

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

    Cc295254.alert_note(JA-JP,Expression.30).gifメモ :

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

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

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

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

関連項目

概念

SimpleListBox および SimpleListBoxItem

  • Last updated on