SimpleExpander-Steuerelementvorlage

Das Expander-Steuerelement ist ein Inhaltssteuerelement mit Header, das eine Kopfzeile mit einem reduzierbaren Fenster anzeigt, das Inhalt enthält. Sie können ein Expander-Steuerelement in Microsoft Expression Blend benennen, indem Sie die Header-Eigenschaft (Kopfzeile) ändern. Sie können Inhalte in einem Expander-Steuerelement platzieren, indem Sie auf das Expander-Steuerelement doppelklicken und dann ein Element darin zeichnen. Wenn Sie mehrere Elemente innerhalb des Expander-Steuerelements platzieren möchten, sollten Sie zuerst ein LayoutPanel-Element einfügen, wie z. B. ein Raster- oder Canvaspanel. Ein Expander-Steuerelement kann auch standardmäßig Text anzeigen. Klicken Sie mit der rechten Maustaste auf das Expander-Steuerelement, und klicken Sie dann auf Text bearbeiten, um den Text zu bearbeiten. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das Expander-Steuerelement, und klicken Sie dann auf Expander erweitern, um das Expander-Steuerelement auf der Zeichenfläche in erweitertem Zustand anzuzeigen.

Zeichenflächenansicht eines SimpleExpander-Steuerelements.

Aufgliederung der Steuerelementvorlage

Die SimpleExpander-Steuerelementvorlage umfasst folgende Elemente:

• Ein Rasterpanel, bei dem es sich um ein LayoutPanel-Element handelt, welches benötigt wird, um mehrere untergeordnete Elemente in das Expander-Steuerelement aufzunehmen. Darüber hinaus erleichtert die Verwendung des Rasterpanels einem Designer einer Benutzeroberfläche (UI) das Hinzufügen von mehreren Elementen zur Vorlage. Das Grid-Element besteht aus 2 Bereichen: dem Border-Bereich, der die Kopfzeile darstellt, und dem ExpandSite-Bereich, der für den Inhalt steht.

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

• Ein ToggleButton-Element, das im Border-Element enthalten ist und das Expander-Steuerelement erweitert und reduziert.

• Ein ContentPresenter-Element, das sich innerhalb des Border-Elements befindet und das automatisch an die Header-Eigenschaft des Expander-Steuerelements gebunden ist, auf das diese Vorlage angewendet wird.

• Ein ContentPresenter-Element unter dem ExpandSite-Bereich, das zum Anzeigen der Content-Eigenschaft des Expander-Elements verwendet wird, auf das diese Vorlage angewendet wird. Beide ContentPresenter-Elemente müssen vorhanden sein, damit das Expander-Element wie erwartet funktionsfähig ist.

  Objektansicht: Die grundlegenden Teile (Vorlage) eines SimpleExpander-Steuerelements

  

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 in der SimpleExpander-Vorlage beispielsweise die IsExpanded-Eigenschaft den Wert True aufweist, wird der ExpandSite-Bereich sichtbar.

Nach oben

Verwendete Pinsel

Die folgenden Pinselressourcen im Ressourcenverzeichnis SimpleStyles.xaml werden von der SimpleExpander-Vorlage verwendet:

• Die Background-Eigenschaft wird mit der LightBrush-Ressource festgelegt, wenn kein Auslöser aktiv ist, und mit der DisabledBackgroundBrush-Ressource, wenn die IsEnabled-Eigenschaft den Wert False aufweist.

• Die BorderBrush-Eigenschaft wird mit der NormalBorderBrush-Ressource festgelegt, wenn kein Auslöser aktiv ist, und mit der DisabledBorderBrush-Ressource, wenn die IsEnabled-Eigenschaft den Wert False aufweist.

• Die Background-Eigenschaft des Border-Elements wird mithilfe der NormalBrush-Ressource festgelegt, wenn kein Auslöser aktiv ist.

• Die Background-Eigenschaft des ExpandSite-Elements wird mithilfe der WindowBackgroundBrush-Ressource festgelegt, wenn kein Auslöser aktiv ist.

• Die BorderBrush-Eigenschaft des ExpandSite-Elements wird mithilfe der SolidBorderBrush-Ressource festgelegt, wenn kein Auslöser aktiv ist.

• Die Foreground-Eigenschaft wird mit der DisabledForegroundBrush-Ressource festgelegt, wenn für die IsEnabled-Eigenschaft der Wert False gilt.

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.

• Da das Expander-Steuerelement über 2 ContentPresenter-Elemente verfügt (eines für die Kopfzeile und eines für den Inhalt), muss das ContentPresenter-Element in der Kopfzeile explizit auf die Klasse des Steuerelements festgelegt werden. Legen Sie hierzu die ContentSource-Eigenschaft des ContentPresenter-Elements (im Border-Knoten der Vorlage) auf Header fest.

• Das ToggleButton-Element verwendet eine separate Vorlage mit der Bezeichnung ExpanderToggleButton. Klicken Sie mit der rechten Maustaste auf das ToggleButton-Element, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten oder Kopie bearbeiten, um dies zu ändern. Das ToggleButton-Element ist mit dem Rest des Expander-Steuerelements durch eine Bindung der IsChecked-Eigenschaft an das ToggleButton-Element und der IsExpanded-Eigenschaft an das Expander-Steuerelement verbunden. Damit diese Eigenschaft ordnungsgemäß aktualisiert wird, sollten Sie diese Bindung beibehalten. Mit dieser zweifachen Bindung können Sie dann das Expander-Steuerelement programmgesteuert erweitern.

• Standardmäßig ist der ExpandSite-Bereich reduziert und wird durch einen Auslöser sichtbar gemacht. Da der Auslöser auf das ExpandSite-Element über den Namen verweist, sollten Sie auch den IsExpanded-Auslöser aktualisieren, wenn Sie das ExpandSite-Element ändern oder ersetzen.

Nach oben