Slider control styling tips

Article
02/19/2013

JJ170228.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(fr-fr,VS.110).png

You can use the built-in Slider control template to create a custom Slider template. By default, the Slider control template looks like the following:

JJ170228.42dd6b3d-3876-435a-b401-1f9d2c815454(fr-fr,VS.110).png

Parts of the Slider template

The Slider template includes two sets of parts: one set for a vertical slider, and one set for a horizontal slider. The part names are prefixed by the word "vertical" or "horizontal," depending on the orientation of the slider.

Conseil
To view the parts of the template, open the Parts panel while modifying the template.

JJ170228.7db0aaf3-dcb4-427a-9ebc-3d192e34df54(fr-fr,VS.110).png

Part name	Object type
HorizontalTemplate VerticalTemplate	FrameworkElement
HorizontalTrackLargeChangeDecreaseRepeatButton VerticalTrackLargeChangeDecreaseRepeatButton	RepeatButton
HorizontalThumb VerticalThumb	Thumb
HorizontalTrackLargeChangeIncreaseRepeatButton VerticalTrackLargeChangeIncreaseRepeatButton	RepeatButton

Slider tips

Template part

This part is mandatory. The template part contains all the elements that make up the Slider in a particular orientation.

To make a template part, create a grid named HorizontalTemplate or VerticalTemplate that contains three columns (for horizontal orientation) or rows (for vertical orientation) that are sized Auto, Auto, and Star.

Thumb part

This part is mandatory. The thumb is the movable element in the slider.

To make the object or objects that represent the thumb into a Thumb control (HorizontalThumb or VerticalThumb), place the Thumb part in the middle column (or row) of the Root part. Then, set the Width and Height properties of the Thumb part so that the column (or row) will be resized to fit the thumb.

Track

The space in which the thumb moves is called the track. The track is not a part and is optional.

To include a track, place the object or objects representing the track into the Template part, spanning all three columns (or rows).

Moving the thumb along the track in large increments

If you want the user to be able to click the track on either side of the thumb to move the thumb in large increments, place a RepeatButton control in the two columns (or rows) on either side of the Thumb part, and name them VerticalLargeDecrease and VerticalLargeIncrease (or HorizontalLargeDecrease and HorizontalLargeIncrease). To make the RepeatButton controls function but not be seen, give them zero Opacity. Alternatively, apply a template that contains a single object with zero Opacity to the RepeatButton controls.

States of the Slider control

By default, the Slider control can be in one of the following three states in the CommonStates state group, which you can view in the States panel when you modify a Slider template:

State name	Description
Normal	The appearance of the Slider control when there is no interaction with the control.
MouseOver	The appearance of the Slider control when the user moves the pointer over it.
Disabled	The appearance of the Slider control when the IsEnabled property is set to False.

The Slider control can be in one of the following two states of the FocusStates state group:

State name	Description
Unfocused	The appearance of the Slider control when it does not have keyboard focus.
Focused	The appearance of the Slider control when it has keyboard focus. For example, a user might press the Tab key to cycle through the objects in your application until keyboard focus is on the Slider control.

Conseil
A state group contains the visual states that are part of the same logical category, and that cannot be displayed at the same time. For example, the CommonStates group includes states that relate to user interaction with an input device such as the mouse. Only one state in a state group can be displayed at a time, but a state from one group can be displayed at the same time as a state in another state group.

A state group contains the visual states that are part of the same logical category, and that cannot be displayed at the same time. For example, the CommonStates group includes states that relate to user interaction with an input device such as the mouse. Only one state in a state group can be displayed at a time, but a state from one group can be displayed at the same time as a state in another state group.

When you select a state, state recording is turned on, and any changes that you make will be recorded for that state. To turn off state recording, click the recording button JJ170228.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.110).png , or select Base in the States panel. To modify the appearance of your control when two separate states are active, you can pin a preview of a state in one state group while you modify a state in a different state group.

Template-binding

