Weiterführende Themen: Anpassen des Aussehens einer SimpleScrollBar-Steuerelementvorlage

In Microsoft Expression Blend können Sie die Darstellung von Bildlaufleisten mit der SimpleScrollBar-Steuerelementvorlage auf einfache Weise anpassen.

So passen Sie das Aussehen eines SimpleScrollBar-Stils an

1. Zeichnen Sie ein SimpleScrollBar-Objekt auf die 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. Klicken Sie mit der rechten Maustaste im Panel Objekte und Zeitachsen auf die Bildlaufleiste, 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 Objektstruktur auf die Schaltfläche 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 Objekt, dessen Vorlage Sie bearbeiten möchten, zeigen Sie auf Vorlage bearbeiten, und klicken Sie dann auf Aktuellen bearbeiten, um zum Vorlagenbearbeitungsmodus für eine vorhandene Vorlage zurückzukehren.

3. Klicken Sie im Panel Objekte und Zeitachsen auf das IncreaseRepeat-Objekt. Legen Sie dann das Alpha-Attribut (gekennzeichnet durch ein A auf der rechten Seite der Farbpalette) der Eigenschaften Background und BorderBrush im Eigenschaftenpanel unter Pinsel auf 0 Prozent fest.

4. Klicken Sie im Panel Objekte und Zeitachsen auf das IncreaseArrow-Pfadobjekt, und stellen Sie die Stroke- und Fill-Eigenschaft auf einen weißen Pinsel mit Volltonfarbe ein. Entfernen Sie für die Stroke-Eigenschaft zunächst die Bindung, indem Sie auf die Schaltfläche Erweiterte Eigenschaftenoptionen und dann auf Zurücksetzen klicken.

5. Klicken Sie mit der rechten Maustaste im Panel Objekte und Zeitachsen auf das IncreaseRepeat-Objekt, zeigen Sie auf Vorlage bearbeiten , und führen Sie dann einen der folgenden Schritte aus:

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

   • Wenn Sie in Schritt 2 die Option Kopie bearbeiten ausgewählt haben, klicken Sie jetzt auf Kopie bearbeiten, um eine Kopie der SimpleRepeatButton-Steuerelementvorlage zu erstellen und am selben Ort wie die Vorlage für den ScrollBar-Stil zu speichern.

6. Löschen Sie im Bearbeitungsbereich des SimpleRepeatButton-Stils im Auslöserpanel die Ereignisauslöser mit den Namen IsMouseOver = True und IsPressed = True. Wählen Sie hierzu die einzelnen Auslöser aus, und klicken Sie auf Auslöser löschen.

7. Kehren Sie zum Bearbeitungsbereich der SimpleScrollBar-Vorlage zurück. Führen Sie hierzu einen der folgenden Schritte aus:

   • Wenn Sie das Dokument Simple Styles.xaml bearbeiten, weil Sie in Schritt 5 die Option Vorlage bearbeiten ausgewählt haben, klicken Sie auf die Registerkarte für das Hauptdokument (beispielsweise die Registerkarte Window1.xaml) an der Oberseite der Zeichenfläche. Klicken Sie mit der rechten Maustaste auf das ScrollBar-Objekt, zeigen Sie auf Vorlage bearbeiten, und klicken Sie dann auf Aktuellen bearbeiten, um zu der ScrollBar-Vorlage zurückzukehren, die Sie zuvor bearbeitet haben.

   • Wenn Sie das Hauptdokument bearbeiten, klicken Sie auf Zurück zum Anfang.

8. Wiederholen Sie den vorherigen Schritt für das DecreaseRepeat-Objekt.

9. Aktivieren Sie das GridRoot-Objekt, indem Sie im Panel Objekte und Zeitachsen darauf klicken. Klicken Sie im Werkzeugpanel auf das Border-Steuerelement, und ziehen Sie anschließend ein Border-Objekt in das GridRoot-Objekt. Legen Sie die automatische Anpassung für das neue Border-Objekt fest, indem Sie im Panel Objekte und Zeitachsen darauf klicken, auf Automatische Anpassung zeigen und dann auf Füllung klicken.

10. Lassen Sie das neue Border-Objekt im Panel Objekte und Zeitachsen ausgewählt, und ändern Sie im Eigenschaftenpanel unter Darstellung die CornerRadius-Eigenschaft in 4,4,4,4. Dadurch werden die Ecken des Rahmens abgerundet.

11. Klicken Sie mit der rechten Maustaste im Panel Objekte und Zeitachsen auf [Thumb], zeigen Sie auf Vorlage bearbeiten, und klicken Sie dann auf Kopie bearbeiten. Klicken Sie im Bearbeitungsbereich des SimpleThumbStyle-Stils auf das Rectangle-Objekt, ändern Sie dann die Fill-Eigenschaft in einen dunkelgrauen Pinsel mit Volltonfarbe, und legen Sie die Margin-Eigenschaft für den linken und rechten Rand auf 2 fest.

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

Siehe auch

Konzepte

SimpleScrollBar-Steuerelementvorlage