SimpleMenu-Steuerelementvorlage und SimpleMenuItem-Steuerelementvorlage

Beim Menü handelt es sich um ein ItemsControl-Element, das Elemente, die mit Befehlen und Ereignishandlern verknüpft sind, hierarchisch organisiert. Sie können einem Menü von Microsoft Expression Blend Inhalte hinzufügen, indem Sie auf das Menü doppelklicken und dann ein Element (z. B. ein Rechteck) darin zeichnen. Sie können auch mit der rechten Maustaste unter Objekte und Zeitachsen auf das Menü klicken und dann auf SimpleMenuItem hinzufügen klicken, um der Auflistung einzelne Elemente hinzuzufügen. Wenn die Auflistung von MenuItem-Elementen aus einer Datenquelle erzeugt werden soll, klicken Sie auf ItemsSource an Daten binden. Klicken Sie unter Objekte und Zeitachsen mit der rechten Maustaste auf ein Menüelement, und klicken Sie dann auf SimpleMenuItem hinzufügen, um ein Menüelement der zweiten Ebene hinzuzufügen. Sie können auch ein benutzerdefiniertes Menüelement über die Registerkarte Lokal definierter Stil der Objektbibliothek hinzufügen.

Sie können den Text des Menüelements bearbeiten, indem Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das Menüelement klicken und dann auf Text bearbeiten klicken. Sie können das Menüelement auch durch Doppelklicken aktivieren und dann ein Steuerelement darin zeichnen. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das übergeordnete Menüelement, und klicken Sie dann auf MenuItem erweitern, um die untergeordneten Menüelemente eines Menüelements auf der Zeichenfläche im erweiterten Zustand anzuzeigen.

Die Zeichenflächenansicht eines SimpleMenu-Steuerelements nach dem Hinzufügen von zwei Elementen und einer Trennlinie

Aufgliederung der Steuerelementvorlage

Die SimpleMenu-Steuerelementvorlage umfasst die folgenden Elemente:

• Ein Rasterpanel, das verwendet wird, um die verschiedenen untergeordneten Elemente innerhalb des Menüs aufzunehmen. Darüber hinaus erleichtert die Verwendung des Rasterpanels einem Designer einer Benutzeroberfläche (UI) das Hinzufügen von mehreren Elementen zur Vorlage.

• Ein Border-Element, das verwendet wird, da es eine BorderThickness-Eigenschaft aufweist, die über eine Vorlage an die BorderThickness-Eigenschaft des Menu-Steuerelements gebunden werden kann, auf das diese Vorlage angewendet wird.

• Ein StackPanel-Element, das im Grid-Element enthalten ist und zum Anordnen der Menüelemente verwendet wird. Standardmäßig ist die Orientation-Eigenschaft des StackPanel-Elements auf Horizontal festgelegt.

Die SimpleMenuItem-Steuerelementvorlage umfasst die folgenden Elemente:

• Ein Rasterpanel, das verwendet wird, um die verschiedenen untergeordneten Elemente innerhalb des Menüelements aufzunehmen. Darüber hinaus erleichtert die Verwendung des Rasterpanels einem Designer das Hinzufügen von mehreren Elementen zur Vorlage. Dieses Rasterpanel verwendet das Konzept der gleichmäßigen Größenverteilung. Auf diese Weise weist jedes Menüelement dieselbe Breite wie alle anderen Menüelemente im Menü auf.

• Ein ContentPresenter-Element mit dem Namen "Icon", das an die Icon-Eigenschaft des Menüelements gebunden ist, auf das diese Vorlage angewendet wird.

• Ein Rasterpanel mit dem Namen "GlyphPanel", das verwendet wird, um ein Häkchen anzuzeigen, falls es sich beim Menüelement um ein aktivierbares Element handelt. Standardmäßig ist das Glyph-Element reduziert, kann jedoch mit dem IsChecked-Auslöser sichtbar gemacht werden.

• Ein ContentPresenter-Element mit dem Namen "HeaderHost", das an die Header-Eigenschaft des Menüelements gebunden wird, auf das diese Vorlage angewendet wird. Die Bindung wird in der ContentSource-Eigenschaft des HeaderHost-Elements festgelegt.

• Ein Rasterpanel mit dem Namen "ArrowPanel", das verwendet wird, um eine Methode zum Erweitern des Menüelements bereitzustellen. Standardmäßig ist das ArrowPanel-Element reduziert, wird aber durch den Role = SubmenuHeader-Auslöser sichtbar gemacht, der das Menüelement als Untermenü-Kopfzeile identifiziert (ein Menüelement der zweiten oder niedrigeren Ebene, das über untergeordnete Menüelemente verfügt).

• Ein Popup-Element mit dem Namen "SubMenuPopup", das verwendet wird, um alle vorhandenen untergeordneten Menüelemente aufzunehmen. Diese werden in einem StackPanel-Element platziert, das als ItemsHost-Element markiert wird, sodass dieses Menüelement seine untergeordneten Menüelemente an der richtigen Stelle platzieren kann. Wenn Sie eine andere Anordnung der Menüelemente bevorzugen, können Sie ein anderes LayoutPanel-Element verwenden, wie z. B. das WrapPanel-Element. Klicken Sie hierzu mit der rechten Maustaste unter Objekte und Zeitachsen auf das StackPanel-Element, zeigen Sie auf Layouttyp ändern, und wählen Sie dann ein Panel aus.

  Objektansicht: Die grundlegenden Teile (Vorlage) des SimpleMenu-Steuerelements (links) und des SimpleMenuItem-Steuerelements (rechts)

  

Nach oben

