Formatierungstipps für Schieberegler

Sie können die integrierte Slider -Steuerelementvorlage verwenden, um eine benutzerdefinierte Slider -Vorlage zu erstellen. Standardmäßig sieht die Slider -Steuerelementvorlage wie folgt aus:

Teile der "Slider"-Steuerelementvorlage

Die Slider -Vorlage enthält zwei Teilsätze: einen Satz für einen vertikalen Schieberegler sowie einen Satz für einen horizontalen Schieberegler. Die Teilnamen sind mit dem Präfix "vertikal" bzw. "horizontal" qualifiziert, je nach Ausrichtung des Schiebereglers.

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

Teilename	Objekttyp
HorizontalTemplate   VerticalTemplate	FrameworkElement
HorizontalTrackLargeChangeDecreaseRepeatButton   VerticalTrackLargeChangeDecreaseRepeatButton	RepeatButton
HorizontalThumb   VerticalThumb	Thumb
HorizontalTrackLargeChangeIncreaseRepeatButton   VerticalTrackLargeChangeIncreaseRepeatButton	RepeatButton

Schiebereglertipps

Template-Teil

Dieses Teil ist obligatorisch. Das template -Teil enthält alle Elemente, die das Slider -Steuerelement in einer bestimmten Ausrichtung bilden.

Zum Erstellen eines template -Teils erstellen Sie ein Raster mit dem Namen HorizontalTemplate bzw. VerticalTemplate , das drei Spalten (für die horizontale Ausrichtung) bzw. Zeilen (für die vertikale Ausrichtung) enthält, die die Größen Auto, Auto und Stern haben.

Thumb-Teil

Dieses Teil ist obligatorisch. Das Thumb-Element ist das verschiebbare Element im Schieberegler.

Um die Objekte, die das Thumb-Element darstellen, in ein Thumb -Steuerelement ( HorizontalThumb bzw. VerticalThumb ) zu konvertieren, platzieren Sie das Thumb -Teil in die mittlere Spalte (oder Zeile) des Root -Teils. Legen Sie dann die Eigenschaften Width und Height des Thumb -Teils fest, sodass die Größe der Spalte (oder Zeile) angepasst wird, damit das Thumb-Objekt hineinpasst.

Track-Element

Der Raum, in den sich das Thumb-Objekt bewegt, wird als Track-Element bezeichnet. Das Track-Element ist kein Teil und ist optional.

Wenn Sie ein Track-Element integrieren möchten, platzieren Sie die Objekte, die das Track-Element darstellen, in das Template -Teil, wobei Sie alle drei Spalten (oder Zeilen) einbeziehen.

Verschieben des Thumb-Elements in großen Schritten entlang des Track-Elements

Damit Benutzer auf das Track-Element auf beiden Seiten des Thumb-Elements klicken können, um es in großen Schritten zu verschieben, müssen Sie RepeatButton -Steuerelemente (Schaltflächen zum Wiederholen) in den beiden Spalten (bzw. Zeilen) auf beiden Seiten des Thumb -Teils platzieren und diesen die Namen VerticalLargeDecrease und VerticalLargeIncrease (bzw. HorizontalLargeDecrease und HorizontalLargeIncrease ) geben. Damit die RepeatButton -Steuerelemente zwar funktionieren, aber vom Benutzer nicht zu sehen sind, müssen Sie deren Deckkraft ( Opacity ) auf Null setzen. Alternativ dazu wenden Sie eine Vorlage an, die ein einzelnes Objekt mit null Opacity für die RepeatButton -Steuerelemente enthält.

Status der "Slider"-Steuerelementvorlage

Standardmäßig kann das Slider -Steuerelement in der CommonStates-Statusgruppe einen der drei folgenden Status annehmen. Die Statusgruppe können Sie im Zuständepanel anzeigen, während Sie eine Slider -Vorlage ändern:

Zustandsname	Beschreibung
Normal	Die Darstellung des Slider -Steuerelements, wenn keine Interaktion stattfindet.
MouseOver	Die Darstellung des Slider -Steuerelements, wenn der Benutzer den Zeiger über das Steuerelement bewegt.
Disabled	Die Darstellung des Slider -Steuerelements, wenn die IsEnabled -Eigenschaft auf False festgelegt ist.

Das Slider -Steuerelement kann sich in einem von zwei Status der FocusStates-Statusgruppe befinden:

