一、实现对ScrollViewer样式的自定义主要包括:
1、滚动条宽度设置
2、滚动条颜色
3、滚动条圆角
4、滚动条拉动时的效果mouseover
二、实现效果:
三、实现方法
1、创建资源字典(ResourceDictionary)文件
由于style代码比较多,之间在控件文件中加载style比较混乱,也不利于其它窗口复用,这里单独创建了ScrollViewDictionary.xaml文件代码如下:
-
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-
<ControlTemplate x:Key="MyScrollViewer" TargetType="{x:Type ScrollViewer}">
-
<!--View区域背景色-->
-
<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.Column="1" Fill="White" Grid.Row="1"/>
-
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
-
<ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource MyScrollBarStyle}"/>
-
<ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Style="{DynamicResource MyScrollBarStyle}"/>
-
</Grid>
-
</ControlTemplate>
-
-
-
<SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
-
-
<Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
-
<Setter Property="OverridesDefaultStyle" Value="true"/>
-
<Setter Property="Background" Value="Transparent"/>
-
<Setter Property="Focusable" Value="false"/>
-
<Setter Property="IsTabStop" Value="false"/>
-
<Setter Property="Template">
-
<Setter.Value>
-
<ControlTemplate TargetType="{x:Type RepeatButton}">
-
<Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
-
</ControlTemplate>
-
</Setter.Value>
-
</Setter>
-
</Style>
-
<!--滚动条颜色、圆角等设置-->
-
<Style x:Key="ScrollBarThumb" 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 Name="thumbRect" Fill="#03ffea" RadiusX="3" RadiusY="3"/>
-
<!--鼠标拉动滚动条时的颜色-->
-
<ControlTemplate.Triggers>
-
<Trigger Property="IsMouseOver" Value="True">
-
<Setter Property="Fill" Value="CornflowerBlue" TargetName="thumbRect" />
-
</Trigger>
-
</ControlTemplate.Triggers>
-
</ControlTemplate>
-
</Setter.Value>
-
</Setter>
-
</Style>
-
<Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
-
<Setter Property="OverridesDefaultStyle" Value="true"/>
-
<Setter Property="Background" Value="Transparent"/>
-
<Setter Property="Focusable" Value="false"/>
-
<Setter Property="IsTabStop" Value="false"/>
-
<Setter Property="Template">
-
<Setter.Value>
-
<ControlTemplate TargetType="{x:Type RepeatButton}">
-
<Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
-
</ControlTemplate>
-
</Setter.Value>
-
</Setter>
-
</Style>
-
<Style x:Key="MyScrollBarStyle" TargetType="{x:Type ScrollBar}">
-
<Setter Property="Background" Value="AliceBlue"/>
-
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
-
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
-
<!--滚动条宽度-->
-
<Setter Property="Width" Value="8"/>
-
<Setter Property="MinWidth" Value="6"/>
-
<Setter Property="Template">
-
<Setter.Value>
-
<ControlTemplate TargetType="{x:Type ScrollBar}">
-
<!--滚动条背景色-->
-
<Grid x:Name="Bg" Background="#001f55" SnapsToDevicePixels="true" Width="8">
-
<Grid.RowDefinitions>
-
<RowDefinition />
-
</Grid.RowDefinitions>
-
<Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}">
-
<Track.DecreaseRepeatButton>
-
<RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
-
</Track.DecreaseRepeatButton>
-
<Track.IncreaseRepeatButton>
-
<RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
-
</Track.IncreaseRepeatButton>
-
<Track.Thumb>
-
<Thumb Style="{StaticResource ScrollBarThumb}"/>
-
</Track.Thumb>
-
</Track>
-
</Grid>
-
<ControlTemplate.Triggers>
-
<Trigger Property="IsEnabled" Value="false">
-
<Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
-
</Trigger>
-
</ControlTemplate.Triggers>
-
</ControlTemplate>
-
</Setter.Value>
-
</Setter>
-
<Style.Triggers>
-
<Trigger Property="Orientation" Value="Horizontal">
-
<Setter Property="Width" Value="Auto"/>
-
<Setter Property="MinWidth" Value="0"/>
-
<Setter Property="Height" Value="6"/>
-
<Setter Property="MinHeight" Value="6"/>
-
<Setter Property="Background" Value="AliceBlue"/>
-
<Setter Property="Template">
-
<Setter.Value>
-
<ControlTemplate TargetType="{x:Type ScrollBar}">
-
<Grid x:Name="Bg" Background="Red" SnapsToDevicePixels="true">
-
<Grid.ColumnDefinitions>
-
<ColumnDefinition />
-
</Grid.ColumnDefinitions>
-
<Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}">
-
<Track.DecreaseRepeatButton>
-
<RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
-
</Track.DecreaseRepeatButton>
-
<Track.IncreaseRepeatButton>
-
<RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
-
</Track.IncreaseRepeatButton>
-
<Track.Thumb>
-
<Thumb Style="{StaticResource ScrollBarThumb}" />
-
</Track.Thumb>
-
</Track>
-
</Grid>
-
<ControlTemplate.Triggers>
-
<Trigger Property="IsEnabled" Value="false">
-
<Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
-
</Trigger>
-
</ControlTemplate.Triggers>
-
</ControlTemplate>
-
</Setter.Value>
-
</Setter>
-
</Trigger>
-
</Style.Triggers>
-
</Style>
-
</ResourceDictionary>
-
2、在窗口中引用资源字典
-
<Window.Resources>
-
<ResourceDictionary>
-
<ResourceDictionary.MergedDictionaries>
-
<ResourceDictionary Source="ScrollViewDictionary.xaml" />
-
</ResourceDictionary.MergedDictionaries>
-
</ResourceDictionary>
-
</Window.Resources>
3、scrollViewer中使用新样式
-
<ScrollViewer Template="{StaticResource MyScrollViewer}" Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" x:Name="scrList" Margin="0" VerticalScrollBarVisibility="Auto" Height="350" Width="250">
-
<StackPanel Orientation="Vertical" Name="layerList" ScrollViewer.VerticalScrollBarVisibility="Visible" Width="250" >
-
</StackPanel>
-
</ScrollViewer>
自定义完成,以上是所有步骤和代码,可以根据自己程序的整体设计来更改颜色、宽度、圆角等效果。