Weiterführende Themen: Anpassen der Darstellung der Expander-Schaltfläche in einer SimpleComboBox-Steuerelementvorlage

In Microsoft Expression Blend können Sie die Darstellung der Expander-Schaltfläche in einem Kombinationsfeld einfach und schnell anpassen. Verwenden Sie hierzu das ToggleButton-Steuerelement der SimpleComboBox-Steuerelementvorlage.

So passen Sie die Expander-Schaltfläche in einer SimpleComboBox-Steuerelementvorlage an

1. Zeichnen Sie eine SimpleComboBox-Steuerelementvorlage auf der Zeichenfläche in Expression Blend.

   Tipp:
   Die einfachen Stilsteuerelemente stehen in der Objektbibliothek  auf der Registerkarte Steuerelemente unter der Kategorie Einfacher Stil zur Verfügung. Nachdem Sie ein Steuerelement für einen einfachen Stil in der Liste ausgewählt haben, können Sie es auf der Zeichenfläche zeichnen.

2. Fügen Sie dem Kombinationsfeld ein Element hinzu, indem Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das Kombinationsfeld klicken und dann auf SimpleComboBoxItem hinzufügen klicken.

3. Wiederholen Sie den vorherigen Schritt, um dem Kombinationsfeld ein oder zwei zusätzliche Elemente hinzuzufügen.

4. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf ComboBox, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten. Wenn Sie das Ressourcenverzeichnis SimpleStyles.xaml nicht ändern möchten, können Sie auf Kopie bearbeiten statt auf Vorlage bearbeiten klicken, um eine neue Vorlage zu erstellen und im Dokument zu speichern. Weitere Informationen zum Erstellen von Kopien finden Sie unter Erstellen einer Ressource.

   Tipp:

   Klicken Sie oberhalb der Elementstruktur im Interaktionspanel auf die Schaltfläche Zurück zum Anfang, um den Vorlagenbearbeitungsmodus zu verlassen und in den Dokumentbereich zurückzukehren. Klicken Sie unter Objekte und Zeitachsen mit der rechten Maustaste auf das Element, dessen Vorlage Sie bearbeiten möchten, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten, um zum Vorlagenbearbeitungsmodus für eine vorhandene Vorlage zurückzukehren.

5. Erweitern Sie im Bearbeitungsbereich der Steuerelementvorlage alle Knoten unter Objekte und Zeitachsen.

6. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das ToggleButton-Element, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und führen Sie dann einen der folgenden Schritte aus:

   • Wenn Sie in Schritt 4 die Option Vorlage bearbeiten ausgewählt haben, klicken Sie jetzt auf Vorlage bearbeiten, um die ExpanderToggleButton-Steuerelementvorlage zu bearbeiten, die in SimpleStyles.xaml gespeichert ist.

   • Wenn Sie in Schritt 4 die Option Kopie bearbeiten ausgewählt haben, klicken Sie jetzt auf Kopie bearbeiten, um eine Kopie der ExpanderToggleButton-Steuerelementvorlage zu erstellen und am selben Speicherort zu speichern wie die Vorlage für das ComboBox-Steuerelement.

   Das Aussehen der Expander-Schaltfläche wird in der ExpanderToggleButton-Steuerelementvorlage festgelegt. Beachten Sie, dass sich das Grid-Element in der Vorlage über die gesamte Breite des Kombinationsfelds erstreckt. Dadurch kann die Dropdownliste unabhängig von der Stelle angezeigt werden, auf die der Benutzer innerhalb des Kombinationsfelds klickt.

7. Wählen Sie unter Objekte und Zeitachsen das Arrow-Element aus, um es auf der Zeichenfläche zu identifizieren. Das Arrow-Element ist ein Pfad, der für die Expander-Schaltfläche des ComboBox-Steuerelements steht.

   Sie können das Arrow-Element mit dem Direktauswahlwerkzeug ändern, um Punkte auf dem Pfad anzupassen. Sie können das Arrow-Element auch löschen und mit dem Stiftwerkzeug aus der Werkzeugpalette ein neues Element erstellen.

   Tipp:
   Mit dem Textfeld Zoom  im unteren Bereich der Zeichenfläche können Sie die Zeichenfläche vergrößern. Alternativ können Sie die Bildlauftaste der Maus bei gedrückter STRG-TASTE verwenden.

   Tipp:
   Als Alternative zum Zeichnen eines Pfadelements mit dem Stiftwerkzeug können Sie eine aus Microsoft Expression Design 2 importierte Grafikressource oder eine Bilddatei, die Sie dem Projekt hinzufügen, verwenden.

8. Der Rollovereffekt beim Klicken auf die Expander-Schaltfläche wird durch Eigenschaftsauslöser definiert, die die Darstellung der Rectangle-Elemente in der ToggleButton-Steuerelementvorlage ändern. Sie können den vorhandenen Auslösern eine neue Eigenschaftenänderung hinzufügen, damit das Arrow-Element beim Klicken auf die Expander-Schaltfläche gedreht wird. Klicken Sie im Interaktionspanel unter Auslöser auf IsChecked = True (das Arrow-Element muss unter Objekte und Zeitachsen ausgewählt sein). Klicken Sie dann im Eigenschaftenpanel unter Transformation auf die Registerkarte Drehen, und geben Sie in das Textfeld Angle den Wert 180 ein.

   Wenn ein Benutzer auf die Expander-Schaltfläche klickt, um das Kombinationsfeld zu erweitern, wird das Arrow-Element um 180 Grad gedreht. Beim erneuten Klicken kehrt es wieder in seine ursprüngliche Position zurück.

   Tipp:

   Wenn Sie im Interaktionspanel unter Auslöser einen Eigenschaftsauslöser ausgewählt haben, legen alle Bearbeitungen, die Sie an beliebigen Stellen in Expression Blend durchführen, einen Wert fest, der bei dieser Auslöserbedingung geändert wird. Stellen Sie sicher, dass der richtige Auslöser ausgewählt wurde, bevor Sie Ihre Änderungen vornehmen. Wenn Sie Änderungen vornehmen möchten, die sich auf den Standardzustand der Steuerelementvorlage auswirken, klicken Sie unter Auslöser auf Standard.

9. Testen Sie die Anwendung (F5), um die Effekte zu sehen.

Siehe auch

Konzepte

SimpleComboBox-Steuerelementvorlage und SimpleComboBoxItem-Steuerelementvorlage