Hi,

I have included a custom scrollbar as part of a custom theme for the wpf grid. But on addition of the scrollbar the grid performance slows down significantly. I have noticed that in the demo, in the live explorer theme, a custom scrollbar has also been used but it does not seem to slow the grid down.

Have I included the custom scrollbar in the theme correctly and is there anything missing in my scrollbar style?

Thanks in advance!

I have included the scrollbar style here:

 <ScrollBar x:Name="PART_HorizontalScrollBar" Style="{StaticResource CustomScrollBar}" Grid.Column="0" Grid.Row="1" Orientation="Horizontal" Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}" Value="{TemplateBinding ScrollViewer.HorizontalOffset}" ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}" Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}" />

<ScrollBar x:Name="PART_VerticalScrollBar" Style="{StaticResource CustomScrollBar}" Grid.Column="1" Grid.Row="0" Orientation="Vertical" Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}" Value="{TemplateBinding ScrollViewer.VerticalOffset}" ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}" Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}" />

And here is the CustomScollbar Style

<SolidColorBrush x:Key="StandardBorderBrush" Color="#888" PresentationOptions:Freeze ="True" />

<SolidColorBrush x:Key="StandardBackgroundBrush" Color="#FFF" PresentationOptions:Freeze ="True" />

<SolidColorBrush x:Key="HoverBorderBrush" Color="#DDD" PresentationOptions:Freeze ="True"/>

<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Gray" PresentationOptions:Freeze ="True" />

<SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" PresentationOptions:Freeze ="True"/>

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" PresentationOptions:Freeze ="True"/>

<SolidColorBrush x:Key="NormalBrush" Color="#FF7FBD11" PresentationOptions:Freeze ="True"/>

<SolidColorBrush x:Key="NormalBorderBrush" Color="#888" PresentationOptions:Freeze ="True"/>

<SolidColorBrush x:Key="HorizontalNormalBrush" Color="#888" PresentationOptions:Freeze ="True"/>

<SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#FFABD17F" PresentationOptions:Freeze ="True" />

<SolidColorBrush x:Key="GlyphBrush" Color="#FF61A10B" PresentationOptions:Freeze ="True"/>

<LinearGradientBrush x:Key="ScrollbarThumbBrush" StartPoint=".5,0" EndPoint=".5,1" PresentationOptions:Freeze ="True">

<GradientStop Offset="0" Color="#FF9CCC5E"></GradientStop>

<GradientStop Offset=".5" Color="#FF59AA05"></GradientStop>

<GradientStop Offset="1" Color="#FF9CCC5E"></GradientStop>

</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalScrollbarThumbBrush" StartPoint="0,.5" EndPoint="1,.5" PresentationOptions:Freeze ="True">

<GradientStop Offset="0" Color="#FF9CCC5E"></GradientStop>

<GradientStop Offset=".5" Color="#FF59AA05"></GradientStop>

<GradientStop Offset="1" Color="#FF9CCC5E"></GradientStop>

</LinearGradientBrush>

<Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">

<Setter Property="SnapsToDevicePixels" Value="True"/>

<Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="Focusable" Value="false"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type RepeatButton}">

<Border Name="Border"

Margin="1"

CornerRadius="2"

Background="{StaticResource NormalBrush}"

BorderBrush="{StaticResource HorizontalNormalBorderBrush}"

BorderThickness="1">

<Path HorizontalAlignment="Center"

VerticalAlignment="Center"

Fill="{StaticResource GlyphBrush}"

Stroke="White"

StrokeThickness="2"

Data="{Binding Path=Content,

RelativeSource={RelativeSource TemplatedParent}}" />

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsPressed" Value="true">

<Setter TargetName="Border" Property="Background"

Value="{StaticResource PressedBrush}" />

</Trigger>

<Trigger Property="IsEnabled" Value="false">

<Setter Property="Foreground"

Value="{StaticResource DisabledForegroundBrush}"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<!-- SrollViewer ScrollBar Repeat Buttons (The part in the middle,

<Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">

<Setter Property="SnapsToDevicePixels" Value="True"/>

<Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="IsTabStop" Value="false"/>

<Setter Property="Focusable" Value="false"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type RepeatButton}">

<Border Background="Transparent" />

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<!-- ScrollViewer ScrollBar Thumb, that part that can be dragged

<Style x:Key="ScrollBarThumbVertical" TargetType="{x:Type Thumb}">

<Setter Property="SnapsToDevicePixels" Value="True"/>

<Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="IsTabStop" Value="false"/>

<Setter Property="Focusable" Value="false"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type Thumb}">

