Formatierungstipps für das "ScrollBar"-Steuerelement

Verwenden Sie die integrierte ScrollBar -Steuerelementvorlage, um eine benutzerdefinierte ScrollBar -Vorlage (Schiebeleistenvorlage) zu erstellen. Standardmäßig sieht ein ScrollBar -Steuerelement wie folgt aus:

Teile "ScrollBar"-Vorlage

Die ScrollBar -Vorlage enthält zwei Teilegruppen: eine Gruppe für eine vertikal Schiebeleiste und eine Gruppe für eine horizontale Schiebeleiste. Die Namen der Teile erhalten entsprechend der Ausrichtung der Schiebeleiste das Präfix „vertical“ bzw. „horizontal“.

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

Teilename	Objekttyp
VerticalRoot   HorizontalRoot	FrameworkElement
VerticalSmallDecrease   HorizontalSmallDecrease	RepeatButton
VerticalLargeDecrease   HorizontalLargeDecrease	RepeatButton
VerticalThumb   HorizontalThumb	Thumb
VerticalLargeIncrease   HorizontalLargeIncrease	RepeatButton
VerticalSmallIncrease   HorizontalSmallIncrease	RepeatButton

Tipps für ScrollBar (Schiebeleiste)

Stammteil

Dieses Teil ist obligatorisch. Der Root -Teil enthält alle Elemente, aus denen die ScrollBar (Schiebeleiste) einer bestimmten Ausrichtung besteht.

Zum Erstellen eines Root -Teils erstellen Sie ein Grid namens HorizontalRoot bzw. VerticalRoot mit fünf Spalten (für die horizontale Ausrichtung) oder Zeilen (für die vertikale Ausrichtung) mit den Größeneigenschaften Auto, Auto, Auto, Star, Auto.

Ziehpunktteil (Thumb)

Dieses Teil ist obligatorisch. Der Ziehpunkt ist das bewegbare Element in der Schiebeleiste.

Um aus dem Objekt bzw. den Objekten, die die Schiebeleiste darstellen, ein Thumb -Steuerelement zu erstellen ( HorizontalThumb oder VerticalThumb ), platzieren Sie das Thumb -Teil in die mittleren Spalte bzw. Zeile des Root -Teils und legen die Eigenschaften Width und Height des Thumb -Teils in einer Weise fest, dass sich die Spalte bzw. Zeile in ihrer Größe an diejenige des Ziehpunkts anpasst.

Legen Sie keine Margin -Eigenschaften für den Ziehpunkt fest. Dasselbe Ergebnis erreichen Sie, wenn Sie die Ränder des Stammobjekts der Thumb -Vorlage festlegen.

Spur

Der Raum, in dem sich der Ziehpunkt bewegt, wird als Spur bezeichnet. Die Spur wird nicht als Teil betrachtet und ist optional.

Wenn Sie eine Spur miteinbeziehen möchten, platzieren Sie die die Spur repräsentierenden Objekte in das Root -Teil – entweder alle Spalten bzw. Zeilen umfassend oder lediglich die drei mittleren Spalten bzw. Zeilen umfassend.

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

Verschieben des Ziehpunkts entlang der Spur in großen Schritten

Wenn Sie dem Benutzer die Möglichkeit geben möchten, auf beiden Seiten des Ziehpunkts auf die Spur zu klicken, um diesen in größeren Schritten zu verschieben, platzieren Sie ein RepeatButton -Steuerelement in die beiden Spalten bzw. Zeilen auf der einen und der anderen Seite des Thumb -Teils. Nennen Sie diese Steuerelemente VerticalLargeDecrease und VerticalLargeIncrease (oder HorizontalLargeDecrease und HorizontalLargeIncrease ). Damit die RepeatButtons -Steuerelemente zwar funktionieren, aber vom Benutzer nicht zu sehen sind, müssen Sie die Opacity auf Null setzen. Andernfalls können Sie eine Vorlage auf die RepeatButton -Steuerelemente anwenden, die ein einziges Objekt mit einer Opacity (Deckkraft) von null enthält.

Verschieben des Ziehpunkts entlang der Spur in kleinen Schritten

Wenn Sie möchten, dass der Benutzer an jedem Ende der Spur auf eine Schaltfläche klicken kann, um den Ziehpunkt in kleinen Schritten zu verschieben, erstellen Sie aus den Objekten, die diese Schaltflächen repräsentieren, RepeatButton -Steuerelemente und nennen Sie sie VerticalSmallDecrease und VerticalSmallIncrease (bzw. HorizontalSmallDecrease und HorizontalSmallIncrease ). Platzieren Sie diese in die zwei äußeren Spalten bzw. Zeilen.

