WPF自定义ScrollViewer滚动条样式
程序员文章站
2022-06-08 18:40:47
...
<!-- 滚动条颜色 -->
<SolidColorBrush x:Key="ScrollBarBackground" Color="Transparent"/>
<SolidColorBrush x:Key="ScrollBarThumbNormal" Color="Black" Opacity="0.1" />
<SolidColorBrush x:Key="ScrollBarThumbBright" Color="Black" Opacity="0.5" />
<!-- 滚动条拇钮样式 -->
<Style x:Key="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle x:Name="thumbRect" Fill="{StaticResource ScrollBarThumbNormal}" RadiusX="4" RadiusY="4"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Fill" Value="{StaticResource ScrollBarThumbBright}" TargetName="thumbRect" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Fill" Value="{StaticResource ScrollBarThumbNormal}" TargetName="thumbRect" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 水平滚动条样式 -->
<Style x:Key="HorizontalScrollBarStyle" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="True"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<Setter Property="Background" Value="{StaticResource ScrollBarBackground}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="PART_Background" SnapsToDevicePixels="True" Background="{StaticResource ScrollBarBackground}">
<Track x:Name="PART_Track" IsDirectionReversed="False" IsEnabled="{TemplateBinding IsMouseOver}">
<Track.Thumb>
<Thumb x:Name="PART_Thumb" Style="{StaticResource ScrollBarThumbStyle}"/>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 垂直滚动条样式 -->
<Style x:Key="VerticalScrollBarStyle" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="True"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<Setter Property="Background" Value="{StaticResource ScrollBarBackground}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="PART_Background" SnapsToDevicePixels="True" Background="{StaticResource ScrollBarBackground}">
<Track x:Name="PART_Track" IsDirectionReversed="True" IsEnabled="{TemplateBinding IsMouseOver}">
<Track.Thumb>
<Thumb x:Name="PART_Thumb" Style="{StaticResource ScrollBarThumbStyle}"/>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 细滚动视图样式 -->
<Style x:Key="ThinScrollViewer" TargetType="ScrollViewer">
<Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle x:Name="Corner" Grid.Row="1" Grid.Column="1" Fill="{StaticResource ScrollBarBackground}" RadiusX="4" RadiusY="4"/>
<ScrollContentPresenter
x:Name="PART_ScrollContentPresenter"
Grid.Row="0" Grid.Column="0"
Margin="{TemplateBinding Padding}"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" />
<ScrollBar
x:Name="PART_HorizontalScrollBar"
Height="4" MinHeight="4"
Style="{DynamicResource HorizontalScrollBarStyle}"
Grid.Row="1" Grid.Column="0"
Orientation="Horizontal"
AutomationProperties.AutomationId="HorizontalScrollBar"
Minimum="0"
Maximum="{TemplateBinding ScrollableWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportWidth}"
Width="Auto" MinWidth="0"/>
<ScrollBar
x:Name="PART_VerticalScrollBar"
Width="4" MinWidth="4"
Style="{DynamicResource VerticalScrollBarStyle}"
Grid.Row="0" Grid.Column="1"
Orientation="Vertical"
AutomationProperties.AutomationId="VerticalScrollBar"
Minimum="0"
Maximum="{TemplateBinding ScrollableHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportHeight}"
Height="Auto" MinHeight="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 粗滚动视图样式 -->
<Style x:Key="ThickScrollViewer" TargetType="ScrollViewer">
<Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle x:Name="Corner" Grid.Row="1" Grid.Column="1" Fill="{StaticResource ScrollBarBackground}" RadiusX="4" RadiusY="4"/>
<ScrollContentPresenter
x:Name="PART_ScrollContentPresenter"
Grid.Row="0" Grid.Column="0"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
CanContentScroll="{TemplateBinding CanContentScroll}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"/>
<ScrollBar
x:Name="PART_HorizontalScrollBar"
Height="8" MinHeight="8"
Style="{DynamicResource HorizontalScrollBarStyle}"
Grid.Row="1" Grid.Column="0"
Orientation="Horizontal"
AutomationProperties.AutomationId="HorizontalScrollBar"
Minimum="0"
Maximum="{TemplateBinding ScrollableWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportWidth}"
Width="Auto" MinWidth="0"/>
<ScrollBar
x:Name="PART_VerticalScrollBar"
Width="8" MinWidth="8"
Style="{DynamicResource VerticalScrollBarStyle}"
Grid.Row="0" Grid.Column="1"
Orientation="Vertical"
AutomationProperties.AutomationId="VerticalScrollBar"
Minimum="0"
Maximum="{TemplateBinding ScrollableHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportHeight}"
Height="Auto" MinHeight="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>