首页 > Windows开发 > 详细

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

时间:2021-03-17 14:54:51      阅读:79      评论:0      收藏:0      [点我收藏+]

效果图:

技术分享图片

 

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

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

原文:https://www.cnblogs.com/pumbaa/p/14548651.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!