SimpleScrollViewer

  • Article

This page applies to WPF projects only

The scroll viewer is a content control that displays its content in a scrollable area. You can place content in a scroll viewer in Microsoft Expression Blend by double-clicking the scroll viewer and then drawing an element into it. If you want to place multiple elements into the scroll viewer, you need to first add in a layout panel such as a Grid or Canvas. A scroll viewer also can display text by default; you can edit the text by selecting the scroll viewer and then modifying the Content property under Common Properties in the Properties panel. To position elements in the scroll viewer but beyond the bounds of the scroll viewer, you need to manually set the positioning properties in the Advanced property options under Layout in the Properties panel. The vertical scroll bar is visible by default. To make the horizontal scroll bar appear, set the HorizontalScrollBarVisibility property to Visible.

The artboard view of a SimpleScrollViewer control

Cc295291.0f9eba2b-ac29-4bc1-8cdb-9d32dc717992(en-us,Expression.10).png

Breaking down the control template

The SimpleScrollViewer control template consists of the following items:

  • A Grid layout panel, which is used to hold the multiple child elements within the scroll viewer. The Grid is also used because it makes it easier for an application user interface (UI) designer to add more elements to the template. The row and column of the Grid panel that holds the ScrollContentPresenter is set to star (*) size so that it expands as the scroll viewer is expanded. The row and column of the Grid panel that holds the scroll bars are set to auto-size according to the size required by the scroll bars.

  • A ScrollContentPresenter element, which is used to display the Content property of the scroll bar to which this template is applied. This element must be present to show the content of the scroll bar.

  • Two ScrollBar elements named PART_HorizontalScrollBar and PART_VerticalScrollBar, which are used to scroll through the content. The scroll bars use the SimpleScrollBarStyle template by default.

    Warning

    Do not rename any element whose name begins with "PART_" because these elements are referred to from the code that implements the control.

    Objects view: The basic parts (template) of a SimpleScrollViewer control

    Cc295291.ce27ad4d-055a-4d08-b6ee-f83fd4836820(en-us,Expression.10).png

Cc295291.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top

Property triggers used

Property triggers in the control template are used to make the control react to property changes. You can click the items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in the SimpleScrollViewer template, when the IsMouseOver property becomes True, the background of the Border element changes color to the MouseOverBrush resource.

Cc295291.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top

Brushes used

The SimpleScrollViewer template does not use any brush resources in the SimpleStyles.xaml resource dictionary. Instead, the Background property is template-bound to the Background property of the slider control to which the template is applied.

Cc295291.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top

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 elements that are added to the artboard end up as child elements of the layout panel.

  • The content of the SimpleScrollViewer is shown by a ScrollContentPresenter element that automatically binds its content to the Content property of the ScrollViewer to which this template is applied. The ScrollContentPresenter element must be present for the SimpleScrollViewer to show its content.

  • The visibility of the scroll bars is controlled by the scroll viewer control because the template binds to the properties that specify visibility. This binding allows the scroll bars to automatically hide or show as needed. You can set the default for scroll bar visibility either on the scroll viewer control, or in its template.

  • For the scroll viewer to work correctly, you need to keep all of the template bindings. Also note that the scroll bars named PART_HorizontalScrollBar and PART_VerticalScrollBar must not be changed because these names are used by the code in the control class.

  • You can apply existing scroll bar templates to the scroll bars in the scroll viewer template by right-clicking the scroll bars (named PART_HorizontalScrollBar and PART_VerticalScrollBar), pointing to Edit Control Parts (Template), pointing to Apply Resource, and then clicking the name of the scroll bar template. Note that the orientation of the template must match the orientation of the scroll bar.

Cc295291.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gifBack to top