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

效果图:

[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

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

上一篇:windows下kafka安装及启动


下一篇:win10设置默认中英文符号【程序员标配】