Zustände des ScrollBar-Steuerelements

Sie können mit der ScrollBar -Steuerelementvorlage auch Zustände verwenden. Standardmäßig kann das ScrollBar -Steuerelement (Schiebeleistensteuerelement) einen der drei folgenden Zustände in der Statusgruppe CommonStates (Allgemeine Zustände) annehmen:

Zustandsname	Beschreibung
Normal	Darstellung des ScrollBar -Steuerelements, wenn es keine Interaktion mit dem Steuerelement gibt
MouseOver	Darstellung des ScrollBar -Steuerelements, wenn der Mauszeiger über ein Steuerelement bewegt wird
Disabled	Darstellung des ScrollBar -Steuerelements, wenn für die IsEnabled -Eigenschaft False festgelegt ist

Tipp:
Öffnen Sie das Zuständepanel, während Sie eine ScrollBar -Vorlage ändern, um die verfügbaren Zustände anzuzeigen.

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 der Zeichenfläche auf den Aufzeichnungsmodusindikator , oder wählen im Zuständepanel die Option Base (Basis)  aus.

Weitere Informationen finden Sie unter Definieren unterschiedlicher visueller Zustände für ein Steuerelement.

Vorlagenbindung

Sie können die Vorlagenbindung mit folgenden Eigenschaften verwenden: Background , BorderBrush , Foreground , BorderThickness oder Padding . Weitere Informationen finden Sie unter Übernehmen von Objekteigenschaften für die Vorlage.

So konvertieren Sie Objekte in ein ScrollBar-Steuerelement

Die folgende Abbildung zeigt den designerischen Aufbau („Comp“) einer Schiebeleiste mit den Zuständen MouseOver und Pressed (Gedrückt) für die Teile VerticalThumb , VerticalSmallDecrease und VerticalSmallIncrease :

Normal

MouseOver

Pressed (Gedrückt)

Disabled (Deaktiviert)

In diesem Beispiel wird der in Schritt 1 des folgenden Verfahrens aufgeführte XAML-Code verwendet. Dieser Code entspricht den in den zuvor abgebildeten Grafiken verwendeten Beispielen zum Erstellen einer benutzerdefinierten Schiebeleiste mithilfe der ScrollBar -Steuerelementvorlage.

Tipp:
Klicken Sie auf Geteilte Ansicht, um die Änderungen sowohl in der Designansicht als auch in der Codeansicht zu sehen, während Sie die Schritte dieses Verfahrens ausführen.

1. Öffnen Sie ein neues Microsoft Silverlight-Projekt. Suchen Sie in der Codeansicht den folgenden Code und löschen Sie den schließenden Schrägstrich (/).

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. Kopieren Sie den folgenden Code in das neue Projekt – nach dem Code, den Sie in Schritt 1 gefunden haben.

   <Grid x:Name="verticalscrollbar" Width="17" Height="146" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" VerticalAlignment="Top"/>
      <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
         Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
         VerticalAlignment="Bottom" />
   </Grid>
   

3. Fügen Sie dem Code,den Sie gerade eingefügt haben, ein schließendes Grid -Tag hinzu (</Grid>).

4. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf verticalscrollbar , und klicken Sie anschließend auf Steuerelement erstellen. Klicken Sie im Dialogfeld Steuerelement erstellen auf ScrollBar und anschließend auf OK.

   In der Codeansicht sehen Sie, dass der zuvor von Ihnen eingefügte Code durch den Code für ein neues ScrollBar-Steuerelement ersetzt wurde (suchen Sie nach dem Codeabschnitt, der mit <Grid x:Name="verticalscrollbar"> beginnt). Außerdem wurde das verticalscrollbar von Microsoft Expression Blend zu einer Vorlage füe einen neuen ScrollBar -Stil konvertiert und diese Vorlage auf das verticalscrollbar -Objekt angewendet (suchen Sie nach <Style x:Key="ScrollBarStyle1" TargetType="ScrollBar">).

   Tipp:
   Beachten Sie, dass im Panel Objekte und Zeitachsen der Eintrag UserControl (Benutzersteuerelement) durch Vorlage ersetzt wurde.

5. Um verticalscrollbar als Vorlagenstamm zu definieren, klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf verticalscrollbar , und klicken Sie anschließend auf Teil von ScrollBar erstellen und VerticalRoot. Beachten Sie, dass verticalscrollbar in VerticalRoot umbenannt wurde.

