SimpleMenu および SimpleMenuItem

メニューは、コマンドおよびイベント ハンドラに関連付けられている要素を階層的に編成するアイテム コントロールです。Microsoft Expression Blend でメニューに内容を配置するには、メニューをダブルクリックして要素 (四角形など) を描画します。別の方法として、[オブジェクトとタイムライン] でメニューを右クリックし、[SimpleMenuItem の追加] をクリックしてコレクションに個々のアイテムを追加するか、[ItemsSource のデータへのバインド] をクリックしてデータ ソースから MenuItem 要素のコレクションを生成することもできます。第 2 レベルのメニュー アイテムを追加するには、[オブジェクトとタイムライン] でメニュー アイテムを右クリックし、[SimpleMenuItem の追加] をクリックするか、[アセット ライブラリ] の [ローカル スタイル] タブからカスタム メニュー アイテムを追加します。

メニュー アイテムのテキストを編集するには、[オブジェクトとタイムライン] でメニュー アイテムを右クリックし、[テキストの編集] をクリックします。または、メニュー アイテムをダブルクリックしてアクティブにしてから、コントロールを描画します。展開したメニュー アイテムの子アイテムをアートボードに表示するには、[オブジェクトとタイムライン] で親メニュー アイテムを右クリックし、[MenuItem の拡張] をクリックします。

2 つのアイテムと 1 つの区切りが追加された後の SimpleMenu のアートボード ビュー

コントロール テンプレートの構成要素

SimpleMenu コントロール テンプレートには、次のアイテムが含まれます。

• グリッド パネル : メニュー内に複数の子要素を保持するために使用します。また、グリッドを使用すると、アプリケーション ユーザー インターフェイス (UI) デザイナは複数の要素を簡単にテンプレートに追加できます。

• Border 要素 : BorderThickness プロパティが含まれています。このプロパティは、このテンプレートの適用先メニュー コントロールの BorderThickness プロパティにテンプレート バインドできます。

• StackPanel : Grid 要素内に含まれ、メニュー アイテムをレイアウトするために使用します。既定では、StackPanel の Orientation プロパティが "水平方向" に設定されています。

SimpleMenuItem コントロール テンプレートには、次のアイテムが含まれます。

• グリッド パネル : メニュー アイテム内に複数の子要素を保持するために使用します。また、グリッドを使用すると、デザイナは複数の要素を簡単にテンプレートに追加できます。グリッド パネルではサイズ共有の概念が導入され、各メニュー アイテムの幅をメニュー内の他のメニュー アイテムと同じにすることができます。

• Icon という名前の ContentPresenter 要素 : このテンプレートが適用されるメニュー アイテムの Icon プロパティにバインドされます。

• GlyphPanel という名前のグリッド パネル : メニュー アイテムを選択できる場合にチェック マークを表示するために使用します。Glyph 要素は既定では折りたたまれ、IsChecked トリガによって表示されます。

• HeaderHost という名前の ContentPresenter 要素 : このテンプレートが適用されるメニュー アイテムの Header プロパティにバインドされます。このバインドは、HeaderHost 要素の ContentSource プロパティに設定されます。

• ArrowPanel という名前の グリッド パネル : メニュー アイテムの展開方法を指定するために使用します。ArrowPanel は既定では折りたたまれ、Role=SubmenuHeader トリガによって表示されます。これは、メニュー アイテムをサブメニュー ヘッダー (子メニュー アイテムがある第 2 レベルまたは下位レベルのメニュー アイテム) として識別するトリガです。

• SubMenuPopup という名前の Popup 要素 : 既存の子メニュー アイテムを保持するために使用します。子メニュー アイテムは、このメニュー アイテムがそれらの配置場所を識別できるように、Items Host としてマークされた StackPanel 要素に配置されます。メニュー アイテムの配置を変更する場合は、[オブジェクトとタイムライン] で StackPanel 要素を右クリックし、[レイアウトの種類の変更] をポイントしてパネルを選択すると、WrapPanel などの別のレイアウト パネルを使用できます。

  オブジェクト ビュー : SimpleMenu コントロール (左) および SimpleMenuItem コントロール (右) の基本パーツ (テンプレート)

  

