メニュー コントロールの概要
更新 : 2007 年 11 月
ASP.NET Menu コントロールによって、ASP.NET Web ページに静的および動的に表示するメニューを作成できます。
このトピックの内容は次のとおりです。
背景
コード例
クラス リファレンス
背景
Menu コントロールには、静的と動的の 2 つの表示モードがあります。静的表示とは、Menu コントロールが常に完全に展開されることを意味します。全体の構造が表示され、ユーザーはすべての部分をクリックできます。動的に表示されるメニューでは、指定した部分のみが静的に表示され、子メニュー項目はユーザーが親ノードの上にマウス ポインタを置いた場合のみ表示されます。
Menu コントロールのコンテンツはコントロールで直接構成できますが、コントロールをデータ ソースにバインドしてコンテンツを指定することもできます。コードを記述せずに、ASP.NET Menu コントロールの外観、方向、およびコンテンツを制御できます。コントロールは、コントロールが公開するビジュアル プロパティに加えて、ASP.NET コントロール スキンとテーマもサポートします。スキンとテーマの詳細については、「ASP.NET のテーマとスキンの概要」を参照してください。
静的表示の動作
静的表示の動作は、Menu コントロールの StaticDisplayLevels プロパティを使用して制御できます。StaticDisplayLevels プロパティは、メニューのルートからどのレベルまで静的に表示するかを示します。たとえば、StaticDisplayLevels を 3 に設定すると、メニューは最初の 3 レベルまで静的に展開されて表示されます。静的な表示の最小レベルは 1 です。この値を 0 または負数に設定すると、コントロールが例外をスローします。
動的表示の動作
MaximumDynamicDisplayLevels プロパティは、静的表示レベルの後に表示される動的表示のメニュー ノードのレベル数を指定します。たとえば、メニューの静的レベルが 3 で、動的レベルが 2 の場合、メニューの最初の 3 レベルが静的に表示され、次の 2 レベルが動的に表示されます。
MaximumDynamicDisplayLevels を 0 に設定すると、動的に表示されるメニュー ノードはなくなります。MaximumDynamicDisplayLevels を負数に設定すると、例外がスローされます。
メニュー コンテンツの定義
Menu コントロールのコンテンツは、2 つの方法で定義できます。宣言またはプログラムによって MenuItem オブジェクトを個別に追加するか、またはコントロールを XML データ ソースにデータ バインディングします。
手動でのメニュー項目の追加
個々のメニュー項目をコントロールに追加するには、Items プロパティにそれらを指定します。Items プロパティは MenuItem オブジェクトのコレクションです。3 つの項目のそれぞれに 2 つの子項目がある Menu コントロールの宣言的マークアップの例を次に示します。
<asp:Menu ID="Menu1" runat="server" StaticDisplayLevels="3">
<Items>
<asp:MenuItem Text="File" Value="File">
<asp:MenuItem Text="New" Value="New"></asp:MenuItem>
<asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Edit" Value="Edit">
<asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
<asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="View" Value="View">
<asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
<asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
XML データ ソースへのデータ バインディング
XML ファイルにバインドすると、デザイナを使用するのではなくファイルを編集することによって、メニューのコンテンツを制御できます。これによって、Menu コントロールを再参照したりコードを編集したりせずに、サイトのナビゲーション部分を更新できます。コンテンツが変化するサイトでは、コンテンツの編成に XML ファイルを使用し、Menu コントロールに渡して Web サイトのユーザーがアクセスできるようにします。
外観と動作
Menu コントロールの動作は、プロパティを使用して調整できます。さらに、メニュー ノードが表示されてから非表示になるまでの時間を含む動的表示の動作も制御できます。たとえば、Menu の方向を水平から垂直に変更するには、Orientation プロパティを次のように設定します。
[Visual Basic]
Menu.Orientation = Orientation.Vertical
[C#]
Menu.Orientation = Orientation.Vertical;
このプロパティを Orientation.Horizontal に設定すると、メニューの方向が水平に戻ります。
Menu コントロールの個々のプロパティを設定すると、サイズ、カラー、フォント、およびその他の外観の特性を指定できます。さらに、Menu コントロールにはスキンとテーマを適用できます。
スタイル
各メニュー レベルは、スタイルのプロパティをサポートします。動的スタイルのプロパティが設定されていない場合は、静的スタイルのプロパティが使用されます。動的スタイルのプロパティが設定され、静的スタイルのプロパティが設定されていない場合は、静的スタイルのプロパティの既定のレンダリングが使用されます。Menu コントロールのスタイルの階層は次のとおりです。
Control
SubMenuStyles
MenuItemStyles
SelectedItemStyles
HoverMenuItemStyles
スタイルは動的メニューおよび静的メニューに次のロジックを使用してマージされます。
個々のスタイルは、適切なアクション型または項目型に適用されます。
すべてのスタイルは階層の先行するスタイルにマージされ、最後のスタイルによってオーバーライドされます。
.gif "メモ")
メモ :静的なメニューはマージされません。静的なスタイルが定義されていない場合は、動的なスタイルが適用されます。
動的な外観のタイミング
動的なメニューのでは、メニューの動的に表示されている部分を非表示にするまでの時間を指定できます。この値は、次のように DisappearAfter プロパティを調整してミリ秒単位で構成できます。
[Visual Basic]
Menu.DisappearAfter = 1000
[C#]
Menu.DisappearAfter = 1000;
既定値は、500 ミリ秒です。DisappearAfter の値を 0 に設定すると、Menu コントロールの外部でメニューが停止され、即座に非表示になります。この値を -1 に設定すると停止時間が無限になり、Menu コントロールの外部をクリックしたときのみ動的な部分が非表示になります。
メニュー コントロールと UpdatePanel コントロールの使用
UpdatePanel コントロールは、ポストバックを使用してページ全体を更新する代わりに、ページの選択された領域を更新するために使用します。カスケード スタイル シート (CSS: Cascading Style Sheet) クラスへの参照を使用してスタイルを適用する必要があるという制限付きで、UpdatePanel コントロール内で Menu コントロールを使用できます。たとえば、property-subproperty 属性を使用して DynamicHoverStyle プロパティを設定する代わりに、property-CssClass 属性を使用してスタイルを設定します。同様に、DynamicHoverStyle テンプレートを使用してスタイルを設定する場合、テンプレートの CssClass 属性を使用します。
UpdatePanel コントロールの使用方法の詳細については、「UpdatePanel コントロールの概要」および「部分ページ レンダリングの概要」を参照してください。
コード例
チュートリアル : プログラムによる ASP.NET メニューの制御
ページのトップへ
クラス リファレンス
Menu コントロールに関連するクラスの一覧を次の表に示します。
メンバ |
説明 |
|---|---|
コントロールのメイン クラスです。 |
|
Menu コントロールの MenuItemClick イベントと MenuItemDataBound イベントのデータを提供します。 |
|
Menu コントロールの MenuItemClick イベントまたは MenuItemDataBound イベントを処理するメソッドを表します。 |
|
Menu コントロールに表示されるメニュー項目を表します。 |
|
データ項目と、それが Menu コントロール内でバインドしているメニュー項目との関係を定義します。 |
|
MenuItemBinding オブジェクトのコレクションを表します。 |
|
Menu コントロール内のメニュー項目のコレクションを表します。 |
|
Menu コントロール内のメニュー項目のスタイルを表します。 |
|
Menu コントロール内の MenuItemStyle オブジェクトのコレクションを表します。 |
ページのトップへ