SimpleComboBox-Steuerelementvorlage und SimpleComboBoxItem-Steuerelementvorlage
.png "This page applies to WPF projects only")
Beim Kombinationsfeld handelt es sich um ein ItemsControl-Element in Form einer Dropdownliste. Sie können einem Kombinationsfeld von Microsoft Expression Blend Inhalte hinzufügen, indem Sie auf das Kombinationsfeld doppelklicken und ein Element (z. B. ein SimpleComboBoxItem-Element) darin zeichnen. Sie können auch im Panel Objekte und Zeitachsen mit der rechten Maustaste auf das Kombinationsfeld klicken und dann auf SimpleComboBoxItem hinzufügen klicken, um der Auflistung einzelne Elemente hinzuzufügen. Wenn die Auflistung von ComboBoxItem-Elementen aus einer Datenquelle generiert werden soll, klicken Sie auf ItemsSource an Daten binden. Klicken Sie mit der rechten Maustaste im Panel Objekte und Zeitachsen auf das ComboBox-Steuerelement oder ComboBoxItem-Steuerelement, und klicken Sie dann auf ComboBox erweitern, um das Kombinationsfeld auf der Zeichenfläche in erweitertem Zustand anzuzeigen.
Die Zeichenflächenansicht eines SimpleComboBox-Steuerelements nach dem Hinzufügen von zwei Elementen
.png "Cc295332.25309636-8547-4686-a578-9aa914190f01(DE-DE,Expression.30).png")
Aufgliederung der Steuerelementvorlage
Die SimpleComboBox-Steuerelementvorlage umfasst die folgenden Elemente:
Ein Rasterpanel, das verwendet wird, um verschiedene untergeordnete Elemente innerhalb des Kombinationsfelds aufzunehmen. Darüber hinaus erleichtert die Verwendung des Rasterpanels einem Designer einer Benutzeroberfläche (UI) das Hinzufügen von mehreren Elementen zur Vorlage.
Ein ContentPresenter-Element mit dem Namen "ContentSite", das im Grid-Steuerelement enthalten ist und zum Anzeigen des ausgewählten Elements verwendet wird.
Ein Textfeld mit dem Namen "PART_EditableTextBox", das im Grid-Steuerelement enthalten ist und dem Benutzer das Bearbeiten von Text innerhalb des Kombinationsfelds ermöglicht. Sie sollten den Namen PART_EditableTextBox nicht ändern, da er von der Klasse zum Suchen nach dem Textfeld verwendet wird. Standardmäßig ist das Textfeld reduziert und wird angezeigt, wenn für die IsEditable-Eigenschaft der Wert True für das Kombinationsfeld festgelegt ist, auf das diese Steuerelementvorlage angewendet wird.
Ein Popup-Steuerelement mit Schaltfläche zum Umschalten, das zum Erstellen des erweiterbaren Teils des Kombinationsfelds verwendet wird. Das Popup-Steuerelement kann sich relativ zu anderen Steuerelementen positionieren. Es wird im Vordergrund vor allen anderen Inhalten gerendert. Dieses Steuerelement unterstützt auch einige integrierte Animationen.
Ein Grid-Steuerelement, das im Popup-Steuerelement enthalten ist und ein ScrollViewer-Element enthält, welches das Ausführen des Bildlaufs für die Liste der Elemente ermöglicht. Das StackPanel-Element im ScrollViewer-Element positioniert jedes Element. Die IsItemsHost-Eigenschaft des StackPanel-Elements ist auf den Wert True festgelegt, sodass das ComboBox-Steuerelement untergeordnete Elemente innerhalb des StackPanel-Elements positionieren kann. Wenn Sie die Einstellungen für die Anzeige der Elemente ändern möchten, können Sie dieses Layoutpanel ersetzen. Klicken Sie hierzu mit der rechten Maustaste im Panel Objekte und Zeitachsen auf das Grid-Steuerelement, wählen Sie Layouttyp ändern und dann ein anderes Panel aus, wie z. B. UniformGrid.
Die SimpleComboBoxItem-Steuerelementvorlage umfasst die folgenden Elemente:
Ein Rasterpanel, das verwendet wird, um verschiedene untergeordnete Elemente innerhalb des Kombinationsfeldelements aufzunehmen. Außerdem erleichtert die Verwendung eines Rasterpanels dem Designer 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 Button-Steuerelements gebunden werden kann, auf das diese Vorlage angewendet wird.
Ein ContentPresenter-Element, das sich innerhalb des Grid-Elements befindet und das automatisch an die Content-Eigenschaft des Elementsteuerelements gebunden ist, auf das diese Vorlage angewendet wird.
Objektansicht: Die grundlegenden Teile (Vorlage) eines SimpleComboBox-Steuerelements (links) und eines SimpleComboBoxItem-Steuerelements (rechts)
.png "Cc295332.e3201103-2125-43d3-b077-6aae64f53947(DE-DE,Expression.30).png")
.png "Cc295332.4532cb8d-690e-49f7-9c8d-cc2fcb0109ae(DE-DE,Expression.30).png")
Verwendete Eigenschaftsauslöser
Eigenschaftsauslöser in der Steuerelementvorlage werden verwendet, damit das Steuerelement auf Änderungen der Eigenschaften reagieren kann. Sie können im Auslöserpanel 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 Kombinationsfeld die HasItems-Eigenschaft den Wert False aufweist, ist die Mindesthöhe des DropDownBorder-Elements auf 95 festgelegt, sodass beim Klicken auf das Kombinationsfeld ein leeres Dropdownfenster angezeigt wird. Wenn für die Mindesthöhe der Wert 0 festgelegt wurde, wird ein winziges Dropdownfenster angezeigt. Wenn in der Vorlage für das ComboBoxItem-Steuerelement die IsHighlighted-Eigenschaft auf den Wert True festgelegt ist, wird die Background-Eigenschaft des Border-Elements geändert, um das im Kombinationsfeld ausgewählte Element anzuzeigen.
Verwendete Pinsel
Die folgenden Pinselressourcen im Ressourcenverzeichnis SimpleStyles.xaml werden von den Steuerelementvorlagen SimpleComboBox und SimpleComboBoxItem verwendet:
Die Background-Eigenschaft des DropDownBorder-Elements wird mit der WindowBackgroundBrush-Ressource festgelegt.
Die BorderBrush-Eigenschaft des DropDownBorder-Elements wird mit der SolidBorderBrush-Ressource festgelegt.
Die Foreground-Eigenschaft wird mit der DisabledForegroundBrush-Ressource festgelegt, wenn für die IsEnabled-Eigenschaft der Wert False gilt.
Wenn die SimpleComboBox-Steuerelementvorlage mit Elementen aufgefüllt ist, welche die SimpleComboBoxItem-Steuerelementvorlage verwenden, wird die Background-Eigenschaft des Elements mit der SelectedBackgroundBrush-Ressource festgelegt, wenn ein Element ausgewählt ist. Die Foreground-Eigenschaft wird mit der DisabledForegroundBrush-Ressource festgelegt, wenn die IsEnabled-Eigenschaft den Wert False aufweist.
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.
Die Erweiterung des Kombinationsfelds wird festgelegt, indem die IsChecked-Eigenschaft des ToggleButton-Elements und die IsOpen-Eigenschaft des Popup-Elements an die IsDropDownOpen-Eigenschaft des Kombinationsfelds gebunden werden, auf das diese Steuerelementvorlage angewendet wird. Wenn Sie das ToggleButton-Element oder das Popup-Element bearbeiten, stellen Sie sicher, dass diese Vorlagenbindung erhalten bleibt.
Das ToggleButton-Element verwendet eine separate Vorlage mit der Bezeichnung ToggleButtonControlTemplate. Klicken Sie mit der rechten Maustaste auf das ToggleButton-Element, zeigen Sie auf Vorlage bearbeiten, und klicken Sie dann auf Aktuellen bearbeiten.
Klicken Sie auf die Schaltfläche Ressource bearbeiten neben dem SimpleComboBoxItem-Stil im Ressourcenpanel, um die SimpleComboBoxItem-Steuerelementvorlage zu ändern. Wenn Sie sich im Bearbeitungsmodus des Stils befinden, klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf Formatvorlage, zeigen Sie auf Vorlage bearbeiten, und klicken Sie dann auf Aktuellen bearbeiten. Wenn Sie die SimpleComboBoxItem-Steuerelementvorlage ändern, können Sie den IsHighlighted-Auslöser beibehalten oder ändern.