ScrollViewer control styling tips

  • Article

Ee341456.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.30).png

The ScrollViewer control represents an object that displays a scrollable viewing area. Any objects can be placed in the viewing area. For example, inside the template of a ListBox, there is a ScrollViewer control that contains an ItemsPresenter that displays a list of items.

As with all controls, the ScrollViewer control can be modified to look very different from the default appearance. By default, the ScrollViewer control looks like the following:

Ee341456.0fb6390c-a631-4f14-8f23-be3723f99405(en-us,Expression.30).png

ScrollViewer control properties of interest

To hide or show the ScrollBar objects in a ScrollViewer control, set the HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties, which appear when you click Show advanced properties Ee341456.de239c9d-42ce-4f5e-83b9-5f9924c0431f(en-us,Expression.30).png at the bottom of the Layout category of the Properties panel.

You can set these properties in the following ways:

  • Set the properties of the object   After you draw a ScrollViewer object on the artboard, you can set the properties of the object directly. If you want several ScrollViewer objects 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 Ee341456.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(en-us,Expression.30).png of the ScrollViewer object, any ScrollViewer 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.

To display an item in a ScrollViewer control, you can select it under Objects and Timeline to make it the active container, and then draw new objects or move existing objects into the ScrollViewer control.

If you want the ScrollViewer control to display items in a collection of data, consider using a ListBox control instead.

For more information, see Bind an object to data and Creating sample data.

Parts of the ScrollViewer template

The ScrollViewer control uses one template to define its appearance: the ScrollViewer Template. Each part of the template plays a role in the appearance and behavior of the ScrollViewer object to which the template is applied.

Other objects can exist in the template to dress up the appearance of the ScrollViewer 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.

Ee341456.6b56bb85-3531-440a-8432-7bb0d1e99d83(en-us,Expression.30).png

Part name

Object type

Description

ScrollContentPresenter

ScrollContentPresenter

An object that displays the content of the ScrollViewer control.

This part is mandatory.

HorizontalScrollBar

ScrollBar

A ScrollBar object along the bottom of the ScrollViewer control.

VerticalScrollBar

ScrollBar

A ScrollBar object along the right side of the ScrollViewer control.

States of the ScrollViewer control

By default, the ScrollViewer control does not have any states defined. You can create your own states, or use the states of a control that includes a ScrollViewer control in their template, such as the ListBox control.

For more information, see Define different visual states and transition times for a user control and ListBox control styling tips.

To convert objects into a ScrollViewer control

To modify the template of a ScrollViewer control, do one of the following:

  • Draw a ScrollViewer control Ee341456.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 ScrollViewer 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 ScrollViewer template requires:

  1. Group all the objects that you want to define the appearance of your ScrollViewer control into a Grid layout panel.

  2. Select the new Grid object, and then, on the Tools menu, click Make Into Control.

  3. In the dialog box that appears, select ScrollViewer, name your template, and select the location where the template will be stored.

    For information about locations, see Create a resource.

  4. After you click OK, Microsoft Expression Blend enters template-editing mode and displays the objects that make up your vertical ScrollViewer control. 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.

  5. Delete the ContentPresenter object that was created in the template.

  6. To add an object that will be assigned to the ScrollContentPresenter part of the template, double-click ScrollContentPresenter in the Parts panel. Move the new ScrollContentPresenter object to the position where you want it.

    Tip

    Alternatively, you could add a ScrollContentPresenter object and rename it to ScrollContentPresenter before converting your objects into a ScrollViewer control. When the Make Into Control command converts objects into a control, an object that has the same name and the same type as a template part is automatically converted into that part. If no object can be used, the part will appear in the Parts panel next to an icon Ee341456.64d085f2-3d49-4b74-8070-4d7dae18dc28(en-us,Expression.30).png that indicates that it is unused.

    For more information, see Assign template parts to objects.

  7. If you have art or other objects that you want to use for the HorizontalScrollBar and VerticalScrollBar parts of the template, do the following:

    1. Group each set of objects into a layout panel.

    2. Right-click one of the new layout panels, point to Make Into Part of ScrollViewer, and then click HorizontalScrollBar or VerticalScrollBar.

      This will replace your objects with a ScrollBar object and use your objects to create the style and template that will be applied to the ScrollBar object.

    3. In the Make into Part dialog box, type a name for the ScrollBar style that will be created, select a location where the style will be stored, and then click OK.

    4. While in template-editing mode for the new ScrollBar object, you can continue to make modifications to your objects.

      For more information, see ScrollBar control styling tips.

    To go back to template-editing mode for the ScrollViewer, click Return scope to Ee341456.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png in the Objects and Timeline panel, or click HorizontalScrollBar or VerticalScrollBar in the breadcrumb bar at the top of the artboard.

  8. Consider template-binding the following properties of objects in your template to properties of the ScrollViewer object that will eventually use your template:

    • Visibility   Template-bind this property to the Visible property.

    • Maximum   Template-bind this property to the Width property (for the HorizontalScrollBar object) or the Height property (for the VerticalScrollBar object).

    For more information, see Carry object properties through to the template.

  9. Consider binding some of the brush properties in your template:

    • Background

    • BorderBrush

    • BorderThickness

  10. To exit template-editing mode, click [ScrollViewer] in the breadcrumb bar at the top of the artboard, or click Return scope to Ee341456.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png in the Objects and Timeline panel.

    For information about applying your new ScrollViewer template to other ScrollViewer objects, see Apply or remove a resource.

References

You can find detailed information about the properties and events of the Microsoft Silverlight ScrollViewer control at the Silverlight Control Gallery on MSDN.

See also

Concepts

Styling tips for common Silverlight controls

Styling a control that supports templates

SimpleScrollBar