SimpleSlider-Steuerelementvorlage

Bei dem Schieberegler handelt es sich um ein einfaches Steuerelement, mit dem der Benutzer durch Bewegen eines Thumb-Steuerelements aus einem Wertebereich auswählen kann. Standardmäßig wird der Schieberegler horizontal angezeigt. Sie können die Anzeige jedoch in die vertikale Ausrichtung ändern, indem Sie im Eigenschaftenpanel von Microsoft Expression Blend unter Allgemeine Eigenschaften die Orientation-Eigenschaft (Ausrichtung) entsprechend festlegen. Verwenden Sie die Eigenschaften Minimum, Maximum und Value, um den Wert eines Schiebereglers festzulegen.

Die Zeichenflächenansicht eines SimpleSlider-Steuerelements.

Aufgliederung der Steuerelementvorlage

Die SimpleSlider-Steuerelementvorlage umfasst die folgenden Elemente:

• Ein Rasterpanel mit dem Namen "GridRoot", das verwendet wird, um die verschiedenen untergeordneten Elemente innerhalb des Schiebereglers aufzunehmen. Darüber hinaus erleichtert die Verwendung des Rasterpanels einem Designer einer Benutzeroberfläche (UI) das Hinzufügen von mehreren Elementen zur Vorlage. Das GridRoot-Element wird in drei Zeilen aufgeteilt: Die oberste Zeile enthält das TopTick-Element, die mittlere Zeile das Thumb-Element und die unterste Zeile das BottomTick-Element.

• Zwei TickBar-Elemente mit den Namen "TopTick" und "BottomTick", die verwendet werden, um Teilstriche auf dem Schieberegler anzuzeigen. Standardmäßig ist deren Visibility-Eigenschaft auf Collapsed festgelegt. Die TickBar-Elemente bestimmen die Anzahl der anzuzeigenden Teilstriche basierend auf den Eigenschaften, die für das Slider-Steuerelement festgelegt wurden, auf das diese Vorlage angewendet wird. Die TickBar-Elemente stellen keine bearbeitbare Vorlage zur Verfügung. Sie können jedoch den Pinsel festlegen, der von ihnen zum Anzeigen des Teilstrichs verwendet wird. Legen Sie hierzu die Foreground-Eigenschaft des Slider-Steuerelements fest (dieses TickBar-Element ist mit einer Vorlage an die Foreground-Eigenschaft des Slider-Steuerelements gebunden).

• Ein Border-Element, das verwendet wird, da es eine BorderThickness-Eigenschaft aufweist, die über eine Vorlage an die BorderThickness-Eigenschaft des Button-Steuerelements gebunden werden kann, auf das diese Vorlage angewendet wird.

• Ein Track-Element mit dem Namen "PART_Track", das zum Anzeigen eines Thumb-Elements entlang einer Leiste verwendet wird. Der Benutzer kann das Thumb-Element ziehen. Standardmäßig verwendet das Thumb-Element die SimpleThumbStyle-Vorlage, die Sie bearbeiten können.

• Zwei RepeatButton-Elemente, die im PART_Track-Element enthalten sind und mit denen der Benutzer neben das Thumb-Element klicken kann, um größere Änderungen am Wert des Schiebereglers vorzunehmen. Sie können den Schrittwert für diese Änderungen in der LargeChange-Eigenschaft des Schiebereglers (nicht in der Vorlage) angeben. Der von der SmallChange-Eigenschaft angegebene Wert wird verwendet, wenn der Benutzer Thumb-Element mit den Pfeiltasten bewegt.

• Eine Layouttransformation, die verwendet wird, um den Schieberegler in horizontaler Ausrichtung anzuzeigen. Dieses Konzept vereinfacht Ihnen die Bearbeitung, sodass Sie nicht zwei unterschiedliche Vorlagen bearbeiten müssen. Allerdings gibt es Fälle, in denen sich die beiden Ausrichtungen so sehr unterscheiden müssen, dass unterschiedliche Vorlagen erforderlich sind. In diesem Fall könnten Sie ein Setter-Objekt im <Style>-Element in der XAML-Ansicht von Expression Blend verwenden, um je nach Ausrichtung zwischen den Vorlagen umzuschalten. Ein Beispiel hierfür finden Sie in der Standardvorlage für das Slider-Systemsteuerelement.

  Vorsicht:
  Ändern Sie nicht den Namen eines Elements, dessen Name mit "PART_" beginnt, da im Code, der das Steuerelement implementiert, auf diese Elemente verwiesen wird.

  Objektansicht: Die grundlegenden Teile (Vorlage) eines SimpleSlider-Steuerelements

  

