Styling the DiagramSurface's ScrollBar

Hi,

I tried to style the scrollbar on the DiagramSurface, but i can't find a way to do it. Is there anyway I can style the scrollbar?

There's another alternative which I wrap the DiagramSurface with another ScrollViewer, and style the external one, this works, however it didn't scroll properly with the scrollviewer. Whenever you use MouseWheel or drag to scroll the scrollbar, it won't trigger any changes on the ViewPort. Is this expected?

Thanks.

Hello

The best way to do this at the moment is to create a DiagramScrollViewer template and add this to the resources of the diagram surface. First of all, take the default DiagramScrollViewerTemplate which I've posted here:

  <ms:ScrollBarViewportSizeConverter x:Key="ViewportSizer" />
  <ms:ScrollBarMaximumConverter x:Key="HorizontalScrollBarMaximum" UnusableDimension="{x:Static SystemParameters.VerticalScrollBarWidth}" />
  <ms:ScrollBarMaximumConverter x:Key="VerticalScrollBarMaximum" UnusableDimension="{x:Static SystemParameters.HorizontalScrollBarHeight}" />
  <ms:DoubleToScaleTransformConverter x:Key="DoubleToScaleConverter" />

  <ControlTemplate x:Key="DiagramScrollViewerTemplate" TargetType="{x:Type ms:DiagramScrollViewer}">
    <Border Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition Height="*" />
          <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <ScrollBar Orientation="Vertical" Grid.Column="1" Name="vsb" Width="18"
                     Minimum="{Binding Extent.Top, RelativeSource={RelativeSource TemplatedParent}}" 
                     SmallChange="20" LargeChange="200">
          <ScrollBar.Maximum>
            <MultiBinding Converter="{StaticResource VerticalScrollBarMaximum}">
              <Binding Path="Extent.Bottom" RelativeSource="{RelativeSource TemplatedParent}" />
              <Binding Path="ActualHeight" RelativeSource="{RelativeSource TemplatedParent}" />
              <Binding Path="EffectiveZoom" RelativeSource="{RelativeSource TemplatedParent}" />
            </MultiBinding>
          </ScrollBar.Maximum>
          <ScrollBar.ViewportSize>
            <MultiBinding Converter="{StaticResource ViewportSizer}">
              <Binding Path="ActualHeight" RelativeSource="{RelativeSource TemplatedParent}" />
              <Binding Path="EffectiveZoom" RelativeSource="{RelativeSource TemplatedParent}" />
            </MultiBinding>
          </ScrollBar.ViewportSize>
        </ScrollBar>
        <ScrollBar Orientation="Horizontal" Grid.Row="1" Name="hsb" Height="18"
                     Minimum="{Binding Extent.Left, RelativeSource={RelativeSource TemplatedParent}}" 
                     SmallChange="20" LargeChange="200">
          <ScrollBar.Maximum>
            <MultiBinding Converter="{StaticResource HorizontalScrollBarMaximum}">
              <Binding Path="Extent.Right" RelativeSource="{RelativeSource TemplatedParent}" />
              <Binding Path="ActualWidth" RelativeSource="{RelativeSource TemplatedParent}" />
              <Binding Path="EffectiveZoom" RelativeSource="{RelativeSource TemplatedParent}" />
            </MultiBinding>
          </ScrollBar.Maximum>
          <ScrollBar.ViewportSize>
            <MultiBinding Converter="{StaticResource ViewportSizer}">
              <Binding Path="ActualWidth" RelativeSource="{RelativeSource TemplatedParent}" />
              <Binding Path="EffectiveZoom" RelativeSource="{RelativeSource TemplatedParent}" />
            </MultiBinding>
          </ScrollBar.ViewportSize>
        </ScrollBar>
        <ms:DiagramScrollContentPresenter Name="PART_ContentPresenter" HorizontalOffset="{Binding Value, ElementName=hsb}"
                                               VerticalOffset="{Binding Value, ElementName=vsb}"
                                               LayoutTransform="{TemplateBinding EffectiveZoom, Converter={StaticResource DoubleToScaleConverter}}" />
        <Rectangle Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1" Grid.Column="1" />
      </Grid>
    </Border>
    <ControlTemplate.Triggers>
      <Trigger Property="ZoomMode" Value="SizeToFit">
        <Setter TargetName="hsb" Property="Visibility" Value="Collapsed" />
        <Setter TargetName="vsb" Property="Visibility" Value="Collapsed" />
      </Trigger>
      <Trigger Property="CanShowScrollBars" Value="False">
        <Setter TargetName="hsb" Property="Visibility" Value="Collapsed" />
        <Setter TargetName="vsb" Property="Visibility" Value="Collapsed" />
      </Trigger>
    </ControlTemplate.Triggers>
  </ControlTemplate>

Next you can apply your own custom styling by setting the Style or Template properties of the ScrollBars in the code snippet above. You may also want to customize the border and bottom right corner square of the scroll viewer as well.

Next, you can use this template by adding this to your DiagramSurface tag:

<ms:DiagramSurface.Resources>
  <Style TargetType="{x:Type ms:DiagramScrollViewer}">
    <Setter Property="Template" Value="{StaticResource DiagramScrollViewerTemplate}" />
  </Style>
</ms:DiagramSurface.Resources>

Jason Fauchelle