Scrollviewer without background - wpf

Question

I would like to ask you if somebody know how to create ScrollViewer without background. I know that it is not possible with style or template (I guess) and must be created new component from ScrollVeiwer, but I can't find which method/property override.
For example:
<Window x:Class="WpfScroll.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<Grid>
<Button x:Name="bt"></Button>
<ScrollViewer Background="{x:Null}" Margin="20">
<StackPanel Orientation="Horizontal" Background="{x:Null}">
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
</StackPanel>
</ScrollViewer>
</Grid>
</Window>
What I want is ability to click on button "bt" on background between rectangles.
Thanks for advice.
-pav-

Answer 1

You can handle PreviewMouseDown Event of the ScrollViewer.
In your xaml:
<Grid>
<!--Button is removed as it will be not used-->
<ScrollViewer Background="{x:Null}" Margin="20" PreviewMouseDown="ScrollViewer_MouseDown">
<StackPanel Orientation="Horizontal" Background="{x:Null}">
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
</StackPanel>
</ScrollViewer>
</Grid>
As It is PreviewMouseDown (Tunneling) Event. So Wherever you click on scrollviewer, Event will be fired Whether it is Rectangle or ScrollViewer itself.
In your code behind, You can handle it by e.Source Parameter.
PreviewMouseDown Event in .cs file is:
private void ScrollViewer_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
if (e.Source.GetType() == typeof(ScrollViewer))
{
//Code which you want to perform on that Button click will be here.
}
if (e.Source.GetType() == typeof(Rectangle))
{
//Code which you want to perform on rectangle will be here.
}
}
I hope it will help you.

Answer 2

Copy paste below style as it is :
<Window.Resources>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled"
Value="false" />
<Setter Property="Foreground"
Value="#ADABAB" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Width"
Value="7" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.00001*" />
</Grid.RowDefinitions>
<Border x:Name="CornerScrollBarRectangle"
CornerRadius="5" BorderThickness="1" BorderBrush="Brown"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Margin="0,1,0,1"
Background="Transparent" />
<Track x:Name="PART_Track"
Grid.Row="0"
IsDirectionReversed="true"
Focusable="false">
<Track.Thumb>
<Thumb x:Name="Thumb"
Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollBarTrackThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp"
Command="ScrollBar.PageDownCommand"
Opacity="0"
Focusable="false" />
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Opacity="0"
Focusable="false" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb"
Property="IsMouseOver"
Value="true">
<Setter Value="{DynamicResource ButtonSelectBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger SourceName="Thumb"
Property="IsDragging"
Value="true">
<Setter Value="{DynamicResource DarkBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Thumb"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="Orientation"
Value="Horizontal">
<Setter TargetName="GridRoot"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter Property="Width"
Value="Auto" />
<Setter Property="Height"
Value="8" />
<Setter TargetName="Thumb"
Property="Tag"
Value="Horizontal" />
<Setter TargetName="PageDown"
Property="Command"
Value="ScrollBar.PageLeftCommand" />
<Setter TargetName="PageUp"
Property="Command"
Value="ScrollBar.PageRightCommand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarTrackThumb"
TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid" Background="Transparent">
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Fill="Transparent" />
<Border x:Name="CornerScrollBarRectangle"
CornerRadius="5" BorderThickness="1" BorderBrush="Yellow"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Margin="0,1,0,1"
Background="Transparent" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag"
Value="Horizontal">
<Setter TargetName="CornerScrollBarRectangle"
Property="Width"
Value="Auto" />
<Setter TargetName="CornerScrollBarRectangle"
Property="Height"
Value="6" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

Answer 3

OK, You can use this example:
<Window x:Class="scrollviewerbackground.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:scrollviewerbackground"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button x:Name="bt"></Button>
<local:ScrollViewerClickable HorizontalScrollBarVisibility="Visible" Margin="20">
<StackPanel IsHitTestVisible="True" Orientation="Horizontal" Background="{x:Null}">
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
</StackPanel>
</local:ScrollViewerClickable>
</Grid>
public class ScrollViewerClickable : ScrollViewer
{
protected override HitTestResult HitTestCore(PointHitTestParameters hitTestParameters)
{
return null;
}
}