ScrollViewer control styling tips

Article
02/19/2013

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

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

JJ171025.0fb6390c-a631-4f14-8f23-be3723f99405(fr-fr,VS.110).png

Parts of the ScrollViewer template

The ScrollViewer template includes the following parts:

Part name	Object type
ScrollContentPresenter	ScrollContentPresenter
HorizontalScrollBar	ScrollBar
VerticalScrollBar	ScrollBar

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

ScrollViewer tips

A ScrollViewer consists of scrollable content controlled by a horizontal ScrollBar and a vertical ScrollBar. A ScrollBar can be set to always be shown, to always be hidden, or to be shown only when needed.

ScrollViewerPresenter part

The ScrollContentPresenter part is mandatory. The ScrollContentPresenter displays the scrollable content

HorizontalScrollBar part

The HorizontalScrollBar part is optional. Template-bind this part's Visibility property to ComputedHorizontalScrollBarVisibility, its Maximum property to ScrollableWidth, its Value property to HorizontalOffset and its ViewportSize property to ViewportWidth.

VerticalScrollBar part

The VerticalScrollBar part is optional. Template-bind this part's Visibility property to ComputedVerticalScrollBarVisibility, its Maximum property to ScrollableHeight, its Value property to VerticalOffset and its ViewportSize property to ViewportHeight.

Template-binding

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

To convert objects into a ScrollViewer control

The following graphic is a design comprehensive (comp) of a scroll viewer created by a designer.

ScrollViewer

It is important to note that the preceding graphic is not yet a scroll viewer, but artwork that resembles a scroll viewer.

This example uses the XAML code in step 2 of the following procedure.

Open a new Microsoft Silverlight project. 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 x:Name="root" Height="146" Width="146">
   <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
   <Rectangle x:Name="content" Stroke="Black" Width="200" Height="200">
      <Rectangle.Fill>
      <RadialGradientBrush>
         <GradientStop Color="White"/>
         <GradientStop Color="Black" Offset="1"/>
      </RadialGradientBrush>
      </Rectangle.Fill>
   </Rectangle>
   <Grid x:Name="verticalscrollbar" Width="17" Height="146" HorizontalAlignment="Right">
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" 
         VerticalAlignment="Top"/>
      <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
      Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" VerticalAlignment="Bottom" />
   </Grid>
</Grid>

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

In this step, Blend removes root and everything inside it, and puts a new ScrollViewer in its place. Next, Blend turns root into the template of a new ScrollViewer style and applies that new style to the new ScrollViewer.
In the Objects and Timeline panel, right-click ContentPresenter, and then click Delete.
In the Objects and Timeline panel, click root. In the Parts panel, double-click ScrollContentPresenter.
Right-click verticalscrollbar, point to Make Into Part of ScrollViewer, and then click VerticalScrollBar. Click OK.

To style the VerticalScrollBar, see ScrollBar control styling tips.
Click **Return scope to ** to return to ScrollViewerStyle1 (ScrollViewer template).
VerticalScrollBar must be able to scroll the viewport of the scrollable area. To make this possible, you can use the Custom Expression option on the Advanced options menu in the Properties panel. Set Visibility to {TemplateBinding ComputedVerticalScrollBarVisibility}, Maximum to {TemplateBinding ScrollableHeight}, Value to {TemplateBinding VerticalOffset} and ViewportSize to {TemplateBinding ViewportHeight}.

Alternatively, in Split view, with VerticalScrollBar selected in the Objects and Timeline panel, locate the line of code that begins <ScrollBar x:Name="VerticalScrollBar, and then paste the following code at the end of the line that you have just located.
```
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
Maximum="{TemplateBinding ScrollableHeight}" 
Value="{TemplateBinding VerticalOffset}" 
ViewportSize="{TemplateBinding ViewportHeight}"
```
ScrollContentPresenter and VerticalScrollBar have to be side by side, with each in its own column. In the Objects and Timeline panel, click root. On the artboard, click the blue border above the control, and then drag the orange arrow until it is right next to the scroll bar, as illustrated in the following image:
For the right column, click **Star ** two times. The Auto icon appears.
In the Objects and Timeline panel, click ScrollContentPresenter. In the Layout category of the Properties panel, click Advanced options to the right of ColumnSpan, and then click Reset.
In the Objects and Timeline panel, click VerticalScrollBar. In the Layout category of the Properties panel, click Advanced options to the right of Margin, and then click Reset.
The object named content is still in the template. This object is the 200-pixel square Rectangle over which the 146-pixel-square ScrollViewer is meant to scroll. The next step is to cut it out of the template and paste it into the Content property of the ScrollViewer. ScrollContentPresenter will then display it. In the Objects and Timeline panel, right-click content, and then click Cut.
Click **Return scope to **, and then press Ctrl+V to paste content into the Content property of the ScrollViewer.
Build your project (Ctrl+Shift+B), and then test your project by pressing F5.

Important

The ListBox will not work as expected unless you have styled the ScrollBar by using the ScrollBar control styling tips as described in step 7.