6. Um dem Root -Teileraster Zeilen hinzuzufügen, klicken Sie in der Designansicht auf das blaue Lineal links neben dem Steuerelement. Neue Zeilen werden hinzugefügt, wie in der folgenden Abbildung gezeigt:

   

   Fügen Sie die Zeilen hinzu, wie angegeben, damit die Teile in die richtigen Zeilen platziert werden. Track (Spur) weist eine RowSpan -Eigenschaft von 5 auf; smalldecrease befindet sich in Row (Zeile) 0; thumb befindet sich in Row (Zeile ) 2; smallincrease befindet sich in Row (Zeile) 4.

   Hinweis:
   Die Nummerierung beginnt bei 0, sodass die fünf Zeilen von 0 bis 4 nummeriert sind.

   Definieren Sie nun die grafischen Elemente als Teile der Vorlage. Während Sie die Elemente definieren, können Sie auch bestimmten Eigenschaften Werte zuweisen.

7. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf smalldecrease , und klicken Sie anschließend auf Teil von ScrollBar erstellen und VerticalSmallDecrease. Klicken Sie im Dialogfeld Teil erstellen auf OK.

   Aus dem smalldecrease -Element wurde nun ein RepeatButton -Typ erstellt, der das VerticalSmallDecrease -Teil der ScrollBar -Steuerkontrollvorlage darstellt.

8. Standardmäßig wird in Expression Blend ein ContentPresenter für das Teil erstellt. In diesem Beispiel wird der ContentPresenter nicht verwendet; Sie können dieses Element also löschen, indem Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf ContentPresenter klicken und anschließend auf Löschen klicken.

9. Um die Eigenschaften des VerticalSmallDecrease -Teils festzulegen, klicken Sie im Panel Objekte und Eigenschaften auf smalldecrease und öffnen dann das Eigenschaftenpanel. Legen Sie in der Kategorie Layout die Breiteund Höhe auf 7 fest.

10. Klicken Sie im Zuständepanel auf MouseOver, um dem VerticalSmallDecrease -Teil Zustände hinzuzufügen. Legen Sie im Eigenschaftenpanel für die Fill-Eigenschaft (Füllen) den Wert #FFCCCCCC fest. Kehren Sie in das Zuständepanel zurück, und klicken Sie anschließend auf Base (Basis), um die Zustandsaufzeichnung zu beenden.

    Hinweis:
    Sie haben auch die Möglichkeit, die Zustandsaufzeichnung zu beenden, indem Sie auf den Aufzeichnungsmodusindikator  in der oberen linken Ecke des Dokumentfensters klicken.

    Klicken Sie im Zuständepanel auf Pressed (Gedrückt). Legen Sie im Eigenschaftenpanel für die Fill-Eigenschaft (Füllen) den Wert #FFE5E5E5 fest. Kehren Sie in das Zuständepanel zurück, und klicken Sie anschließend auf Base (Basis).

    Klicken Sie im Zuständepanel auf Normal, klicken Sie auf Übergang hinzufügen, und klicken Sie anschließend auf den Übergang Normal to MouseOver. Geben Sie im Feld Übergangsdauer den Wert 0,2 ein, und klicken Sie auf Base (Basis).

11. Klicken Sie im Panel Objekte und Zeitachsen auf Grid. Klicken Sie im Eigenschaftenpanel in der Kategorie Pinsel auf die Registerkarte Pinsel mit Volltonfarbe, und legen Sie für die Alpha-Eigenschaft 1 fest.

12. Kehren Sie zurück zum Vorlagenbearbeitungsmodus des ScrollBar -Steuerelements [ScrollBarStyle1 (ScrollBar-Vorlage)], indem Sie im Panel Objekte und Zeitachsen auf Bereich auf "<Bereichsname>" zurücksetzen  klicken, oder indem Sie in der Breadcrumb-Leiste oben in der Zeichenfläche auf VerticalSmallDecrease klicken.

    Wiederholen Sie die Schritte 7 bis 12 für das smallincrease -Element.

13. Um thumb als Vorlagenteil zu definieren, klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf thumb , und klicken Sie anschließend auf Teil von ScrollBar erstellen und Vertical Thumb (vertikale Schiebeleiste). Klicken Sie im Dialogfeld Teil erstellen auf OK.

14. Um die Eigenschaften des VerticalThumb festzulegen, kehren Sie zurück zum Vorlagenbearbeitungsmodus des ScrollBar -Steuerelements [ScrollBarStyle1 (ScrollBar-Vorlage)], indem Sie auf Bereich auf "<Bereichsname>" zurücksetzen  und anschließend im Panel Objekte und Zeitachsen auf VerticalThumb (Vertikale Schiebeleiste) klicken. Legen Sie im Eigenschaftenpanel in der Kategorie Layout die Breiteund Höhe auf 7 fest. Legen Sie die Werte für Margin (Rand) wie folgt fest:

    • Left: 5

    • Right: 5

    • Top: 0

    • Bottom: 0

    Klicken Sie auf Erweiterte Eigenschaften und legen Sie für MinHeight (Mindesthöhe) den Wert 7 fest. Auf diese Weise wird dem Ziehpunkt eine Mindesthöhe zugewiesen, sodass er immer sichtbar ist.

