Formatierungstipps für das "Slider"-Steuerelement

  • Artikel

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

Der Slider-Steuerelement stellt einen Wertebereich dar, in dem der aktuelle Wert durch die Position eines Objekts vom Typ Thumb dargestellt wird.

So wie alle Steuerelemente kann auch das Slider-Steuerelement bearbeitet werden, um ein unterschiedliches Aussehen von der Standarddarstellung zu erhalten. Standardmäßig sieht das Slider-Steuerelement wie folgt aus:

Ee371160.42dd6b3d-3876-435a-b401-1f9d2c815454(DE-DE,Expression.30).png

Interessante Eigenschaften des "Slider"-Steuerelements

Sie können die Anzeige des Slider-Steuerelements horizontal oder vertikal anlegen, indem Sie im Eigenschaftenpanel unter Allgemeine Eigenschaften die Orientation-Eigenschaft (Ausrichtung) entsprechend festlegen. Sie können auch die Richtung der Zahlen umkehren, indem Sie die IsDirectionReversed-Eigenschaft auswählen. Geben Sie den Wertebereich an, indem Sie die Eigenschaften Minimum und Maximum 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:

  • Festlegen der Eigenschaften des Objekts   Nachdem Sie ein Slider-Objekt auf der Zeichenfläche gezeichnet haben, können Sie diese Eigenschaften des Objekts direkt festlegen. Wenn Sie möchten, dass mehrere Slider-Steuerelemente dieselben Werte verwenden, legen Sie diese Eigenschaften in einer Formatvorlage fest.

  • Festlegen der Eigenschaften in einer Formatvorlage   Wenn Sie diese Eigenschaften in der Formatvorlage Ee371160.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(DE-DE,Expression.30).png des Slider-Objekts festlegen, erhält jedes Slider-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.

Das Slider-Steuerelement ändert seine Darstellung je nachdem, in welchem Status es sich befindet. Sie können die Darstellung jedes Status im Vorlagenbearbeitungsmodus ändern, indem Sie einen Status aus dem 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 der "Slider"-Steuerelementvorlage

Das Slider-Steuerelement verwendet eine Vorlage: die "Slider"-Steuerelementvorlage. Jeder Teil der Vorlage spielt eine Rolle bei der Darstellung und beim Verhalten des Slider-Objekts, auf das die Vorlage angewandt wird.

Andere Objekte können in der Vorlage vorhanden sein, um die Darstellung des Slider-Steuerelements zu verschönern. Die in der folgenden Tabelle aufgeführten Teile sind jedoch per Festverknüpfung an sein Verhalten gebunden.

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

Ee371160.7db0aaf3-dcb4-427a-9ebc-3d192e34df54(DE-DE,Expression.30).png

Teilename

Objekttyp

Beschreibung

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

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

FrameworkElement

Ein Layoutpanel, das die Objekte enthält, mit denen die Darstellung des Slider-Steuerelements bei horizontaler (oder vertikaler) Ausrichtung definiert werden.

Dieses Teil ist obligatorisch.

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

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

RepeatButton

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

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

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

Thumb

Ein Objekt, dessen Position entlang einer Spur den aktuellen Wert des Slider-Steuerelements darstellt.

Dieses Teil ist obligatorisch.

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

Ee371160.1aa736bd-cd0d-4514-a5e4-b495d11d4870(DE-DE,Expression.30).png VerticalTrackLargeChangeIncreaseRepeatButton

RepeatButton

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

Status der "Slider"-Steuerelementvorlage

Standardmäßig kann das Slider-Steuerelement einen der drei folgenden Status aus der CommonStates-Statusgruppe haben, die Sie im Zuständepanel beim Bearbeiten einer Slider-Steuerelementvorlage anzeigen können:

Zustandsname

Beschreibung

Normal

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

MouseOver

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

Disabled (Deaktiviert)

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

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

Zustandsname

Beschreibung

Unfocused (Ohne Fokus)

Darstellung des Slider-Steuerelements, wenn sich der Fokus nicht auf der Tastatur befindet

Focused (Mit Fokus)

Darstellung des Slider-Steuerelements, wenn sich der Fokus auf der Tastatur befindet. Benutzer könnten z. B. die TAB-TASTE drücken, um die Objekte in Ihrer Anwendung solange zu durchlaufen, bis sich der Tastaturfokus auf dem Slider-Steuerelement befindet.
Ee371160.alert_tip(DE-DE,Expression.30).gifTipp:

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 **Ee371160.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(DE-DE,Expression.30).png, 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.