Zustandsname	Beschreibung
Unfocused	Die Darstellung des Slider -Steuerelements, wenn sich kein Tastaturfokus darauf befindet.
Focused	Die Darstellung des Slider -Steuerelements, wenn sich ein Tastaturfokus darauf befindet. Beispiel: Ein Benutzer drückt die TAB-TASTE, um die Objekte in der Anwendung zu durchlaufen, bis sich ein Tastaturfokus auf dem Slider -Steuerelement befindet.

Tipp:

Eine Statusgruppe enthält die visuellen Status, die Teil derselben logischen Kategorie sind und die nicht gleichzeitig angezeigt werden können. Beispiel: Die Gruppe CommonStates beinhaltet Zustände, die sich auf die Benutzerinteraktion mit einem Eingabegerät wie der Maus beziehen. Nur ein Status in einer Statusgruppe kann jeweils zu einem Zeitpunkt angezeigt werden. Ein Status aus einer anderen Gruppe kann jedoch gleichzeitig mit einem Status aus einer weiteren Statusgruppe angezeigt werden.

Wenn Sie einen Status auswählen, wird die Statusaufzeichnung aktiviert, und alle von Ihnen vorgenommenen Änderungen werden für diesen Status aufgezeichnet. Um die Statusaufzeichnung zu deaktivieren, klicken Sie auf die Schaltfläche ****Aufzeichnung ****, oder wählen Sie im Zuständepanel die Option Basis. Um die Darstellung Ihres Steuerelements zu bearbeiten, wenn zwei separate Status aktiv sind, können Sie eine Vorschau eines Status in einer Statusgruppe anheften, während Sie einen Status in einer anderen Statusgruppe bearbeiten.

Vorlagenbindung

Sie können die Eigenschaften Background , BorderBrush , Foreground , BorderThickness und Padding an Vorlagen binden. Weitere Informationen finden Sie unter Übernehmen von Objekteigenschaften für die Vorlage.

So konvertieren Sie Objekte in ein "Slider"-Steuerelement

Das folgende Bild ist eine Entwurfszusammenfassung eines Schiebereglers, das MouseOver - und Pressed -Status des HorizontalThumb -Teils enthält:

Normal

MouseOver

Pressed

Disabled

In diesem Beispiel wird der XAML-Code in Schritt 2 der folgenden Prozedur verwendet, der der Grafiken oben entspricht, um eine benutzerdefinierte Schiebeleiste mithilfe der Slider -Steuerelementvorlage zu erstellen.

Tipp:
Klicken Sie auf Geteilte Ansicht, um die Änderungen sowohl in der Design- als auch in der Codeansicht während der Bearbeitung dieser Prozedur anzuzeigen.

1. Suchen Sie in der Codeansicht nach folgendem Code, und löschen Sie dann den schließenden Schrägstrich (/).

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

2. Kopieren Sie folgenden Code in Ihr neues Projekt, und fügen Sie ihn dann hinter dem Code ein, den Sie in Schritt 1 gesucht haben.

   <Grid Width="146" Height="17" >
   <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" Margin="0,6" />
   <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Width="7"/>
   </Grid>
   

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

4. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf Grid , und klicken Sie dann auf Steuerelement erstellen. Klicken Sie im Dialogfeld Steuerelement erstellen auf Slider, und klicken Sie dann auf OK.

   Beachten Sie in der Codeansicht, dass der Code, die Sie im vorherigen Schritt eingefügt haben, durch den Code für ein neues Slider-Steuerelement ersetzt wurde. Darüber hinaus wurden in Expression Blend das Grid in eine Vorlage für eine neue Slider -Formatvorlage umgewandelt und diese Vorlage auf das Grid angewendet.

5. Klicken Sie in der Designansicht auf das blaue Lineal links neben dem Steuerelement, um dem Template -Teilraster Spalten bzw. Zeilen hinzuzufügen, wie im folgenden Bild veranschaulicht wird:

   

   Wenn Sie die Zeilen wie gezeigt hinzufügen, werden die Teile in den richtigen Zeilen platziert. Track erstreckt sich über 3 Spalten ( ColumnSpan = 3), und thumb befindet sich in Column 1.

   Hinweis:
   Die Nummerierung beginnt bei 0, sodass die 3 Spalten von 0 bis 2 nummeriert sind.

6. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf Raster, klicken Sie auf Teil von Slider erstellen, und klicken Sie dann auf HorizontalTemplate, um als Stammelement der Vorlage ein HorizontalTemplate-Teil zu verwenden. Beachten Sie, dass Grid in HorizontalTemplate umbenannt wurde.

