Formatierungstipps für "ScrollBar"-Steuerelemente

  • Artikel

Ee341375.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(DE-DE,Expression.30).png

Das ScrollBar-Steuerelement stellt eine Reihe von Werten dar, wobei der aktuelle Wert durch die Position eines Objekttyps namens Thumb dargestellt wird. ScrollBar-Objekte werden normalerweise innerhalb der Vorlagen anderer Steuerelemente wie des ListBox- oder ScollViewer-Steuerelements verwendet, um die Bildlauffunktion zu ermöglichen.

Wie bei allen Steuerelementen kann das ScrollBar-Steuerelement bearbeitet werden, sodass es ganz anders aussieht als seine Standardform. Standardmäßig sieht das ScrollBar-Steuerelement wie folgt aus:

Ee341375.3a7948bb-14c7-46cd-8098-11ee8579802d(DE-DE,Expression.30).png

Interessante Eigenschaften des "ScrollBar"-Steuerelements

Sie können ein ScrollBar-Steuerelement horizontal oder vertikal ausrichten, indem Sie im Eigenschaftenpanel unter Layout die Orientation-Eigenschaft setzen. Sie können die Bandbreite der Werte angeben, indem Sie im Eigenschaftenpanel unter Allgemeine Eigenschaften die Minimum- und Maximum-Eigenschaft festlegen. Der (in der Value-Eigenschaft angegebene) aktuelle Wert muss zwischen den Mindest- und Höchstwerten liegen. Es gibt weitere festlegbare Eigenschaften in der Kategorie Allgemeine Eigenschaften, z. B. die Eigenschaften LargeChange und SmallChange.

Sie können diese Eigenschaften folgendermaßen festlegen:

  • Die Eigenschaften des Objekts festlegen   Nachdem Sie ein ScrollBar-Objekt auf die Zeichenfläche gezogen haben, können Sie die Eigenschaften des Objekts direkt festlegen. Wenn mehrere ScrollBars die gleichen Werte benutzen sollen, legen Sie diese Eigenschaften in einer Formatvorlage fest.

  • Die Eigenschaften in einer Formatvorlage festlegen   Wenn Sie die Eigenschaften in einer Formatvorlage Ee341375.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(DE-DE,Expression.30).png des ScrollBar-Objekts festlegen, bekommt jedes ScrollBar-Objekt, das diese Formatvorlage verwendet, diese Werte. Sie können die Werte für ein bestimmtes Objekt überschreiben.

    Weitere Informationen finden Sie unter Erstellen einer Formatvorlage.

Die Darstellung des ScrollBar-Steuerelements ändert sich je nach dem jeweiligen Zustand. Im Vorlagenbearbeitungsmodus können Sie die Darstellung für jeden Zustand ändern, indem Sie einen Zustand im Zuständepanel auswählen.

Weitere Informationen finden Sie unter den in den folgenden Tabellen aufgelisteten Zuständen und unter Definieren unterschiedlicher visueller Zustände für ein Steuerelement.

Teile "ScrollBar"-Vorlage

Das ScrollBar-Steuerelement verwendet eine Vorlage, die ScrollBar-Vorlage. Jeder Teil der Vorlage spielt eine Rolle für das Aussehen und Verhalten des ScrollBar-Objekts, auf das die Vorlage angewandt wird.

Andere Objekte können in der Vorlage bestehen, um das Aussehen des ScrollBar-Steuerelements zu verschönern, aber die in der folgenden Tabelle aufgeführten Teile sind mit seinem Verhalten in einem Vertrag verknüpft.

Wenn Sie die Teile der Vorlage anzeigen möchten, öffnen Sie das Teilepanel während der Bearbeitung der Vorlage.

Ee341375.ea64f295-e640-448b-a3ef-c28ae681e977(DE-DE,Expression.30).png

Teilename

Objekttyp

Beschreibung

Ee341375.25182a96-9a69-478a-9cfe-5b360e6a9bea(DE-DE,Expression.30).png VerticalRoot

Ee341375.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(DE-DE,Expression.30).png HorizontalRoot

FrameworkElement

Ein Layoutpanel, das die Objekte enthält, die das Aussehen des vertikal (oder horizontal) ausgerichteten ScrollBar-Steuerelements festlegen.

Dieses Teil ist obligatorisch.

Ee341375.f0c1ff71-7814-42ba-806b-7ea92d616e69(DE-DE,Expression.30).png VerticalSmallDecrease

