ScrollViewer Styles and Templates

ScrollViewer Styles and Templates

Silverlight

This topic discusses the default ControlTemplate for the ScrollViewer. You can change the ControlTemplate of the ScrollViewer to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

ScrollViewer Elements

The following table lists the elements for the ScrollViewer control.

ScrollViewer Element	Type	Description
ScrollContentPresenter	ScrollContentPresenter	The placeholder for content in the ScrollViewer.
HorizontalScrollBar	ScrollBar	The ScrollBar used to scroll the content horizontally.
VerticalScrollBar	ScrollBar	The ScrollBar used to scroll the content vertically.

There are no named states for the ScrollViewer control.

ScrollViewer Properties

The Control class defines several properties that can be used by the control template to have an effect on the control when they are set. How the ControlTemplate uses the property depends on the property. The ControlTemplate must use the property in one of the following ways:

An element in the ControlTemplate template binds to the property.
An element in the ControlTemplate inherits the property from a parent FrameworkElement.

The following table lists whether the property is inherited or can be template bound and tells whether the default ControlTemplate for the ScrollViewer utilizes it.

Property	Usage method	Used by the default ControlTemplate
Background	Template binding	Yes
BorderThickness	Template binding	Yes
BorderBrush	Template binding	Yes
FontFamily	Property inheritance or template binding	Yes
FontSize	Property inheritance or template binding	Yes
FontStretch	Property inheritance or template binding	Yes
FontWeight	Property inheritance or template binding	Yes
Foreground	Property inheritance or template binding	Yes
HorizontalContentAlignment	Template binding	Yes
Padding	Template binding	Yes
VerticalContentAlignment	Template binding	Yes

Default Template

The following XAML shows the default template for the ScrollViewer control.

<Style TargetType="ScrollViewer">
  <Setter Property="HorizontalContentAlignment" Value="Left" />
  <Setter Property="VerticalContentAlignment" Value="Top" />
  <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
  <Setter Property="Padding" Value="4"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="BorderBrush">
    <Setter.Value>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFA3AEB9" Offset="0"/>
        <GradientStop Color="#FF8399A9" Offset="0.375"/>
        <GradientStop Color="#FF718597" Offset="0.375"/>
        <GradientStop Color="#FF617584" Offset="1"/>
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ScrollViewer">
        <Border CornerRadius="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
          <Grid Background="{TemplateBinding Background}">
            <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <ScrollContentPresenter x:Name="ScrollContentPresenter"
              Cursor="{TemplateBinding Cursor}"
              Margin="{TemplateBinding Padding}"
              ContentTemplate="{TemplateBinding ContentTemplate}"/>

            <Rectangle Grid.Column="1" Grid.Row="1" Fill="#FFE9EEF4"/>

            <ScrollBar x:Name="VerticalScrollBar" Width="18"
               IsTabStop="False"
               Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
               Grid.Column="1" Grid.Row="0" Orientation="Vertical"
               ViewportSize="{TemplateBinding ViewportHeight}"
               Maximum="{TemplateBinding ScrollableHeight}"
               Minimum="0"
               Value="{TemplateBinding VerticalOffset}"
               Margin="0,-1,-1,-1"/>

            <ScrollBar x:Name="HorizontalScrollBar" Height="18"
               IsTabStop="False"
               Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
               Grid.Column="0" Grid.Row="1" Orientation="Horizontal"
               ViewportSize="{TemplateBinding ViewportWidth}"
               Maximum="{TemplateBinding ScrollableWidth}"
               Minimum="0"
               Value="{TemplateBinding HorizontalOffset}"
               Margin="0,-1,-1,-1"/>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Concepts

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Other Resources

Control Styles and Templates