先頭に戻る

使用されるプロパティ トリガ

コントロール テンプレートのプロパティ トリガは、プロパティの変更にコントロールを対応させるために使用されます。[組み合わせ] パネルの [トリガ] のアイテムをクリックすると、トリガがアクティブなときに変更されるプロパティを表示できます。たとえば、メニュー アイテム用のテンプレートでは、IsChecked プロパティが True (テンプレートが適用されるメニュー アイテムをチェックできる状態) のとき、トリガによって GlyphPanel 要素が表示されます。

先頭に戻る

使用されるブラシ

SimpleMenu および SimpleMenuItem テンプレートでは、SimpleStyles.xaml リソース ディクショナリの次に示すブラシ リソースが使用されます。

• メニューの Background プロパティは、LightBrush を使用して設定されます。IsEnabled が False の場合は、DisabledBackgroundBrush を使用して設定されます。

• メニューの BorderBrush プロパティは、NormalBorderBrush を使用して設定されます。IsEnabled が False の場合は、DisabledBorderBrush を使用して設定されます。

• SubMenuBorder 要素の Background プロパティは、WindowBackgroundBrush を使用して設定されます。

• SubMenuBorder 要素の BorderBrush プロパティは、SolidBorderBrush を使用して設定されます。

さらに、テンプレートでは、システム カラーへのバインドも使用され、コントロールでシステムの既定値を使用できます。多くの場合、これらのブラシを変更して、独自のデザインを作成できます。これを行うには、システム カラーを設定するトリガを編集します。

先頭に戻る

ベスト プラクティスおよびデザイン ガイドライン

• 一般に、コントロールに視覚要素を追加する予定がある場合は、テンプレートのルートとして Grid コントロールを使用してください。Expression Blend は、既定では Grid コントロールなどのレイアウト パネルを検索してアクティブにします。これにより、アートボードに追加される新しい要素がレイアウト パネルの子要素になります。

• Popup コントロールは、他のすべてのコントロールの前面に表示されます。これは通常、メニューに適したものです。Popup コントロール自体に、Placement プロパティを "右" に設定するなど、親コントロールからのオフセットを設定できるロジックが含まれています。メニューの場合、メニューの展開は親コントロールへのバインドによって制御されます。メニューが適切に展開されるようにするには、バインドを保持する必要があります。

• メニュー アイテム テンプレートのルートの Grid パネルでは、サイズ共有の概念が採用され、各メニュー アイテムの幅をメニュー内の他のメニュー アイテムと同じにすることができます。この動作を変更する場合、Expression Blend では [プロパティ] パネルに SharedSizeGroup プロパティが表示されないため、このプロパティを [XAML] ビューで変更する必要があります。SharedSizeGroup によってメニューが適切にサイズ変更されるため、多くの場合、これを変更する必要はありません。通常、メニュー アイテムの外観を変更するには、列またはその内容の配置を変更するのではなく、メニュー アイテム テンプレートのルートのグリッド パネルに要素を描画します。

• メニュー アイテム テンプレートのトリガの一部では、Role というプロパティが使用されます。Role は、メニュー階層構造内のメニュー アイテムのレベルに応じて設定されます。メニュー アイテム テンプレートを変更する場合、Role ベースのトリガを保持することができます。実際のシステム MenuItem コントロールで使用されるテンプレートは、SimpleMenuItem よりはるかに複雑です。MenuItem コントロール テンプレートでは、スタイルを使用して、メニュー アイテムの Role に基づく別のコントロール テンプレートへの切り替えが行われます。SimpleMenuItem では単一のテンプレートが使用されるので、簡単に編集することができます。

• SimpleMenuItem テンプレートを編集するには、[リソース] パネルにある [SimpleMenuItem] スタイルの横の [リソースの編集] ボタンをクリックします。次に、スタイルの編集モードで、[オブジェクトとタイムライン] の [スタイル] を右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして [テンプレートの編集] または [コピーの編集] をクリックします。

• コマンドにメニュー アイテムをフックする方法の詳細については、MSDN の「メニューの概要」を参照してください。

先頭に戻る