[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">InlineRadioButton>
            <RadioButton x:Name="radio_overlay" Click="OnRadioClick" IsChecked="True" Margin="10 0 0 0">OverlayRadioButton>
        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