Ee341375.eb6fad93-f17e-4f62-a926-8c8651862891(DE-DE,Expression.30).png HorizontalSmallDecrease

RepeatButton

Ein Objekt, das die Value-Eigenschaft des ScrollBar-Objekts verringert, wenn auf das Objekt geklickt wird. Die Value-Eigenschaft wird schrittweise um den Wert in der SmallChange-Eigenschaft gesenkt.

Ee341375.a5d608f2-bba2-48c5-8b15-2c115db86acc(DE-DE,Expression.30).png VerticalLargeDecrease

Ee341375.15de085f-48f5-41dd-a286-e3dcb4cfd18b(DE-DE,Expression.30).png HorizontalLargeDecrease

RepeatButton

Ein Objekt, das die Value-Eigenschaft des ScrollBar-Objekts verringert, wenn auf das Objekt geklickt wird. Die Value-Eigenschaft wird schrittweise um den Wert in der LargeChange-Eigenschaft verringert.

Dieses Teil ist obligatorisch.

Ee341375.alert_tip(DE-DE,Expression.30).gifTipp:
RepeatButton-Objekte haben Eigenschaften, die Sie festlegen können, aber wenn Sie die Objekte, aus denen das RepeatButton-Objekt besteht, hinzufügen, löschen oder bearbeiten möchten, öffnen Sie seine Vorlage.

Ee341375.1d2fe38a-3fd8-4951-b978-7e44b6f2401d(DE-DE,Expression.30).png VerticalThumb

Ee341375.1aa736bd-cd0d-4514-a5e4-b495d11d4870(DE-DE,Expression.30).png HorizontalThumb

Thumb

Ein Objekt, dessen Position entlang eines Titels den aktuellen Wert des ScrollBar-Steuerelements darstellt.

Dieses Teil ist obligatorisch.

Ee341375.alert_tip(DE-DE,Expression.30).gifTipp:
Thumb-Objekte haben Eigenschaften, die Sie einstellen können, aber wenn Sie die Objekte, aus denen das Thumb-Objekt besteht, hinzufügen, löschen oder bearbeiten möchten, öffnen Sie seine Vorlage.

Ee341375.272b5149-46f2-4633-ae61-88dfb9c58b7e(DE-DE,Expression.30).png VerticalLargeIncrease

Ee341375.97fa60b9-0caf-4387-9225-b57510d32209(DE-DE,Expression.30).png HorizontalLargeIncrease

RepeatButton

Ein Objekt, das die Value-Eigenschaft des ScrollBar-Objekts erhöht, wenn auf das Objekt geklickt wird. Die Value-Eigenschaft wird schrittweise um den Wert in der LargeChange-Eigenschaft erhöht.

Dieses Teil ist obligatorisch.

Ee341375.b5acdd5b-dc01-4fec-a4b7-641b4cb36f50(DE-DE,Expression.30).png VerticalSmallIncrease

Ee341375.65bdc0a8-bb2a-4ad1-a136-70070743794a(DE-DE,Expression.30).png HorizontalSmallIncrease

RepeatButton

Ein Objekt, das die Value-Eigenschaft des ScrollBar-Objekts erhöht, wenn auf das Objekt geklickt wird. Die Value-Eigenschaft wird schrittweise um den Wert in der SmallChange-Eigenschaft erhöht.

Status des "ScrollBar"-Steuerelements

Standardmäßig kann das ScrollBar-Steuerelement in einem der folgenden drei Status stehen, die Sie bei der Bearbeitung einer ScrollBar-Vorlage im Zuständepanel anzeigen können:

Zustandsname

Beschreibung

Normal

Darstellung des ScrollBar-Steuerelements, wenn es keine Interaktion mit dem Steuerelement gibt

MouseOver

Darstellung des ScrollBar-Steuerelements, wenn der Mauszeiger über einem Steuerelement bewegt wird

Disabled (Deaktiviert)

Darstellung des ScrollBar-Steuerelements, wenn die IsEnabled-Eigenschaft auf False gesetzt ist

Wenn Sie einen Zustand auswählen, wird die Zustandsaufzeichnung aktiviert, sodass alle vorgenommenen Änderungen für diesen Zustand aufgezeichnet werden. Um die Zustandsaufzeichnung zu deaktivieren, klicken Sie auf die Aufzeichnungschaltfläche Ee341375.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(DE-DE,Expression.30).png, oder wählen Sie im Zuständespanel die Option Basis aus.

