Weiterführende Themen: Ändern des Aussehens von ausgewählten Elementen in einer SimpleListBox-Steuerelementvorlage

Sie können auf einfache Weise die Darstellung eines ausgewählten Elements in Microsoft Expression Blend mit der SimpleListBox-Steuerelementvorlage anpassen.

So ändern Sie das Aussehen des ausgewählten Elements in einer SimpleListBox-Steuerelementvorlage

1. Zeichnen Sie eine SimpleListBox-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 Listenfeld ein Element hinzu, indem Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf das Listenfeld klicken und dann auf SimpleListBoxItem hinzufügen klicken.

3. Rechtsklicken Sie im Panel Objekte und Zeitachsen auf eines der Listenfeldelemente, zeigen Sie auf Vorlage bearbeiten und klicken Sie dann auf Aktuelle Vorlage 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 oberhalb der Elementstruktur im Panel Objekte und Zeitachsen auf Zurück zum Anfang, um den Vorlagenbearbeitungsmodus zu verlassen und in den Dokumentbereich zurückzukehren. Rechtsklicken Sie im Panel Objekte und Zeitachsen auf das Element, dessen Vorlage Sie bearbeiten möchten, zeigen Sie auf Vorlage bearbeiten und klicken Sie dann auf Aktuelle Vorlage bearbeiten, um zum Vorlagenbearbeitungsmodus für eine vorhandene Vorlage zurückzukehren.

4. Klicken Sie im Auslöserpanel auf IsSelected = True. Standardmäßig wird die Farbe des Rahmenhintergrunds geändert, wenn ein Element ausgewählt wird. Dies können Sie im Auslöserpanel unter Eigenschaften wenn aktiv anzeigen. Sie können den Hintergrund mit einer anderen Farbe versehen. Klicken Sie hierzu im Panel Objekte und Zeitachsen auf Rahmen und ändern Sie dann die Hintergrundeigenschaften unter Pinsel im Eigenschaftenpanel.

   Tipp:

   Wenn Sie einen Eigenschaftsauslöser im Auslöserpanel ausgewählt haben, wird durch alle Bearbeitungsschritte an einer beliebigen Stelle in Expression Blend 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.

5. Sie können folgendermaßen vorgehen, um dem Listenfeld zusätzliche Elemente hinzuzufügen, die die gerade geänderte Vorlage verwenden: Klicken Sie auf Zurück zum Anfang, um zum Bearbeitungsbereich für Ihr Dokument zurückzukehren. Doppelklicken Sie dann auf das Listenfeldelement, um das Element zu aktivieren, und fügen Sie den benutzerdefinierten Stil aus der Kategorie Stil des Objektepanels hinzu.

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

So ändern Sie das Aussehen des ausgewählten Elements mit der ItemContainerStyle-Vorlage

1. Zeichnen Sie eine SimpleListBox-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 Listenfeld ein paar Elemente hinzu, indem Sie im Panel Objekte und Zeitachsen auf das Listenfeld doppelklicken, um das Feld auszuwählen. Zeichnen Sie dann ein Rechteck oder ein anderes Steuerelement in das Listenfeld auf der Zeichenfläche. Alternativ können Sie mit der rechten Maustaste auf das Listenfeldelement klicken und dann auf SimpleListBoxItem hinzufügen klicken.

   Tipp:
   Wenn Sie die Datenbindung zum automatischen Generieren von Elementen für das Listenfeld verwenden möchten, können Sie die Verfahren unter Weiterführende Themen: Erstellen eines RSS-Newsreaders verwenden.

3. Klicken Sie im Panel Objekte und Zeitachsen auf das ListBox-Objekt. Zeigen Sie im Menü Objekt auf Zusätzliche Formatvorlagen bearbeiten, zeigen Sie auf ItemContainerStyle bearbeiten und klicken Sie dann auf Kopie bearbeiten.

   Das Dialogfeld Ressource "Style" erstellen wird geöffnet. Übernehmen Sie für dieses Verfahren die Standardwerte, und klicken Sie auf OK.

   In Expression Blend wird der Bearbeitungsmodus für den Stil eines ListBoxItem-Objekts geöffnet.

   Weitere Informationen zu den Optionen im Dialogfeld Ressource "Style" erstellen finden Sie unter Erstellen einer Ressource.

4. Vorlagen werden von Stillelementen umschlossen. Rechtsklicken Sie daher zum Bearbeiten der Vorlage des ListBoxItem-Objekts im Panel Objekte und Zeitachsen auf das Style-Element, zeigen Sie auf Vorlage bearbeiten und klicken Sie dann auf Aktuelle Vorlage bearbeiten.

   Hinweis:
   Klicken Sie hier auf Aktuelle Vorlage bearbeiten statt auf Kopie bearbeiten, da Steuerelementvorlagen von Stilelementen umschlossen sind und Sie in Schritt 3 auf Kopie bearbeiten geklickt haben, um eine Kopie des Stils zu erstellen.

   Expression Blend ruft den Bearbeitungsbereich der ListBoxItem-Steuerelementvorlage auf. Dabei handelt es sich um die Vorlage, die vom Listenfeld für jedes Element verwendet wird. Innerhalb dieser Vorlage befinden sich ein Border-Element mit dem Namen Bd, ein ContentPresenter-Element und zwei Auslöser für den IsSelected-Zustand.

5. Klicken Sie im Auslöserpanel auf einen der IsSelected-Auslöser, um den Aufzeichnungsmodus für diesen Auslöser aufzurufen und ändern Sie dann die Eigenschaften des Bd-Elements.

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

Siehe auch

Konzepte

SimpleListBox-Steuerelementvorlage und SimpleListBoxItem-Steuerelementvorlage