15. Kehren Sie zur Thumb -Vorlage [ThumbStyle1(ThumbTemplate)] zurück, um dem thumb -Teil Zustände zuzuordnen, indem Sie in der Breadcrumb-Leiste oben in der Zeichenfläche auf thumb (Ziehpunkt) klicken. Klicken Sie im Zuständepanel auf MouseOver. Legen Sie im Eigenschaftenpanel für die Fill-Eigenschaft (Füllen) den Wert #FFCCCCCC fest. Kehren Sie in das Zuständepanel zurück, und klicken Sie anschließend auf Base (Basis).

    Klicken Sie im Zuständepanel auf Pressed (Gedrückt). Legen Sie im Eigenschaftenpanel für die Fill-Eigenschaft (Füllen) den Wert #FFE5E5E5 fest. Kehren Sie in das Zuständepanel zurück, und klicken Sie anschließend auf Base (Basis).

    Klicken Sie im Zuständepanel auf Normal, klicken Sie auf Übergang hinzufügen, und klicken Sie anschließend auf den Übergang Normal to MouseOver. Geben Sie im Feld Übergangsdauer den Wert 0,2 ein, und klicken Sie auf Base (Basis).

16. Kehren Sie zur Vorlage ScrollBarStyle1 (ScrollBar-Vorlage) zurück, indem Sie im Panel Objekte und Zeitachsen auf Bereich auf "<Bereichsname>" zurücksetzen  klicken. Klicken Sie im Panel Objekte und Zeitachsen auf VerticalRoot (Vertikales Stammteil). Doppelklicken Sie im Teilepanel auf VerticalLargeDecrease, um dieses Teil zu erstellen und als untergeordnetes Teil von VerticalRoot zu definieren. Legen Sie im Eigenschaftenpanel für die Row-Eigenschaft (Zeilen) den Wert 1 und für Opacity (Deckkraft) den Wert 0 fest.

17. Klicken Sie im Panel Objekte und Zeitachsen auf VerticalRoot (Vertikales Stammteil). Doppelklicken Sie im Teilepanel auf VerticalLargeIncrease, um dieses Teil zu erstellen und als untergeordnetes Teil von VerticalRoot zu definieren. Legen Sie im Eigenschaftenpanel für die Row-Eigenschaft (Zeilen) den Wert 3 und für Opacity (Deckkraft) den Wert 0 fest.

18. Klicken Sie für die Zeilen 0, 1, 2 und 4 zwei Mal auf das Sternsymbol , bis das Auto-Symbol  angezeigt wird. Stellen Sie sicher, dass für Zeile 3 das Sternsymbol angezeigt wird. Dies legt die Zeilenhöhe folgendermaßen fest: Auto, Auto, Auto, Stern und Auto. Klicken Sie auf jeden der Unterteiler mit automatischer Größenänderung und anschließend im Eigenschaftenpanel auf Erweiterte Eigenschaften einblenden. Klicken Sie rechts neben dem Wert für MinHeight (Mindesthöhe) auf Erweiterte Optionen, und klicken Sie dann auf Zurücksetzen.

    

19. Klicken Sie im Panel Objekte und Zeitachsen auf VerticalRoot (Vertikales Stammteil). Klicken Sie im Zuständepanel auf Disabled (Deaktiviert). Legen Sie im Eigenschaftenpanel für die Opacity-Eigenschaft (Deckkraft) den Wert 50 fest.

20. Erstellen Sie Ihr Projekt durch Drücken der Tasten STRG+UMSCHALT+B. Sobald die Erstellung vollständig ist, führen Sie das Projekt durch Drücken der F5-TASTE aus, und testen Sie die Schiebeleiste.

Verweise

Ausführliche Informationen zu den Eigenschaften und Ereignissen des Silverlight ScrollBar -Steuerelements finden Sie in der Silverlight Control Gallery  in MSDN (möglicherweise in englischer Sprache).

Siehe auch

Aufgaben

Binden eines Objekts an Benutzereingaben oder andere interne Werte

Konzepte

Gestaltungstipps für häufig verwendete Silverlight-Steuerelemente
SimpleScrollBar
Formatieren eines Steuerelements, das Vorlagen unterstützt

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.