Slider control styling tips
.png "Ee371160.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.30).png")
The Slider control represents a range of values, where the current value is represented by the position of a type of object called a Thumb.
As with all controls, the Slider control can be modified to look very different from the default appearance. By default, the Slider control looks like the following:
.png "Ee371160.42dd6b3d-3876-435a-b401-1f9d2c815454(en-us,Expression.30).png")
Slider control properties of interest
You can make a Slider control horizontal or vertical by setting the Orientation property under Common Properties in the Properties panel. You can also reverse the direction of the numbers by selecting the IsDirectionReversed property. You can specify the range of values by setting the Minimum and Maximum properties. The current value (specified in the Value property) must be between the minimum and maximum values. There are other properties in the Common Properties category that you can set, such as the LargeChange and SmallChange properties.
You can set these properties in the following ways:
Set the properties of the object After you draw a Slider object on the artboard, you can set these properties of the object directly. If you want several Slider controls to use the same values, set these properties in a style.
Set the properties in a style If you set these properties in the style
.png "Ee371160.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(en-us,Expression.30).png")
of the Slider object, any Slider object that uses that style will use those values. You can overwrite the values for a specific object.For more information, see Create a style.
The Slider control changes appearance depending on which state it is in. You can modify the appearance of each state while in template-editing mode by selecting a state in the States panel.
For more information, see the states listed in the following tables, and see Defining different visual states for a control.
Parts of the Slider template
The Slider control uses one template: the Slider Template. Each part of the template plays a role in the appearance and behavior of the Slider object to which the template is applied.
Other objects can exist in the template to dress up the appearance of the Slider control, but the parts listed in the following table are tied to its behavior in a contract.
To view the parts of the template, open the Parts panel while modifying the template.
.png "Ee371160.7db0aaf3-dcb4-427a-9ebc-3d192e34df54(en-us,Expression.30).png")
Part name |
Object type |
Description |
|---|---|---|
|
FrameworkElement |
A layout panel that contains the objects that define the appearance of the Slider control while it is oriented horizontally (or vertically). This part is mandatory. |
|
RepeatButton |
An object that decreases the Value property of the Slider when the object is clicked. The Value property is decreased incrementally by the value in the LargeChange property. |
|
Thumb |
An object whose position along a track represents the current value of the Slider control. This part is mandatory. |
|
RepeatButton |
An object that decreases the Value property of the Slider when the object is clicked. The Value property is increased incrementally by the value in the LargeChange property. |
.png "Ee371160.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,Expression.30).png")
HorizontalTemplate.png "Ee371160.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,Expression.30).png")
VerticalTemplate.png "Ee371160.f0c1ff71-7814-42ba-806b-7ea92d616e69(en-us,Expression.30).png")
HorizontalTrackLargeChangeDecreaseRepeatButton.png "Ee371160.eb6fad93-f17e-4f62-a926-8c8651862891(en-us,Expression.30).png")
VerticalTrackLargeChangeDecreaseRepeatButton.png "Ee371160.a5d608f2-bba2-48c5-8b15-2c115db86acc(en-us,Expression.30).png")
HorizontalThumb.png "Ee371160.15de085f-48f5-41dd-a286-e3dcb4cfd18b(en-us,Expression.30).png")
VerticalThumb.png "Ee371160.1d2fe38a-3fd8-4951-b978-7e44b6f2401d(en-us,Expression.30).png")
HorizontalTrackLargeChangeIncreaseRepeatButton.png "Ee371160.1aa736bd-cd0d-4514-a5e4-b495d11d4870(en-us,Expression.30).png")
VerticalTrackLargeChangeIncreaseRepeatButtonStates 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 modifying 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. |
Tip
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 .png "Ee371160.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(en-us,Expression.30).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.
To convert objects into a Slider control
To modify the template of a Slider control, do one of the following:
Draw a Slider
.png "Ee371160.bf689d92-3c74-4218-815c-e98c930ac189(en-us,Expression.30).png")
on the artboard, and then create a copy of the default template.For more information, see Create or modify a template.
Design the look of your Slider control by drawing objects or importing art, and then use the Make Into Control command.
If you use the Make Into Control command, follow these steps to make sure that you create all the objects that the Slider template requires:
Group all the objects that you want to define the appearance of your Slider control into a Grid layout panel.
Select the new Grid object, and then, on the Tools menu, click Make Into Control.
In the dialog box that appears, select Slider, name your template, and select the location where the template will be stored.
For information about locations, see Create a resource.
After you click OK, Microsoft Expression Blend enters template-editing mode and displays the objects that make up your vertical Slider control.
The template of a Slider control includes parts that are used when the Slider object is oriented horizontally or vertically. You can assign all of the parts in the Parts panel to objects in your template, or you can assign only the parts that relate to one orientation of the Slider control. If you have only one set of objects, but you want to design the template for both orientations of the Slider control, you can duplicate your objects and rearrange the duplicate set.
Tip
If you assign only the vertical parts in the Parts panel to objects in your template, the objects will disappear from the artboard if the Slider object (to which the template is applied) is set to display horizontally. To change the orientation of the Slider object, click [Slider] in the breadcrumb bar at the top of the artboard to return to the editing scope of the Slider object, set the Orientation property to Vertical, and then use the third button on the breadcrumb bar to return to template-editing mode.
To create the object for the HorizontalTemplate (or VerticalTemplate) part, do the following:
Draw a Grid
.png "Ee371160.a87ee957-7fbf-4135-a6ab-6de7e63160aa(en-us,Expression.30).png")
layout panel that has three columns (or three rows). The three columns should be sized to Auto, Auto, and star-sized (*), respectively.For more information, see Add or remove a row or column and Change the sizing option for a row or column.
Right-click your new Grid object, point to Make Into Part of Slider, and then click HorizontalTemplate (or VerticalTemplate).
The space in which the Thumb object moves is called the track. The track is not a template part, and is therefore optional. Place any object or objects that you want to represent the track into the HorizontalTemplate (or VerticalTemplate) object, spanning all three columns (or rows).
Tip
To make an object span multiple columns (or rows), select the object, and then, in the Properties panel, set the RowSpan (or ColumnSpan) property.
Because a Thumb object can have its own template, the objects that you want to use should be converted into a Thumb control by doing the following:
Group the objects that will represent your Thumb object into a layout panel.
Move the new layout panel into the middle column (or row) of your HorizontalTemplate (or VerticalTemplate) object.
Tip
To place an object into a specific column (or row), select the object, and then, in the Properties panel, set theColumn (or Row) property. The number of the first column (or row) is 0.
Right-click the new layout panel, point to Make Into Part of Slider, and then click HorizontalThumb (or VerticalThumb).
In the Make Into Part dialog box, select the location where the template will be stored.
While in template-editing mode for the new Thumb object, you can continue to make modifications, such as selecting states in the States panel to modify the appearance of the Thumb object in those states. If you want to have a margin in the Thumb object, set the Margin properties on the root object.
Go back to template-editing mode for the Slider object by clicking Return scope to
.png "Ee371160.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png")
in the Objects and Timeline panel, or by clicking VerticalThumb (or HorizontalThumb) in the breadcrumb bar at the top of the artboard.Set the Width and Height properties of the new Thumb object to specific values so that the middle column (or row) will automatically resize to fit the Thumb object.
If you want the user to be able to click a button at either end of the track to move the Thumb object in small increments, do the following:
Group the objects that you want to use for the decrease button into a layout panel.
Move the new layout panel into the first column of the HorizontalTemplate object (or the first row of the VerticalTemplate object).
Right-click the layout panel, point to Make Into Part of Slider, and then click HorizontalTrackLargeChangeDecreaseRepeatButton (or VerticalTrackLargeChangeDecreaseRepeatButton).
In the Make Into Part dialog box, select the location where the template will be stored.
While in template-editing mode for the new RepeatButton object, you can continue to make modifications, such as deleting the ContentPresenter object. If you want to have a margin in the RepeatButton object, set the Margin properties on the root object.
Go back to template-editing mode for the Slider object by clicking Return scope to
in the Objects and Timeline panel, or by clicking HorizontalTrackLargeChangeDecreaseRepeatButton (or VerticalTrackLargeChangeDecreaseRepeatButton) in the breadcrumb bar at the top of the artboard.Adjust the properties under Layout in the Properties panel to make the RepeatButton object appear where you want it to. You might also want to reorder your objects if they are hidden behind other objects.
For more information, see Change the layering order of objects.
Repeat these steps for the HorizontalTrackLargeChangeIncreaseRepeatButton (or VerticalTrackLargeChangeIncreaseRepeatButton) object, moving the object into the last column of the HorizontalTemplate object (or the last row of the VerticalTemplate object).
You can continue to modify your template in this mode. For example, add or modify objects, or select a state in the States panel to modify the appearance of your template in that state.
Consider binding some of the brush properties of objects in your template to the following properties of the Slider object that will eventually use your template:
Background
BorderBrush
Foreground
BorderThickness
For more information, see Carry object properties through to the template.
To exit template-editing mode, click [Slider] in the breadcrumb bar at the top of the artboard, or click Return scope to
in the Objects and Timeline panel.For information about applying your new Slider template to other Slider objects, see Apply or remove a resource.
References
You can find detailed information about the properties and events of the Microsoft Silverlight Slider control at the Silverlight Control Gallery on MSDN.
See also
Tasks
Bind an object to user input or to other internal values