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 einer SimpleScrollBar-Steuerelementvorlage an

1. Zeichnen Sie ein SimpleScrollBar-Element auf die Zeichenfläche in Expression Blend.

   Tipp:
   Die Steuerelemente für einfache Stile 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. Klicken Sie mit der rechten Maustaste unter Objekte und Zeitachsen auf die Bildlaufleiste, 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.

3. Klicken Sie unter Objekte und Zeitachsen auf das IncreaseRepeat-Element, und legen Sie das Alpha-Attribut (gekennzeichnet durch ein A auf der rechten Seite der Farbpalette) der Eigenschaften Background und BorderBrush im Eigenschaftenpanel unter Pinsel auf 0 % fest.

4. Klicken Sie unter Objekte und Zeitachsen auf das IncreaseArrow-Pfadelement, und stellen Sie die Eigenschaften Stroke (Strich) und Fill (Füllung) auf einen weißen Pinsel mit Volltonfarbe ein. Entfernen Sie für die Stroke-Eigenschaft (Strich) 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 unter Objekte und Zeitachsen auf das IncreaseRepeat-Element, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und führen Sie dann einen der folgenden Schritte aus:

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

   • 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 das ScrollBar-Steuerelement zu speichern.

6. Löschen Sie im Bearbeitungsbereich des SimpleRepeatButton-Elements im Interaktionspanel unter Auslöser die Ereignisauslöser mit den Namen IsMouseOver = True und IsPressed = True. Wählen Sie hierzu die einzelnen Auslöser aus, und klicken Sie auf die Schaltfläche 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-Element, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Vorlage bearbeiten, um zu der ScrollBar-Vorlage zurückzukehren, die Sie zuvor bearbeitet haben.

   • Wenn Sie das Hauptdokument bearbeiten, klicken Sie auf die Schaltfläche Zurück zum Anfang.

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

9. Aktivieren Sie das GridRoot-Element, indem Sie unter Objekte und Zeitachsen darauf doppelklicken, klicken Sie in der Werkzeugpalette auf das Border-Steuerelement, und zeichnen Sie ein Border-Element in das GridRoot-Element. Legen Sie die automatische Anpassung für das neue Border-Element fest, indem Sie unter Objekte und Zeitachsen darauf klicken, auf Automatische Anpassung zeigen und dann auf Füllung klicken.

10. Lassen Sie das neue Border-Element unter 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 unter Objekte und Zeitachsen auf das [Thumb]-Element, zeigen Sie auf Steuerelementteile bearbeiten (Vorlage), und klicken Sie dann auf Kopie bearbeiten. Klicken Sie im Bearbeitungsbereich des ScrollBarStyle-Elements auf das Rectangle-Element, ändern Sie dann die Fill-Eigenschaft (Füllung) in einen dunkelgrauen Pinsel mit Volltonfarbe, und legen Sie die Margin-Eigenschaft (Rand) 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