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

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

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

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

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

    tip noteヒント :

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

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

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

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

    tip noteヒント :

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

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

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

    tip noteヒント :

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

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

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

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

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

    tip noteヒント :

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

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

    tip noteヒント :

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

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

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

    Expression Blend が ListBoxItem のスタイルの編集スコープになります。

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

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

    Noteメモ :

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

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

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

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

関連項目

概念

SimpleListBox および SimpleListBoxItem

Copyright ©2011 by Microsoft Corporation. All rights reserved.

  • Last updated on