You can template-bind the Background, BorderBrush, Foreground, BorderThickness, or Padding properties. For more information, see Carry object properties through to the template.

To convert objects into a Slider control

The following image is a design comprehensive (comp) of a slider created by a designer that includes MouseOver and Pressed states of the HorizontalThumb part.

Normal

Curseur à l'état Normal

MouseOver

Curseur à l'état MouseOver

Pressed

Curseur à l'état Enfoncé

Disabled

Curseur à l'état Désactivé

This example uses the XAML code in step 2 of the following procedure, which corresponds to the preceding graphics to create a custom scroll bar by using the Slider control template.

Conseil
Click Split View to see the changes in both Design view and Code view as you follow this procedure.

In Code view, locate the following code, and then delete the closing slash mark (/).
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

Copy and then paste the following code into your new project, after the code that you located in step 1.

<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>

Add a closing Grid tag (</Grid>) after the code that you just pasted.
In the Objects and Timeline panel, right-click Grid, and then click Make Into Control. In the Make Into Control dialog box, click Slider, and then click OK.

In Code view, note that the code that you pasted in the preceding step has been replaced with the code for a new Slider. In addition, Blend turned Grid into a template for a new Slider style and applied that template to Grid.
To add columns to the Template part grid, in Design view, click and drag the blue ruler to the left of the control to add new rows, as illustrated in the following image:

If you add the rows as shown, the parts will be in the correct rows. Track has a ColumnSpan of 3, and thumb is in Column 1.

[!REMARQUE]

Numbering begins at 0, so the 3 columns are numbered 0 through 2.
To make the root of the template into the HorizontalTemplate part, in the Objects and Timeline panel, right-click Grid, click Make Into Part of Slider, and then click HorizontalTemplate. Note that Grid has been renamed HorizontalTemplate.
In the Objects and Timeline panel, right-click thumb, click Make Into Part of Slider, and then click HorizontalThumb.
To add states to the HorizontalThumb part, do the following:
1. In the Objects and Timeline panel, click thumb.
2. In the States panel, click MouseOver.
3. In the Properties panel, set the Fill to #FFCCCCCC.
4. Return to the States panel, and then click Base to end state recording.
  
  [!REMARQUE]
  
  You can also end state recording by clicking the Record mode indicator in the upper-left corner of the document window.
Right-click MouseOver in the States panel, click Copy State To, and then click Pressed.
To create the offset, with the Pressed state selected in the States panel, in the Transform category in the Properties panel, set X and Y to 1. Click Base to end state recording.
In the States panel, click Normal. Click Add transition, and then click Normal to MouseOver. Set Transition duration to .2. Click Base to end state recording.
Go back to template-editing mode for the Slider control [SliderStyle1 (Slider Template)] by clicking Return scope to in the Objects and Timeline panel.
In the Objects and Timeline panel, click HorizontalThumb. In the Layout category of the Properties panel, click Advanced options next to Margin, and then click Reset.
In the Objects and Timeline panel, click HorizontalTemplate. In the Parts panel, double-click HorizontalTrackLargeChangeDecreaseRepeatButton to create that part and to make it a child of HorizontalTemplate. In the Appearance category of the Properties panel, set the Opacity to 0.
In the Objects and Timeline panel, click HorizontalTemplate. In the Parts panel, double-click HorizontalTrackLargeChangeIncreaseRepeatButton to create that part and to make it a child of HorizontalTemplate. In the Appearance category of the Properties panel, set the Opacity to 0.
For columns 0 and 1, click the Star icon two times until the Auto icon appears. For column 2, make sure that the Star icon appears. Click the middle column's divider, and then, in the Properties panel, click Show advanced properties. To the right of the MinHeight value, click Advanced options, and then click Reset.
In the Objects and Timeline panel, click HorizontalTemplate. In the States panel, click Disabled. In the Appearance category of the Properties panel, set Opacity to 50.
Build your project by pressing Ctrl+Shift+B. When the build is complete, run your project by pressing F5, and then test your scroll bar.