SimpleTabControl-Steuerelementvorlage und SimpleTabItem-Steuerelementvorlage

Beim Registersteuerelement handelt es sich um ein ItemsControl-Element, das Inhalte in Registerkarten anzeigt. Typischerweise handelt es sich bei den untergeordneten Elementen eines Registersteuerelements um Registerelemente, die ContentControl-Elemente mit Kopfzeile sind, von denen jedes ein Kopfzeilenelement und ein Inhaltselement enthalten kann. Sie können Elemente in einem Registersteuerelement in Microsoft Expression Blend platzieren, indem Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das Registersteuerelement klicken und dann auf SimpleTabItem hinzufügen klicken, um einzelne Elemente zur Auflistung hinzuzufügen. Wenn eine Auflistung von Registerelementen aus einer Datenquelle erzeugt werden soll, können Sie auf ItemsSource an Daten binden klicken. .

Sie können den Text des Registerelements bearbeiten, indem Sie mit der rechten Maustaste unter Objekte und Zeitachsen darauf klicken und dann auf Text bearbeiten klicken. Sie können das Registerelement auch durch Doppelklicken aktivieren und dann ein Steuerelement darin zeichnen.

Die Zeichenflächenansicht eines SimpleTabControl-Steuerelements nach dem Hinzufügen von zwei SimpleTabItems-Steuerelementvorlagen

Aufgliederung der Steuerelementvorlage

Die SimpleTabControl-Steuerelementvorlage umfasst die folgenden Elemente:

• Ein Rasterpanel, das verwendet wird, um die verschiedenen untergeordneten Elemente innerhalb des Registersteuerelements aufzunehmen. Darüber hinaus erleichtert die Verwendung des Rasterpanels einem Designer einer Benutzeroberfläche (UI) das Hinzufügen von mehreren Elementen zur Vorlage. Die obere Zeile des Rasterpanels verwendet die automatische Anpassung, sodass deren Höhe an die Größe des größten Registerelements angepasst wird. Die untere Zeile verwendet Sterngrößen (*), sodass sie den verbleibenden Platz einnimmt, um den Inhalt des Registerelements anzuzeigen (das PART_SelectedContentHost-Element).

• Ein TabPanel-Element mit dem NamenHeaderPanel, bei dem es sich um ein benutzerdefiniertes Layoutpanel handelt, das Registerelemente organisieren kann.

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

• Ein ContentPresenter-Element mit dem Namen "PART_SelectedContentHost", das verwendet wird, um die Content-Eigenschaft des Registersteuerelements anzuzeigen, auf das diese Vorlage angewendet wird.

Die SimpleTabItem-Steuerelementvorlage umfasst die folgenden Elemente:

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

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

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

  Objektansicht: Die grundlegenden Teile (Vorlage) des SimpleTabControl-Steuerelements (links) und des SimpleTabItem-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. Beispielsweise legt in der Vorlage für das Registerelement der Auslöser für die IsSelected-Eigenschaft die ZIndex-Eigenschaft für das Registerelement fest, was dessen Anzeige im Vordergrund erzwingt. Aus diesem Grund muss der Auslöser beibehalten werden, damit das Registerelement ordnungsgemäß verwendet werden kann. Der IsSelected-Auslöser legt darüber hinaus einen größeren Wert für die BorderThickness-Eigenschaft fest und ändert die Hintergrundfarbe, um anzuzeigen, dass das Element ausgewählt ist.

Nach oben

Verwendete Pinsel

Die folgenden Pinselressourcen im Ressourcenverzeichnis SimpleStyles.xaml werden von den Steuerelementvorlagen SimpleTabControl und SimpleTabItem verwendet:

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

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

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

• Die Background-Eigenschaft des Border-Elements des Registerelements wird mit der LightBrush-Ressource festgelegt, wenn kein Auslöser aktiv ist, mit der WindowBackgroundBrush-Ressource, wenn für die IsSelected-Eigenschaft der Wert True gilt und mit der DisabledBackgroundBrush-Ressource, wenn für die IsEnabled-Eigenschaft der Wert False gilt.

• Die BorderBrush-Eigenschaft des Border-Elements des Registerelements wird mit der SolidBorderBrush-Ressource festgelegt bzw. mit der DisabledBorderBrush-Ressource, wenn die IsEnabled-Eigenschaft den Wert False aufweist.

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

Zusätzlich können die Vorlagen Bindungen an Systemfarben verwenden, mit denen die Steuerelemente die Systemstandardwerte verwenden können. In vielen Fällen 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.

• Bei dem TabPanel-Element mit dem Namen HeaderPanel in der Vorlage handelt es sich um ein spezielles LayoutPanel-Element, das für das TabControl-Steuerelement verwendet wird. Ein TabPanel-Element ist in der Lage, Registerelemente in mehreren Zeilen anzuordnen und in verschiedenen Ebenen zu platzieren, wenn ein Registerelement ausgewählt wird. Sie können einen anderen Layoutcontainer für das HeaderPanel-Element verwenden, sollten aber dessen IsItemsHost-Eigenschaft auf True festlegen.

• Klicken Sie neben dem SimpleTabItem-Stil im Ressourcenpanel auf die Schaltfläche Ressource bearbeiten, um die SimpleTabItem-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.

• Die Steuerelementvorlage für das TabControl-Systemsteuerelement ist wesentlich komplexer als die SimpleTabControl-Steuerelementvorlage. Sie ermöglicht das Andocken des TabPanel-Steuerelements in verschiedenen Richtungen basierend auf der Orientation-Eigenschaft des TabControl-Steuerelements. In der SimpleTabControl-Steuerelementvorlage wird die Orientation-Eigenschaft aus Gründen der Einfachheit nicht berücksichtigt. Wenn Sie jedoch das TabPanel-Steuerelement an einem anderen Ort platzieren möchten, können Sie die Zeilen und Spalten im Raster bearbeiten.

• Das ContentPresenter-Element mit dem Namen PART_SelectedContentHost darf nicht umbenannt werden, da die Klasse des Steuerelements nach diesem Namen als Ort zum Anzeigen des Registerelements sucht.

Nach oben

Siehe auch

Konzepte

Weiterführende Themen: Anpassen des SimpleTabItem-Steuerelements mithilfe eines Bitmapeffekts