So konvertieren Sie Objekte in ein "Slider"-Steuerelement

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

  • Ziehen Sie ein Slider-Steuerelement Ee371160.bf689d92-3c74-4218-815c-e98c930ac189(DE-DE,Expression.30).png auf die Zeichenfläche, und erstellen Sie anschließend eine Kopie der Standardvorlage.

    Weitere Informationen finden Sie unter Erstellen oder Bearbeiten einer Vorlage.

  • Entwerfen Sie das Aussehen des Slider-Steuerelements, indem Sie Objekte zeichnen oder Bilder importieren, und verwenden Sie dann den Befehl Steuerelement erstellen.

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

  1. Gruppieren Sie alle Objekte, deren Darstellung Sie für Ihr Slider-Steuerelement definieren möchten, in einem Rasterpanel.

  2. Wählen Sie das neue Grid-Objekt aus, und klicken Sie dann im Menü Werkzeuge auf Steuerelement erstellen.

  3. Wählen Sie in dem daraufhin angezeigten Dialogfeld die Option Slider aus, benennen Sie Ihre Vorlage, und wählen Sie einen Ort aus, an dem die Vorlage gespeichert werden soll.

    Weitere Informationen zu Speicherorten finden Sie unter Erstellen einer Ressource.

  4. Nachdem Sie auf OK geklickt haben, wird der Vorlagenbearbeitungsmodus von Microsoft Expression Blend gestartet und zeigt die Objekte an, aus denen Ihr vertikales Slider-Steuerelement besteht.

  5. Die Vorlage eines Slider-Steuerelements enthält Teile, die bei der horizontalen bzw. vertikalen Ausrichtung des Slider-Objekts verwendet werden. Sie können den Objekten in Ihrer Vorlage alle Teile im Teilepanel oder nur die Teile zuweisen, die zu einer Ausrichtung des Slider-Steuerelements gehören. Wenn Sie nur über eine Gruppe von Objekten verfügen, aber die Vorlage für beide Ausrichtungen des Slider-Steuerelements entwerfen möchten, können Sie Ihre Objekte duplizieren und den Duplikatsatz neu anordnen.

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

    Wenn Sie den Objekten in Ihrer Vorlage nur die vertikalen Teile im Teilepanel zuweisen, verschwinden die Objekte aus der Zeichenfläche, falls für das Slider-Objekt (aus das die Vorlage angewandt wird) auf horizontale Anzeige eingestellt ist. Um die Ausrichtung des Slider-Objekts zu ändern, klicken Sie in der Breadcrumb-Leiste am oberen Rand der Zeichenfläche auf [Slider], um zum Bearbeitungsbereich des Slider-Objekts zurückzukehren, setzen Sie die Orientation-Ausrichtung auf Vertical, und verwenden Sie dann die dritte Schaltfläche in der Breadcrumb-Leiste, um zum Vorlagenbearbeitungsmodus zurückzukehren.

  6. Führen Sie den folgenden Schritt aus, um das Objekt für das HorizontalTemplate-Teil (bzw. VerticalTemplate-Teil) zu erstellen:

    1. Zeichnen Sie ein Grid-Layoutpanel Ee371160.a87ee957-7fbf-4135-a6ab-6de7e63160aa(DE-DE,Expression.30).png mit drei Spalten (oder drei Zeilen). Die drei Spalten sollten die Größen Auto, Auto und Sterngröße (*) haben.

      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 das neue Grid-Objekt, zeigen Sie auf Teil erstellen von Slider, und klicken Sie dann auf HorizontalTemplate (bzw. VerticalTemplate).

  7. Der Raum, in den sich das Thumb-Objekt bewegt, wird als Spur bezeichnet. Die Spur ist kein Vorlagenteil und daher optional. Platzieren Sie ein beliebiges Objekt oder Objekte, die die Spur darstellen sollen, in das HorizontalTemplate- (bzw. VerticalTemplate-) Objekt, wobei Sie alle drei Spalten (oder Zeilen) einbeziehen.

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

    Damit ein Objekt mehrere Spalten (oder Zeilen) einbezieht, markieren Sie das Objekt und legen dann im Eigenschaftenpanel die RowSpan- bzw. ColumnSpan-Eigenschaft fest.

  8. Da ein Thumb-Objekt seine eigene Vorlage haben kann, sollten die Objekte, die Sie verwenden möchten, in ein Thumb-Steuerelement konvertiert werden. Gehen Sie dazu wie folgt vor:

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

    2. Verschieben Sie das neue Layoutpanel in die mittlere Spalte (oder Zeile) Ihres HorizontalTemplate- bzw. VerticalTemplate-Objekts.

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

      Um ein Objekt in eine bestimmte Spalte (oder Zeile) zu platzieren, markieren Sie das Objekt und legen dann im Eigenschaftenpanel die Column- bzw. Row-Eigenschaft fest. Die Zahl der ersten Spalte (oder Zeile) ist 0.

    3. Klicken Sie mit der rechten Maustaste auf das neue Layoutpanel, zeigen Sie auf Teil erstellen von Slider, und klicken Sie dann auf HorizontalThumb (bzw. VerticalThumb).

    4. Wählen Sie im Dialogfeld Teil erstellen den Speicherort aus, an dem die Vorlage gespeichert werden soll.

    5. Während Sie noch im Vorlagenbearbeitungsmodus für das neue Thumb-Objekt sind, können Sie weiter Änderungen daran vornehmen. Sie können beispielsweise einen Status im Zuständepanel auswählen, um die Darstellung des Thumb-Objekts in diesem Status zu ändern. Wenn Sie einen Rand im Thumb-Objekt wünschen, legen Sie die Margin-Eigenschaften für das Stammobjekt fest.

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

    7. Setzen Sie die Eigenschaften Width und Height des neuen Thumb-Objekts auf bestimmte Werte, sodass die Größe der mittleren Spalte (oder Zeile) automatisch angepasst wird, damit das Thumb-Objekt hineinpasst.

  9. Wenn Sie möchten, dass Benutzer an einem beliebigen Ende der Spur auf eine Schaltfläche klicken können, damit das Thumb-Objekt in kleinen Schritten verschoben wird, gehen Sie wie folgt 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 neue Layoutpanel in die erste Spalte des HorizontalTemplate-Objekts (oder in die erste Zeile des VerticalTemplate-Objekts).

    3. Klicken Sie mit der rechten Maustaste auf das Layoutpanel, zeigen Sie auf Teil erstellen von Slider, und klicken Sie dann auf HorizontalTrackLargeChangeDecreaseRepeatButton (bzw. VerticalTrackLargeChangeDecreaseRepeatButton).

    4. Wählen Sie im Dialogfeld Teil erstellen den Speicherort aus, an dem die Vorlage gespeichert werden soll.

    5. Während Sie im Vorlagenbearbeitungsmodus für das neue RepeatButton-Objekt sind, können Sie weiter Änderungen wie das Löschen des ContentPresenter-Objekts vornehmen. Wenn Sie einen Rand im RepeatButton-Objekt wünschen, legen Sie die Margin-Eigenschaften für das Stammobjekt fest.

    6. Kehren Sie in den Vorlagenbearbeitungsmodus für das Slider-Objekt zurück, indem Sie im Panel Objekte und Zeitachsen auf Zurück zum Anfang Ee371160.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(DE-DE,Expression.30).png oder in der Breadcrumb-Leiste am oberen Rand der Zeichenfläche auf HorizontalTrackLargeChangeDecreaseRepeatButton (bzw. VerticalTrackLargeChangeDecreaseRepeatButton) klicken.

    7. Passen Sie die Eigenschaften im Eigenschaftenpanel unter Layout so an, dass das RepeatButton-Objekt dort angezeigt wird, wo Sie es haben möchten. Evtl. sollten Sie Ihre Objekte neu sortieren, wenn diese hinter anderen Objekten versteckt liegen.

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

    8. Wiederholen Sie diese Schritte für das HorizontalTrackLargeChangeIncreaseRepeatButton-Objekt (bzw. VerticalTrackLargeChangeIncreaseRepeatButton-Objekt), wobei Sie das Objekt in die letzte Spalte des HorizontalTemplate-Objekts (oder die letzte Zeile des VerticalTemplate-Objekts) verschieben.

  10. Sie können Ihre Vorlage nun weiter in diesem Modus bearbeiten. Fügen Sie z. B. Objekte hinzu, oder löschen Sie diese, oder wählen Sie im Zuständepanel einen Status aus, um die Darstellung Ihrer Vorlage in diesem Status zu ändern.

  11. Sie sollten einige der Brush-Eigenschaften von Objekten in Ihrer Vorlage an die folgenden Eigenschaften des Slider-Objekts binden, das möglicherweise Ihre Vorlage verwendet:

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

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

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

    Weitere Informationen zum Anwenden Ihrer neuen Slider-Steuerelementvorlage auf andere Slider-Objekte finden Sie unter Anwenden oder Entfernen einer Ressource.

Verweise

Ausführliche Informationen zu den Eigenschaften und Ereignissen des Microsoft Silverlight-Slider-Steuerelements finden Sie in der Silverlight Control Gallery (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

SimpleSlider-Steuerelementvorlage

Formatieren eines Steuerelements, das Vorlagen unterstützt