So konvertieren Sie Objekte in ein "ScrollBar"-Steuerelement

Führen Sie einen der folgenden Schritte aus, um die Vorlage eines ScrollBar-Steuerelements zu ändern:

  • Ziehen Sie ein ScrollBar-Element Ee341375.6513a026-499e-4296-8a67-7558b466bd33(DE-DE,Expression.30).png auf die Zeichenfläche, und erstellen Sie eine Kopie der Standardvorlage.

    Weitere Informationen finden Sie unter Erstellen oder Bearbeiten einer Vorlage.

  • Entwerfen Sie das Aussehen des ScrollBar-Steuerelements, indem Sie Objekte darauf ziehen oder Grafiken importieren, und wenden Sie anschließend den Befehl Steuerelement erstellen an.

Wenn Sie den Befehl Steuerelement erstellen verwenden, führen Sie diese Schritte aus, um sicherzustellen, dass Sie wirklich alle von der ScrollBar-Steuerelementvorlage benötigten Objekte erstellen:

  1. Gruppieren Sie Ihre Objekte in ein Layoutpanel, wählen Sie das Layoutpanel aus, und klicken Sie anschließend im Menü Werkzeuge auf Steuerelement erstellen.

  2. Wählen Sie im angezeigten Dialogfeld ScrollBar, benennen Sie Ihre Vorlage, und wählen Sie den Speicherort für die Vorlage aus.

    Weitere Informationen zu Speicherorten finden Sie unter Erstellen einer Ressource.

  3. Nachdem Sie auf OK geklickt haben, gelangt Microsoft Expression Blend in den Vorlagenbearbeitungsmodus und zeigt die Objekte an, aus denen Ihr ScrollBar-Steuerelement besteht.

  4. Die Vorlage eines ScrollBar-Steuerelements enthält Teile, die verwendet werden, wenn ein ScrollBar-Objekt vertikal oder horizontal ausgerichtet wird. Sie können den Objekten in Ihrer Vorlage alle Teile im Teilepanel oder nur die Teile zuweisen, die zu einer Ausrichtung des ScrollBar-Steuerelements gehören. Wenn Sie nur einen Satz von Objekten haben, aber die Vorlage für beide Ausrichtungen des ScrollBar-Steuerelements entwerfen möchten, können Sie Ihre Objekte duplizieren und neu anordnen.

    Ee341375.alert_tip(DE-DE,Expression.30).gifTipp:

    Wenn Sie nur die horizontalen Teile im Teilepanel Objekten in der Vorlage zuweisen, werden Sie aus der Zeichenfläche ausgeblendet, wenn das ScrollBar-Objekt (auf das die Vorlage angewandt wird) vertikal angezeigt wird. Um die Ausrichtung des ScrollBar-Objekts zu ändern, klicken Sie auf der Breadcrumb-Leiste am oberen Rand der Zeichenfläche auf [ScrollBar], um zum Bearbeitungsbereich des ScrollBar-Objekts zurückzukehren, stellen die Orientation-Eigenschaft auf Horizontal und kehren anschließend mit der dritten Schaltfläche der Breadcrumb-Leiste in den Vorlagenbearbeitungsmodus zurück.

  5. Um das Objekt für den VerticalRoot-Teil (oder HorizontalRoot-Teil) zu erstellen, gehen Sie folgendermaßen vor:

    1. Zeichnen Sie ein Rasterpanel Ee341375.a87ee957-7fbf-4135-a6ab-6de7e63160aa(DE-DE,Expression.30).png mit fünf Spalten (oder fünf Zeilen). Den fünf Spalten sollte jeweils die Größe Auto, Auto, Auto, * und Auto zugewiesen werden.

      Ee341375.b6e16f2c-0ce1-4bc1-919f-e135448a6bd9(DE-DE,Expression.30).png

      Weitere Informationen finden Sie unter Hinzufügen oder Entfernen einer Zeile oder Spalte und Ändern der Option für die Größenänderung einer Zeile oder Spalte.

    2. Klicken Sie mit der rechten Maustaste auf Ihr neues Grid-Objekt, zeigen Sie auf Teil von ScrollBar erstellen und klicken Sie anschließend auf VerticalRoot (oder HorizontalRoot).

  6. Der Raum, in den sich das Thumb-Objekt bewegt, wird als Spur bezeichnet. Die Spur ist kein Vorlagenteil und daher optional. Platzieren Sie ein Objekt oder Objekte, das/die das Track-Element repräsentieren soll(en), in das VerticalRoot-Objekt (oder HorizontalRoot-Objekt), entweder für alle fünf Spalten (oder Zeilen) oder nur die drei mittleren.

    Ee341375.alert_tip(DE-DE,Expression.30).gifTipp:

    Damit ein Objekt über mehrere Spalten (oder Zeilen) ausgebreitet ist, wählen Sie das Objekt aus und legen anschließend im Eigenschaftenpanel die RowSpan-Eigenschaft (oder ColumnSpan-Eigenschaft) fest.

  7. Da Thumb-Objekte ihre eigene Vorlage haben können, sollten Sie die Objekte, die Sie verwenden möchten, folgendermaßen in ein Thumb-Steuerelement konvertieren:

    1. Gruppieren Sie die Objekte, die Ihr Thumb-Objekt darstellen werden, in ein Layoutpanel.

    2. Verschieben Sie das neue Layoutpanel in die mittlere Zeile (oder Spalte) Ihres VerticalRoot-Objekts (oder HorizontalRoot-Objekts).

      Ee341375.alert_tip(DE-DE,Expression.30).gifTipp:

      Um ein Objekt in eine bestimmte Spalte (oder Zeile) zu platzieren, wählen Sie das Objekt aus und stellen Sie anschließend im Eigenschaftenpanel die Row-Eigenschaft (oder Column-Eigenschaft) ein. Die Nummer der ersten Zeile (oder Spalte) ist 0.

    3. Klicken Sie mit der rechten Maustaste auf das neue Layoutpanel, zeigen Sie auf Teil von ScrollBar erstellen, und klicken Sie anschließend auf VerticalThumb (oder HorizontalThumb).

    4. Wählen Sie im Dialogfeld Teil erstellen den Speicherort für die Vorlage aus.

    5. Im Vorlagenbearbeitungsmodus für das neue Thumb-Objekt können Sie weiterhin Änderungen vornehmen, beispielsweise Status im Zuständepanel auswählen, um das Aussehen des Thumb-Objekts in diesen Status zu bearbeiten. Wenn Sie einen Rand im Thumb-Objekt haben möchten, stellen Sie am Stammobjekt die Margin-Eigenschaften ein.

    6. Gehen Sie für das ScrollBar-Element in den Vorlagenbearbeitungsmodus zurück, indem Sie im Panel Objekte und Zeitachsen auf Zurück zum AnfangEe341375.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(DE-DE,Expression.30).png klicken oder auf der Breadcrumb-Leiste am unteren Rand der Zeichenfläche auf VerticalThumb (oder HorizontalThumb) klicken.

    7. Stellen Sie die Width- und Height-Eigenschaft des Thumb-Objekts auf Auto, stellen Sie die MinHeight-Eigenschaft (oder MinWidth-Eigenschaft) auf einen Wert größer als 0 und die Margin-Eigenschaften auf 0.

  8. Wenn Sie möchten, dass der Benutzer an jedem Ende des Track-Elements auf eine Schaltfläche klicken kann, um das Thumb-Objekt in kleinen Schritten zu verschieben, gehen Sie folgendermaßen vor:

    1. Gruppieren Sie die Objekte, die Sie für die Schaltfläche zum Verkleinern verwenden möchten, in einem Layoutpanel.

    2. Verschieben Sie das Layoutpanel in die erste Zeile des VerticalRoot-Objekts (oder die erste Spalte des HorizontalRoot-Objekts).

    3. Klicken Sie mit der rechten Maustaste auf das Layoutpanel, zeigen Sie auf Teil von ScrollBar erstellen, und klicken Sie anschließend auf VerticalSmallDecrease (oder HorizontalSmallDecrease).

    4. Wählen Sie im Dialogfeld Teil erstellen den Speicherort für die Vorlage aus.

    5. Im Vorlagenbearbeitungsmodus für das neue RepeatButton-Objekt können Sie weiterhin Änderungen vornehmen, beispielsweise das ContentPresenter-Objekt löschen. Wenn Sie einen Rand im RepeatButton-Objekt haben möchten, stellen Sie am Stammobjekt die Margin-Eigenschaften ein.

    6. Gehen Sie für das ScrollBar-Element in den Vorlagenbearbeitungsmodus zurück, indem Sie im Panel Objekte und Zeitachsen auf Zurück zum AnfangEe341375.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(DE-DE,Expression.30).png klicken oder auf der Breadcrumb-Leiste am unteren Rand der Zeichenfläche auf VerticalSmallDecrease (oder HorizontalSmallDecrease) klicken.

    7. Passen Sie die Eigenschaften im Eigenschaftenpanel unter Layout an, damit das RepeatButton-Objekt an der gewünschten Stelle angezeigt wird. Falls die Objekte hinter anderen Objekten verborgen sind, möchten Sie sie möglicherweise neu anordnen.

      Weitere Informationen finden Sie unter Ändern der Ebenenreihenfolge von Objekten.

    8. Wiederholen Sie diese Schritte für das VerticalSmallIncrease-Objekt (oder dasHorizontalSmallIncrease-Objekt), indem Sie das Objekt in die letzte Zeile des VerticalRoot-Objekts (oder die letzte Spalte des HorizontalRoot-Objekts) verschieben.

  9. Um es dem Benutzer zu ermöglichen, auf jeder Seite des Thumb-Objekts auf das Track-Element zu klicken, um es in großen Schritten zu verschieben, gehen Sie folgendermaßen vor:

    1. Ziehen Sie ein RepeatButton-Steuerelement in jede Zeile (oder Spalte) auf jeder Seite des Thumb-Objekts.

    2. Klicken Sie mit der rechten Maustaste auf das RepeatButton-Objekt, das den Wert des ScrollBar-Objekts verringern wird, zeigen Sie auf Teil von ScrollBar erstellen, und klicken Sie anschließend auf VerticalLargeDecrease (oder HorizontalLargeDecrease).

    3. Klicken Sie mit der rechten Maustaste auf das RepeatButton-Objekt, das den Wert des ScrollBar-Objekts erhöhen wird, zeigen Sie auf Teil von ScrollBar erstellen, und klicken Sie anschließend auf VerticalLargeIncrease (oder HorizontalLargeIncrease).

    4. Wenn die RepeatButton-Objekte nicht sichtbar sein sollen, können Sie ihre Opacity-Eigenschaften auf 0 setzen.

      Ee341375.alert_tip(DE-DE,Expression.30).gifTipp:

      Optional können Sie vorhandene Objekte in RepeatButton-Steuerelementvorlagen konvertieren, wie Sie es für die VerticalSmallDecrease-Objekte (oder die HorizontalSmallDecrease-Objekte) getan haben. Vergewissern Sie sich, dass Sie die konvertierten RepeatButton-Objekte in die Zeilen (oder Spalten) auf beiden Seiten des Thumb-Objekts verschieben.

  10. Sie können die Vorlage in diesem Modus weiter bearbeiten. Fügen Sie beispielsweise Objekte hinzu, bearbeiten Sie sie, oder wählen Sie im Zuständepanel einen Status aus, um das Aussehen der Vorlage in diesem Status zu bearbeiten.

  11. Sie können einige der Pinseleigenschaften von Objekten in der Vorlage an folgende Eigenschaften des ScrollBar-Objekts binden, das schließlich die Vorlage verwenden wird:

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

    Weitere Informationen finden Sie unter Übernehmen von Objekteigenschaften für die Vorlage.

  12. Um den Vorlagenbearbeitungsmodus zu beenden, klicken Sie auf der Breadcrumb-Leiste am oberen Rand der Zeichenfläche auf [ScrollBar], oder klicken Sie im Panel Objekte und Zeitachsen auf Zurück zum AnfangEe341375.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(DE-DE,Expression.30).png.

    Weitere Informationen zur Anwendung der neuen ScrollBar-Vorlage auf weitere ScrollBar-Objekte finden Sie unter Anwenden oder Entfernen einer Ressource.

Verweise

Detaillierte Informationen über die Eigenschaften und Ereignisse des Microsoft Silverlight-ScrollBar-Steuerelements finden Sie in der Silverlight Steuerelementgalerie (möglicherweise in englischer Sprache) in MSDN.

Siehe auch

Aufgaben

Binden eines Objekts an Benutzereingaben oder andere interne Werte

Konzepte

Gestaltungstipps für häufig verwendete Silverlight-Steuerelemente

SimpleScrollBar-Steuerelementvorlage

Formatieren eines Steuerelements, das Vorlagen unterstützt