[WPF] 默认滚动条，通过附加属性和样式实现自定义

效果图：

 

Xaml文件：

<DockPanel Margin="10">
    <WrapPanel DockPanel.Dock="Top" Margin="10">
        <DockPanel Margin="6">
            <TextBlock VerticalAlignment="Center">滚动条样式：</TextBlock>
            <RadioButton x:Name="radio_inline" Click="OnRadioClick">Inline</RadioButton>
            <RadioButton x:Name="radio_overlay" Click="OnRadioClick" IsChecked="True" Margin="10 0 0 0">Overlay</RadioButton>
        </DockPanel>
        <DockPanel Margin="6">
            <TextBlock VerticalAlignment="Center">内容高度：</TextBlock>
            <TextBox MinWidth="60" Text="{Binding Height,ElementName=rec,UpdateSourceTrigger=PropertyChanged}" />
        </DockPanel>
        <DockPanel Margin="6">
            <TextBlock VerticalAlignment="Center">滑块窄：</TextBlock>
            <TextBox MinWidth="60" Text="{Binding Path=(pp:ScrollBarElement.ThumbWidth),ElementName=scroll}" />
        </DockPanel>
        <DockPanel Margin="6">
            <TextBlock VerticalAlignment="Center">滑块窄 :Hover：</TextBlock>
            <TextBox MinWidth="60" Text="{Binding Path=(pp:ScrollBarElement.HoverThumbWidth),ElementName=scroll}" />
        </DockPanel>
        <DockPanel Margin="6">
            <TextBlock VerticalAlignment="Center">滑块最小长度：</TextBlock>
            <TextBox MinWidth="60" Text="{Binding Path=(pp:ScrollBarElement.ThumbMinLength),ElementName=scroll}" />
        </DockPanel>
        <DockPanel Margin="6">
            <TextBlock VerticalAlignment="Center">滑块圆角：</TextBlock>
            <TextBox MinWidth="60" Text="{Binding Path=(pp:ScrollBarElement.ThumbRadius),ElementName=scroll}" />
        </DockPanel>
        <DockPanel Margin="6">
            <TextBlock VerticalAlignment="Center">滑块圆角 :Hover：</TextBlock>
            <TextBox MinWidth="60" Text="{Binding Path=(pp:ScrollBarElement.HoverThumbRadius),ElementName=scroll}" />
        </DockPanel>
    </WrapPanel>
    <ScrollViewer x:Name="scroll" Style="{StaticResource PP.Styles.ScrollViewer.Overlay}" HorizontalScrollBarVisibility="Auto" Margin="10">
        <Rectangle x:Name="rec" Width="1280" Height="720" Fill="{StaticResource drawingBrush}" />
    </ScrollViewer>
</DockPanel>

 

通过样式和修改附加属性，实现各种效果；

 

新增的附加属性有：

 

1、ScrollBarElement.Background，滚动条的背景色，与ScrollViewer.Background区分开；

2、ThumbFill，拖动块填充颜色；

3、ThumbHoverFill，鼠标悬浮时拖动块填充颜色；

4、ThumbPressFill，鼠标按压时拖动块填充颜色；

5、ThumbWidth，拖动块宽度（横向时指高度）；

6、HoverThumbWidth，鼠标悬浮时拖动块宽度（横向时指高度）；

7、ThumbRadius，拖动块圆角大小；

8、HoverThumbRadius，鼠标悬浮时拖动块圆角大小；

9、ThumbMinLength，拖动块最小高度（横向时指宽度）；

 

代码已上传至GitHub：https://github.com/LowPlayer/PP.Wpf