I have an app with a ScrollViewer. Where the 2 scrollbars meet is an annoying little square (see img below) I am trying to get rid of. When I "Snoop" the app I can find it as a "Rectangle" but I assume its part of the ScrollViewer?
I have searched and search for any info on this but all I can find are suggestions to hide it by placing something over the top of it :s
Can anyone point me in the right direction to sort this?
<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="Transparent" />
<RepeatButton
Grid.Column="0"
Style="{StaticResource ScrollBarLineButton}"
Width="18"
Command="ScrollBar.LineLeftCommand"
Content="M 4 0 L 4 8 L 0 4 Z" />
<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,1,0,1"
Background="{DynamicResource NormalBrush}"
BorderBrush="{DynamicResource NormalBorderBrush}" />
</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 Z"/>
</Grid>
</ControlTemplate>
I was just having the exact same problem, but found this answer here on Stack to solve it for me:
Can't fully style a ListBox/Scrollviewer in WPF
Although that solution does put something in place of the square, it's done in the ControlTemplate (of the ScrollViewer, not the ScrollBar) rather than via some bubble-gum-patching approach of putting something on top of the ScrollViewer control.
However, I found that by just omitting the Rectangle definition from that template altogether, the annoying corner square just goes away - i.e. that area takes on whatever the background color of the ScrollViewer is (which, in the example given, is transparent - and that suits me fine. If you want to set the color of the ScrollViewer background, just set the Background property of the Grid).
So try adding this to your Resource:
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter Grid.Column="0" />
<ScrollBar x:Name="PART_VerticalScrollBar" Grid.Row="0" Grid.Column="1" Value="{TemplateBinding VerticalOffset}" Maximum="{TemplateBinding ScrollableHeight}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
<ScrollBar x:Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1" Grid.Column="0" Value="{TemplateBinding HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
<!--<Rectangle Grid.Row="1" Grid.Column="1" Fill="Red"/>-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a custom control that needs the ViewportWidth and ViewportHeight of ScrollViewer. But the answered overrided style broke that part.
So maybe an easy way.
<Style TargetType="{x:Type ScrollViewer}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</Style.Resources>
</Style>
The Rectangle Fill property is set to SystemColors.ControlBrushKey in the default Template
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With