<Border

CornerRadius="2"

Background="{StaticResource ScrollbarThumbBrush}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="1" />

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">

<Setter Property="SnapsToDevicePixels" Value="True"/>

<Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="IsTabStop" Value="false"/>

<Setter Property="Focusable" Value="false"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type Thumb}">

<Border

CornerRadius="2"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="1" />

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<ControlTemplate x:Key="VerticalScrollBar"

TargetType="{x:Type ScrollBar}">

<Grid >

<Grid.RowDefinitions>

<RowDefinition MaxHeight="18"/>

<RowDefinition Height="0.00001*"/>

<RowDefinition MaxHeight="18"/>

</Grid.RowDefinitions>

<Border

Grid.RowSpan="3"

CornerRadius="2"

Background="#FF757575" />

<RepeatButton

Grid.Row="0"

Style="{StaticResource ScrollBarLineButton}"

Foreground="White"

Height="18"

Command="ScrollBar.LineUpCommand"

Content="M 0 4 L 4 0 L 8 4 " />

<Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">

<Track.DecreaseRepeatButton>

<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand" />

</Track.DecreaseRepeatButton>

<Track.Thumb>

<Thumb Style="{StaticResource ScrollBarThumb}" Margin="2,0,2,0"

Background="{StaticResource ScrollbarThumbBrush}"

BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />

</Track.Thumb>

<Track.IncreaseRepeatButton>

<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand" />

</Track.IncreaseRepeatButton>

</Track>

<RepeatButton

Grid.Row="3"

Style="{StaticResource ScrollBarLineButton}"

Height="18"

Command="ScrollBar.LineDownCommand"

Content="M 0 0 L 4 4 L 8 0"/>

</Grid>

</ControlTemplate>

<!-- HorizontalScrollBar Template using the previously created Templates -->

<ControlTemplate x:Key="HorizontalScrollBar"

TargetType="{x:Type ScrollBar}">

<Grid >

<Grid.ColumnDefinitions>

<ColumnDefinition MaxWidth="18"/>

<ColumnDefinition Width="0.00001*"/>

<ColumnDefinition MaxWidth="18"/>

</Grid.ColumnDefinitions>

<Border

Grid.ColumnSpan="3"

CornerRadius="2"

Background="#FF757575" />

<RepeatButton

Grid.Column="0"

Style="{StaticResource ScrollBarLineButton}"

Width="18"

Command="ScrollBar.LineLeftCommand"

Content="M 4 0 L 0 4 L 4 8 " />

<Track

Name="PART_Track"

Grid.Column="1"

IsDirectionReversed="False">

<Track.DecreaseRepeatButton>

<RepeatButton

Style="{StaticResource ScrollBarPageButton}"

Command="ScrollBar.PageLeftCommand" />

</Track.DecreaseRepeatButton>

<Track.Thumb>

<Thumb

Style="{StaticResource ScrollBarThumb}"

Margin="0,2,0,2"

Background="{StaticResource HorizontalScrollbarThumbBrush}"

BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />

</Track.Thumb>

<Track.IncreaseRepeatButton>

<RepeatButton

Style="{StaticResource ScrollBarPageButton}"

Command="ScrollBar.PageRightCommand" />

</Track.IncreaseRepeatButton>

</Track>

<RepeatButton

Grid.Column="3"

Style="{StaticResource ScrollBarLineButton}"

Width="18"

Command="ScrollBar.LineRightCommand"

Content="M 0 0 L 4 4 L 0 8"/>

</Grid>

</ControlTemplate>

<!-- Style for overall ScrollBar -->

<Style x:Key="CustomScrollBar" TargetType="{x:Type ScrollBar}">

<Setter Property="SnapsToDevicePixels" Value="True"/>

<Setter Property="OverridesDefaultStyle" Value="true"/>

<Style.Triggers>

<Trigger Property="Orientation" Value="Horizontal">

<Setter Property="Width" Value="Auto"/>

<Setter Property="Height" Value="18" />

<Setter Property="Template"

Value="{StaticResource HorizontalScrollBar}" />

</Trigger>

<Trigger Property="Orientation" Value="Vertical">

<Setter Property="Width" Value="18"/>

<Setter Property="Height" Value="Auto" />

<Setter Property="Template"

Value="{StaticResource VerticalScrollBar}" />

</Trigger>

</Style.Triggers>

</Style>

Hi,

We do not observe a significant performance difference between your Custom ScrollBar and the one used by default in the Xceed Datagrid for WPF.

Please find attached a sample demonstrating it.

Regards,