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 im Objektepanel in der Kategorie Stile unter Einfache Stile 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 im Panel Objekte und Zeitachsen auf das Kombinationsfeld 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 im Panel Objekte und Zeitachsen auf ComboBox, zeigen Sie auf Vorlage bearbeiten, und klicken Sie dann auf Aktuellen bearbeiten. Wenn Sie das Ressourcenverzeichnis SimpleStyles.xaml nicht ändern möchten, klicken Sie auf Kopie bearbeiten anstatt auf Aktuellen bearbeiten. Es wird eine neue Vorlage erstellt, die Sie im Dokument speichern können. Weitere Informationen zum Erstellen von Kopien finden Sie unter Erstellen einer Ressource.

   Tipp:

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

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

6. Klicken Sie mit der rechten Maustaste im Panel Objekte und Zeitachsenl auf das ToggleButton-Element, zeigen Sie auf Vorlage bearbeiten, und führen Sie dann einen der folgenden Schritte aus:

   • Wenn Sie in Schritt 4 die Option Aktuellen bearbeiten ausgewählt haben, klicken Sie jetzt auf Aktuellen 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 im Panel 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 Werkzeug Direktauswahl ändern, um Punkte auf dem Pfad anzupassen. Sie können das Arrow-Element auch löschen und mit dem Werkzeug Zeichenstift aus dem Werkzeugpanel 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 Werkzeug Zeichenstift können Sie eine aus Microsoft Expression Design 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 Auslöserpanel auf IsChecked = True (das Arrow-Element muss im Panel Objekte und Zeitachsen ausgewählt sein). Klicken Sie dann im Eigenschaftenpanel unter Transformation auf die Registerkarte Drehen, und geben Sie in das Textfeld Drehwinkel 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 Auslöserpanel einen Eigenschaftenauslöser ausgewählt haben, wird von allen Bearbeitungen, die Sie an beliebigen Stellen in Expression Blend durchführen, ein Wert festgelegt, 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 im Auslöserpanel auf Standard.

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

Siehe auch

Konzepte

SimpleComboBox-Steuerelementvorlage und SimpleComboBoxItem-Steuerelementvorlage