7. Klicken Sie im Panel Objekte und Zeitachsen mit der rechten Maustaste auf thumb , klicken Sie auf Teil von Slider erstellen, und klicken Sie dann auf HorizontalThumb.

8. So fügen Sie dem HorizontalThumb-Teil Status hinzu

   1. Klicken Sie im Panel Objekte und Zeitachsen auf Ziehpunkt.

   2. Klicken Sie im Zuständepanel auf MouseOver.

   3. Legen Sie im Eigenschaftenpanel für die Fill-Eigenschaft den Wert #FFCCCCCC fest.

   4. Kehren Sie zum Zuständepanel zurück, und klicken Sie dann auf Basis, um die Statusaufzeichnung zu beenden.

      Hinweis:
      Sie können die Statusaufzeichnung auch durch Klicken auf Anzeige für Aufzeichnungsmodus  in der oberen linken Ecke des Dokumentfensters beenden.

9. Klicken Sie im Zuständepanel mit der rechten Maustaste auf MouseOver, klicken Sie auf Zustand kopieren in, und klicken Sie dann auf Pressed.

10. Setzen Sie bei gleichzeitiger Auswahl des Pressed-Zustands im Zuständepanel im Eigenschaftenpanel und dort in der Kategorie Transformation die Werte X und Y auf 1 , um den Versatz zu erstellen. Klicken Sie auf Basis, um die Statusaufzeichnung zu beenden.

11. Kicken Sie im Zuständepanel auf Normal. Klicken Sie auf Übergang hinzufügen, und klicken Sie dann auf Normal in MouseOver. Setzen Sie Übergangsdauer auf .2 . Klicken Sie auf Basis, um die Statusaufzeichnung zu beenden.

12. Kehren Sie in den Vorlagenbearbeitungsmodus für das Slider -Steuerelement [SliderStyle1 (Slider-Vorlage)] zurück, indem Sie im Panel Objekte und Zeitachsen auf Bereich auf "[SliderStyle1 (Slider-Vorlage)]" zurücksetzen  klicken.

13. Klicken Sie im Panel Objekte und Zeitachsen auf HorizontalThumb. Klicken Sie im Eigenschaftenpanel in der Kategorie Layout neben Margin auf Erweiterte Optionen und anschließend auf Zurücksetzen.

14. Klicken Sie im Panel Objekte und Zeitachsen auf HorizontalTemplate. Doppelklicken Sie im Teilepanel auf das HorizontalTrackLargeChangeDecreaseRepeatButton-Teil, um dieses Teil als untergeordnetes Element der HorizontalTemplate zu erstellen. Setzen Sie im Eigenschaftenpanel in der Kategorie Darstellung die Deckkraft auf 0 .

15. Klicken Sie im Panel Objekte und Zeitachsen auf HorizontalTemplate. Doppelklicken Sie im Teilepanel auf das HorizontalTrackLargeChangeIncreaseRepeatButton-Teil, um dieses Teil als untergeordnetes Element der HorizontalTemplate zu erstellen. Setzen Sie im Eigenschaftenpanel in der Kategorie Darstellung die Deckkraft auf 0 .

16. Klicken Sie für die Spalten 0 und 1 zweimal auf das Symbol Stern , bis das Symbol Auto  erscheint. Stellen Sie für Spalte 2 sicher, dass das Symbol Stern angezeigt wird. Klicken Sie auf die Trennlinie der mittleren Spalte und dann im Eigenschaftenpanel auf Erweiterte Eigenschaften einblenden. Klicken Sie auf die Schaltfläche Erweiterte Optionen rechts neben dem Wert für MinHeight, und klicken Sie auf Zurücksetzen.

    

17. Klicken Sie im Panel Objekte und Zeitachsen auf HorizontalTemplate. Kicken Sie im Zuständepanel auf Deaktiviert. Setzen Sie im Eigenschaftenpanel in der Kategorie Darstellung die Deckkraft auf 50 .

18. Erstellen Sie Ihr Projekt (STRG+UMSCHALT+B), und führen Sie es nach der Erstellung aus, indem Sie F5 drücken. Testen Sie dann die Schiebeleiste.

Verweise

Ausführliche Informationen zu den Eigenschaften und Ereignissen des Silverlight- Slider -Steuerelements finden Sie in derSilverlight Control Gallery  in MSDN.

Siehe auch

Aufgaben

Binden eines Objekts an Benutzereingaben oder andere interne Werte

Konzepte

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

Copyright © 2011 Microsoft Corporation. Alle Rechte vorbehalten.