Verwendete Eigenschaftsauslöser

Eigenschaftsauslöser in der Steuerelementvorlage werden verwendet, damit das Steuerelement auf Änderungen der Eigenschaften reagieren kann. Sie können im Interaktionspanel unter Auslöser auf die Elemente klicken, um die Eigenschaften anzuzeigen, die bei einem aktiven Auslöser geändert werden. Wenn beispielsweise in der Vorlage für das Menüelement die IsChecked-Eigenschaft den Wert True aufweist, bedeutet dies, dass das Menüelement aktivierbar ist, auf welches die Vorlage angewendet wird. Daher wird das GlyphPanel-Element durch den Auslöser sichtbar gemacht.

Nach oben

Verwendete Pinsel

Die folgenden Pinselressourcen im Ressourcenverzeichnis SimpleStyles.xaml werden von den Vorlagen SimpleMenu und SimpleMenuItem verwendet:

• Die Background-Eigenschaft des Menüs wird mit der LightBrush-Ressource festgelegt bzw. mit der DisabledBackgroundBrush-Ressource, wenn die IsEnabled-Eigenschaft den Wert False aufweist.

• Die BorderBrush-Eigenschaft des Menüs wird mit der NormalBorderBrush-Ressource festgelegt bzw. mit der DisabledBackgroundBrush-Ressource, wenn die IsEnabled-Eigenschaft den Wert False aufweist.

• Die Background-Eigenschaft des SubMenuBorder-Elements wird mit der WindowBackgroundBrush-Ressource festgelegt.

• Die BorderBrush-Eigenschaft des SubMenuBorder-Elements wird mit der SolidBorderBrush-Ressource festgelegt.

Zusätzlich können die Vorlagen Bindungen an Systemfarben verwenden, mit denen die Steuerelemente die Systemstandardwerte verwenden können. In vielen Fällen empfiehlt sollten Sie diese Pinsel ändern, damit Sie ein charakteristisches Design erstellen können. Sie können hierzu die Auslöser bearbeiten, mit denen die Systemfarben festgelegt werden.

Nach oben

Bewährte Methoden und Designrichtlinien

• Verwenden Sie ein Grid-Steuerelement als Stamm Ihrer Vorlage, wenn Sie davon ausgehen, dass ein Designer Ihrem Steuerelement weitere visuelle Elemente hinzufügt. Expression Blend sucht nach einem LayoutPanel-Element wie dem Grid-Steuerelement und legt es standardmäßig als aktives Element fest. Beim Hinzufügen neuer Elemente zur Zeichenfläche werden diese als untergeordnete Elemente in das LayoutPanel-Element eingefügt.

• Das Popup-Steuerelement wird im Vordergrund vor allen anderen Steuerelementen gerendert. Dies ist für Menüs normalerweise wünschenswert. Das Popup-Steuerelement verfügt selbst über eine Logik, mit welcher der Versatz zum übergeordneten Steuerelement festgelegt werden kann. Beispielsweise ist es möglich, die Placement-Eigenschaft auf Right festzulegen. Im Falle eines Menüs wird die Erweiterung des Menüs durch die Bindung an das übergeordnete Steuerelement gesteuert. Damit das Menü ordnungsgemäß erweitert werden kann, sollten Sie die Bindung beibehalten.

• Das Stammrasterpanel für die Menüelementvorlage verwendet das Konzept der gleichmäßigen Größenverteilung. Auf diese Weise weist jedes Menüelement dieselbe Breite wie alle anderen Menüelemente im Menü auf. Wenn Sie dieses Verhalten ändern möchten, ändern Sie die SharedSizeGroup-Eigenschaft (Gruppe gleichmäßiger Größenverteilung) in der XAML-Ansicht, da diese Eigenschaft in Expression Blend nicht im Eigenschaftenpanel angezeigt wird. In den meisten Fällen müssen Sie die SharedSizeGroup-Eigenschaft nicht ändern, da sie die richtige Größenänderung des Menüs ermöglicht. Sie sollten das Aussehen des Menüelements ändern, indem Sie Elemente im Stammrasterpanel der Menüelementvorlage zeichnen, anstatt die Spalten und den zugehörigen Inhalt neu anzuordnen.

• Einige der Auslöser für Menüelementvorlagen verwenden eine Eigenschaft mit der Bezeichnung Role. Die Role-Eigenschaft wird in Abhängigkeit von der Ebene des Menüelements in der Menühierarchie festgelegt. Wenn Sie die Menüelementvorlage ändern, sollten Sie die Auslöser auf Grundlage der Role-Eigenschaft beibehalten. Die Vorlage, die vom tatsächlichen MenuItem-Steuerelement des Systems verwendet wird, ist wesentlich komplexer als die SimpleMenuItem-Steuerelementvorlage. Die MenuItem-Steuerelementvorlage verwendet einen Stil, um zwischen verschiedenen Steuerelementvorlagen umzuschalten. Hierbei wird die Rolle des Menüelements herangezogen. Die SimpleMenuItem-Steuerelementvorlage verwendet hierzu eine einzelne Vorlage und kann daher einfacher bearbeitet werden.

• Klicken Sie im Ressourcenpanel neben dem SimpleMenuItem-Stil auf die Schaltfläche Ressource bearbeiten, um die SimpleMenuItem-Vorlage zu ändern. Wenn Sie sich im Bearbeitungsmodus des Stils befinden, klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf Style, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten oder auf Kopie bearbeiten.

• Weitere Informationen zum Einbinden eines Menüelements in einen Befehl finden Sie unter Menü (Übersicht) auf MSDN.

Nach oben