SimpleScrollBar
.png "This page applies to WPF projects only")
The scroll bar is a simple control that displays a marker on a bar in a position that depends on the Value property. You can set the orientation of the scroll bar in Microsoft Expression Blend by using the Orientation property under Layout in the Properties panel. You can set the Minimum, Maximum, and current Value of the scroll bar under Common Properties in the Properties panel. The current value must be between the minimum and maximum values.
The Artboard view of a SimpleScrollBar control
.png "Cc295211.db3af5e5-8b09-42e7-b541-543b3b2bbcb3(en-us,Expression.30).png")
Breaking down the control template
The SimpleScrollBar control template consists of the following items:
A Grid panel named GridRoot, which is used to hold the multiple child objects within the scroll bar. The Grid is also used because it makes it easier for you to add more objects to the template. The Grid is split into three rows where the top and bottom rows have maximum sizes set so that they will not expand beyond 18 pixels (device-independent units which are approximately 1/96 inch), and the middle row is set to star (*) size, which means that it will expand when the window expands.
Two RepeatButton objects named DecreaseRepeat and IncreaseRepeat, which are used to move the position marker on the bar. The RepeatButton objects contain content that displays arrows. Again, a Grid is used as a root for each of these so that the user can easily edit the Path objects (named DecreaseArrow and IncreaseArrow) and add other content.
A Track object named PART_Track, which is used to display a Thumb object along a bar. The exposed parts of the bar double as RepeatButtons named PageDown and PageUp. Both of these use the SimpleScrollRepeatButtonStyle template, which can be edited separately. The IncreaseRepeatButton and DecreaseRepeatButton sections of the track use Command bindings so that they can call commands on the scroll bar class. The Thumb object uses the SimpleThumbStyle template, which can be edited separately.
A layout transform, which is used to display the slider bar in a horizontal orientation. This design makes it easier to edit the style than having to remember to edit two different templates. However, there are cases when the two orientations have to be different enough that they require separate templates. In this case, you could use a Setter element in the Style element in XAML view of Expression Blend to switch the templates based on orientation. You can find an example of this in the default template for the system ScrollBar control.
Warning
Do not rename any object whose name begins with "PART_" because these objects are referred to in the code that implements the control.
Objects view: The basic parts (template) of a SimpleScrollBar control
.png "Cc295211.24716500-e135-474f-80cf-7091061569da(en-us,Expression.30).png")
Property triggers used
Property triggers in the control template are used to make the control react to property changes. You can click the item in the Triggers panel to view the properties that are changed when a trigger is active. For example, in the SimpleScrollBar template, when the Orientation property is Horizontal, multiple properties are changed to reflect the new orientation of the progress bar.
Brushes used
The SimpleScrollBar template uses only one system brush resource for the Foreground property. Other brush resources are referenced in the templates that the SimpleScrollBar uses, such as the SimpleRepeatButton, SimpleThumbStyle, and SimpleScrollRepeatButtonStyle templates. To change the look of the SimpleScrollBar, you can modify the brushes that these templates use, or you can create new templates.
Best practices and design guidelines
In general, use a Grid control as the root of your template if you expect a designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so that new objects that are added to the artboard end up as child objects of the layout panel.
You can apply the SimpleScrollBar template to the scroll bar that is used in the template for a ScrollViewer.
Because the SimpleScrollBar template uses other templates, it can be tedious to walk through various levels of templates to get to the one that you want to change. To edit templates directly, you can click the Edit resource button next to the template name in the Resources panel. Then, in the editing mode of the style, right-click Style in the Objects and Timeline panel, point to Edit Template, and then click Edit Current. Alternatively, it can be simpler to just delete the references to the subtemplates (reset the Style property under Miscellaneous in the Properties panel), and design everything in one template.
In order for your control to work, you have to keep the command bindings that fire commands on the class of the control and provide another way to make a contract between the control and the class that represents it. These bindings are present in the Command properties of the IncreaseRepeat, DecreaseRepeat, PageUp, and PageDown objects, and in the Orientation=Horizontal trigger.
If you want, you can add triggers to the SimpleScrollBar template, or modify the objects in the PART_Track object to make the bar look more interesting. If you do so, do not rename the PART_Track object or any of its child objects, because these objects are referred to from the code that implements the control. The PART_Track object can find its parts because they are placed under specific control headers: Track.IncreaseRepeatButton, Track.DecreaseRepeatButton, and Track.Thumb. The Thumb is also a specific Windows Presentation Foundation (WPF) control that can be dragged.