試してみよう : ビットマップ効果を使用した SimpleTabItem のカスタマイズ

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

SimpleTabItem テンプレートを使用すると、タブ コントロールの外観を簡単にカスタマイズできます。

SimpleTabItem にビットマップ効果を追加するには

  1. アートボード上に SimpleTabControl を描画します。既定では、SimpleTabControl には 2 つの SimpleTabItems テンプレートがあります。

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

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

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

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

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

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

  3. コントロール テンプレートの編集スコープで、[オブジェクトとタイムライン] の Border 要素を選択し、[プロパティ] パネルの [外観] カテゴリの詳細セクション Cc294648.81e110f1-4068-4299-957d-0693cea95088(ja-jp,Expression.10).png で、BitmapEffect プロパティの横のドロップダウン矢印をクリックして、[ベベル] をクリックします。既定では、BevelWidth プロパティは 5 です。

  4. [トリガ] パネルで、IsPressed 状態を選択して、トリガの記録をオンにします。[プロパティ] パネルで、もう一度 BitmapEffect プロパティの横のドロップダウン矢印をクリックし、[ベベル] をクリックして、BevelWidth プロパティを 25 に変更します。

    [トリガ] の [アクティブな際のプロパティ] の下に新しい行が表示され、マウスの移動でタブ アイテムがクリックされたときに発生するプロパティの変化が反映されます。

  5. ドキュメントの編集スコープに戻るには、[上へスコープ] Cc294648.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ja-jp,Expression.10).png ボタンをクリックします。

  6. カスタム テンプレートをタブ コントロールの他のタブ アイテムに適用するには、[オブジェクトとタイムライン] で他のタブ アイテムを右クリックし、[コントロール パーツ (テンプレート) の編集]、[リソースの適用] の順にポイントし、カスタム テンプレートの名前をクリックします。

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

関連項目

概念

SimpleTabControl および SimpleTabItem