Verwendete Eigenschaftsauslöser

Eigenschaftsauslöser in der Steuerelementvorlage werden verwendet, damit das Steuerelement auf Änderungen der Eigenschaften reagieren kann. Sie können im Auslöserpanel auf die Elemente klicken, um die Eigenschaften anzuzeigen, die bei einem aktiven Auslöser geändert werden. Beispielsweise werden in der SimpleSlider-Vorlage Auslöser verwendet, um die TickBar-Elemente basierend auf der TickPlacement-Eigenschaft anzuzeigen. Dadurch wird die Sichtbarkeit der Elemente TopTick und BottomTick festgelegt. Die horizontale und vertikale Ausrichtung wird auch in den Auslösern der SimpleSlider-Vorlage konfiguriert. Dadurch wird eine Layouttransformation auf den Schieberegler angewendet, die eine Drehung um 90 Grad bewirkt. Da sich das Track-Element automatisch ausrichtet, wird die Drehung rückgängig gemacht, sodass es nicht zweimal gedreht wird.

Verwendete Pinsel

Die folgenden Pinselressourcen im Ressourcenverzeichnis SimpleStyles.xaml werden von der SimpleSlider-Vorlage verwendet:

• Die Background-Eigenschaft wird mit der LightBrush-Ressource festgelegt, wenn kein Auslöser aktiv ist, und mit der DisabledBackgroundBrush-Ressource, wenn die IsEnabled-Eigenschaft den Wert False aufweist.

• Die orderBrush-Eigenschaft wird mit der NormalBorderBrush-Ressource festgelegt, wenn kein Auslöser aktiv ist, und mit der DisabledBorderBrush-Ressource, wenn die IsEnabled-Eigenschaft den Wert False aufweist.

• Die Foreground-Eigenschaft (Vordergrund) des TopTick-Elements wird mithilfe der GlyphBrush-Ressource festgelegt.

• Die Fill-Eigenschaft der SimpleThumb-Vorlage wird mit der NormalBrush-Ressource festgelegt, während die Stroke-Eigenschaft mit der NormalBorderBrush-Ressource festgelegt wird.

Bewährte Methoden und Designrichtlinien

• Verwenden Sie ein Grid-Steuerelement als Stamm Ihrer Vorlage, wenn Sie davon ausgehen, dass ein Designer Ihrem Steuerelement weitere visuelle Elemente hinzufügt. Expression Blend sucht nach einem LayoutPanel-Element wie dem Grid-Steuerelement und legt es standardmäßig als aktives Element fest. Beim Hinzufügen neuer Elemente zur Zeichenfläche werden diese als untergeordnete Elemente in das LayoutPanel-Element eingefügt.

• Wenn Sie möchten, können Sie Auslöser zur SimpleSlider-Vorlage hinzufügen oder das PART_Track-Element ändern, um den Schieberegler optisch attraktiver zu gestalten. Sie dürfen jedoch kein Element umbenennen, dessen Name mit "PART_" beginnt, da im Code, der das Steuerelement implementiert, auf diese Elemente verwiesen wird. Das Thumb-Element und die Schaltflächen zum Wiederholen müssen innerhalb des Track-Elements in den richtigen Elementen platziert werden. Das Track-Steuerelement ist in der Lage, das Thumb-Element basierend auf dem Wert des Schiebereglers richtig zu platzieren. Die Schaltflächen zum Wiederholen verwenden Befehlsbindungen, um den Wert des Schiebereglers zu erhöhen oder zu verringern.

• Wenn Sie die Vorlage des SimpleSlider bearbeiten, können Sie die Anzeige der TickBar-Elemente erzwingen, indem Sie das Auslöserpanel für die Auswahl des richtigen Auslösers verwenden. Wenn beispielsweise in der SimpleSlider-Vorlage für die TickPlacement-Eigenschaft der Wert Both festgelegt ist, werden beide TickBar-Elemente angezeigt. Hierzu wird deren Visibility-Eigenschaft auf Visible festgelegt.

Siehe auch

Aufgaben

Weiterführende Themen: Anpassen des Thumb-Elements einer SimpleSlider-Steuerelementvorlage