Freigeben über

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

  • Artikel

Diese Seite bezieht sich nur auf WPF-Projekte

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.

    Cc295254.alert_tip(de-de,Expression.10).gifTipp:

    Die einfachen Stilsteuerelemente stehen in der ObjektbibliothekCc295254.0224cabd-5da1-4e01-bddd-4a647401a098(de-de,Expression.10).png 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 Listenfeld ein Element hinzu, indem Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf das Listenfeld klicken und dann auf SimpleListBoxItem hinzufügen klicken.

  3. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf eines der Listenfeldelemente, 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.

    Cc295254.alert_tip(de-de,Expression.10).gifTipp:

    Klicken Sie oberhalb der Elementstruktur im Interaktionspanel auf die Schaltfläche Zurück zum AnfangCc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(de-de,Expression.10).png, 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.

  4. Klicken Sie im Interaktionspanel unter Auslöser auf IsSelected = True. Standardmäßig wird die Farbe des Rahmenhintergrunds geändert, wenn ein Element ausgewählt wird. Dies können Sie unter Auslöser unter Eigenschaften wenn aktiv anzeigen. Sie können den Hintergrund in eine andere Farbe ändern. Klicken Sie hierzu unter Objekte und Zeitachsen auf Border, und ändern Sie dann die Background-Eigenschaft (Hintergrund) unter Pinsel im Eigenschaftenpanel.

    Cc295254.alert_tip(de-de,Expression.10).gifTipp:

    Wenn Sie einen Eigenschaftsauslöser unter Auslöser im Interaktionspanel 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 unter Auslöser auf Standard.

  5. Sie können folgendermaßen vorgehen, um dem Listenfeld mehr Elemente hinzuzufügen, welche die gerade geänderte Vorlage verwenden: Klicken Sie auf die Schaltfläche Zurück zum AnfangCc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(de-de,Expression.10).png, um zum Bearbeitungsbereich für Ihr Dokument zurückzukehren. Doppelklicken Sie dann auf das Listenfeldelement, um es zu aktivieren, und fügen Sie den benutzerdefinierten Stil von der Registerkarte Lokale Formatvorlagen der Objektbibliothek 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.

    Cc295254.alert_tip(de-de,Expression.10).gifTipp:

    Die einfachen Stilsteuerelemente stehen in der ObjektbibliothekCc295254.0224cabd-5da1-4e01-bddd-4a647401a098(de-de,Expression.10).png 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 Listenfeld Elemente hinzu, indem Sie unter Objekte und Zeitachsen auf das Listenfeld doppelklicken, um es auszuwählen. Zeichnen Sie dann ein RechteckCc295254.ae750268-92e8-403a-9e07-b662da4e9e1e(de-de,Expression.10).png 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.

    Cc295254.alert_tip(de-de,Expression.10).gifTipp:

    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 in diesem Benutzerhandbuch verwenden.

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

    Das Dialogfeld Ressource "Style" erstellen wird geöffnet. Weitere Informationen zu den Optionen im Dialogfeld Ressource "Style" erstellen finden Sie unter Erstellen einer Ressource. Ü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.

  4. Vorlagen werden von Style-Elementen umschlossen. Klicken Sie daher zum Bearbeiten der Vorlage des ListBoxItem-Objekts mit der rechten Maustaste unter Objekte und Zeitachsen auf das Style-Element, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten.

    Cc295254.alert_note(de-de,Expression.10).gifHinweis:

    Sie klicken hier auf Vorlage bearbeiten statt auf Kopie bearbeiten, da Steuerelementvorlagen von Style-Elementen umschlossen sind und da 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 2 Auslöser für den IsSelected-Zustand.

  5. Klicken Sie im Interaktionspanel unter Auslöser 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