WPF 自定义滚动条控件ScrollViewer（三）

最新推荐文章于 2024-01-23 15:02:27 发布
最新推荐文章于 2024-01-23 15:02:27 发布
阅读量965 收藏 2
点赞数
分类专栏： WPF 文章标签： wpf c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43024228/article/details/120321636
版权

WPF 自定义滚动条控件ScrollViewer（三）

一、添加资源字典：
ScrollViewer.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <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}">
                    <Grid>
                        <Rectangle
                            Fill="#90000000"
                            RadiusX="3"
                            RadiusY="3"/>
                    </Grid>
                </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="Opacity"
                Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}"
                               Width="{TemplateBinding Width}"
                               Height="{TemplateBinding Height}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <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="Opacity"
                Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}"
                               Width="{TemplateBinding Width}"
                               Height="{TemplateBinding Height}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="for_scrollbar"
           TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled"
                Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled"
                Value="false"/>
        <Setter Property="Background"
                Value="Transparent"/>
        <Setter Property="Margin"
                Value="0,1,1,6"/>
        <Setter Property="Width"
                Value="5"/>
        <Setter Property="MinWidth"
                Value="5"/>
        <Setter Property="Opacity"
                Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid x:Name="Bg" SnapsToDevicePixels="true">
                        <Track x:Name="PART_Track"
                               IsEnabled="{TemplateBinding IsMouseOver}"
                               IsDirectionReversed="true">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton
                                    Style="{StaticResource VerticalScrollBarPageButton}"
                                    Command="{x:Static ScrollBar.PageUpCommand}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton
                                    Style="{StaticResource VerticalScrollBarPageButton}"
                                    Command="{x:Static ScrollBar.PageDownCommand}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumb}"/>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation"
                     Value="Horizontal">
                <Setter Property="Background"
                        Value="Transparent"/>
                <Setter Property="Margin"
                        Value="1,0,6,1"/>
                <Setter Property="Height"
                        Value="5"/>
                <Setter Property="MinHeight"
                        Value="5"/>
                <Setter Property="Width"
                        Value="Auto"/>
                <Setter Property="Opacity"
                        Value="0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" SnapsToDevicePixels="true">
                                <Track x:Name="PART_Track"
                                       IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}"
                                                      Command="{x:Static ScrollBar.PageLeftCommand}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}"
                                                      Command="{x:Static ScrollBar.PageRightCommand}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource ScrollBarThumb}"/>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!-- ScrollViewer -->
    <Style x:Key="for_scrollviewer"
           TargetType="{x:Type ScrollViewer}">
        <Setter Property="BorderBrush"
                Value="LightGray"/>
        <Setter Property="BorderThickness"
                Value="0"/>
        <Setter Property="HorizontalContentAlignment"
                Value="Left"/>
        <Setter Property="HorizontalScrollBarVisibility"
                Value="Auto"/>
        <Setter Property="VerticalContentAlignment"
                Value="Top"/>
        <Setter Property="VerticalScrollBarVisibility"
                Value="Auto"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True">
                        <Grid Background="{TemplateBinding Background}">
                            <ScrollContentPresenter
                                Cursor="{TemplateBinding Cursor}"
                                Margin="{TemplateBinding Padding}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"/>
                            <ScrollBar x:Name="PART_VerticalScrollBar"
                                       HorizontalAlignment="Right"
                                       Maximum="{TemplateBinding ScrollableHeight}"
                                       Orientation="Vertical"
                                       Style="{StaticResource for_scrollbar}"
                                       ViewportSize="{TemplateBinding ViewportHeight}"
                                       Value="{TemplateBinding VerticalOffset}"
                                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                            <ScrollBar x:Name="PART_HorizontalScrollBar"
                                       Maximum="{TemplateBinding ScrollableWidth}"
                                       Orientation="Horizontal"
                                       Style="{StaticResource for_scrollbar}"
                                       VerticalAlignment="Bottom"
                                       Value="{TemplateBinding HorizontalOffset}"
                                       ViewportSize="{TemplateBinding ViewportWidth}"
                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="ScrollChanged">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_VerticalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0:0:1"/>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_VerticalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0:0:1"
                                        BeginTime="0:0:1"/>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_HorizontalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0:0:1"/>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_HorizontalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0:0:1"
                                        BeginTime="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseEnter"
                                      SourceName="PART_VerticalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_VerticalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave"
                                      SourceName="PART_VerticalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_VerticalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseEnter"
                                      SourceName="PART_HorizontalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_HorizontalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave"
                                      SourceName="PART_HorizontalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_HorizontalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

二.主窗体代码：

<Window x:Class="WpfApp8.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp8"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ScrollViewer.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>
        <!--<ContentControl Margin="10">
            <ContentControl.Template>
                <ControlTemplate TargetType="{x:Type ContentControl}">
                    <ScrollViewer Style="{StaticResource for_scrollviewer}">
                        <ContentPresenter/>
                    </ScrollViewer>
                </ControlTemplate>
            </ContentControl.Template>
            <Canvas Height="1600" Width="1600" Background="AliceBlue">

            </Canvas>
        </ContentControl>-->
        <ScrollViewer Style="{StaticResource for_scrollviewer}" 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" >
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据一"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据二"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据三"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据四"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据五"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据六"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据七"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据八"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据九"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据十"></Button>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>

三、运行效果
在这里插入图片描述
引用：https://blog.csdn.net/qqamoon/article/details/7317891

Danny_hi
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF自定义滚动文字控件(支持方向上下左右滚动)
09-24
WPF自定义滚动文字控件(支持方向上下左右滚动)
WPF 自定义虚拟键盘控件
12-28
WPF .net Framework 4.6.2 虚拟键盘自定义控件；适合新手借鉴、程序应急使用；直接上源码，可自行修改； 虚拟键盘(支持英文，数字输入，及部分特殊字符(特殊字符都为英文字符)) 1.0版本；后续慢慢增加其他功能及其他自定义控件
WPF 自定义滚动条（ScrollView、ScrollBar）样式
weixin_34326179的博客
04-07 993
一、滚动条基本样式 本次修改Scrollview及ScrollBar滚动条样式是通过纯样式实现的。修改的内容包含滚动条的颜色，上下按钮的隐藏。另外添加了鼠标经过滚动条动画。 style样式如下： <!-- ScrollViewer 滚动条 --> <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"...
WPF 重写ListBox Style 样式 Horizontal ScrollBar 侧滑块
withyzu
04-19 904
效果图： 只修改了ListBox 的 Horizontal ScrollBar； vertical ScrollBar 未添加； 根据Blend ListBox的模板、《WPF编程宝典》所写 一、数值转换器 using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Text; using System.Threading.Tasks; using S
wpf ScrollBar自定义样式
最新发布
qq_69686662的博客
01-23 1101
WPF ScrollBar滚动条样式是通过纯样式实现的。修改的内容包含滚动条的颜色，上下按钮的隐藏。另外添加了鼠标经过滚动条动画。PS:改代码影响全局。
WPF 控件 (七、ScrollViewer)
LyRics1996的博客
04-03 742
【代码】WPF 控件 (七、ScrollViewer)
WPF系列教程（十四）：特殊容器控件ScrollViewer
qq_43511299的博客
11-24 5807
ScrollViewer是一个可以滚动的控件。它使得大量内容在有限容器内显示成为可能。 在窗体中添加ScrollViewer控件，在ScrollViewer中添加一个文本框TextBox，将Text属性设置为较长的字符串。 （可以用word的语句自动生成功能，在word中输入函数=rand(1,2)即可） 利用滚动条的效果： ScrollViewer有一个滚动条设置的属性，在垂直方向有VerticalScrollBarVisibility=“Hidden” 有四种取值，分别是： Visible：显示滚动条
WPF（滚动条）
breakbridge的博客
07-28 2922
ScrollBar控件出奇复杂。它实际上是一个由更小部分组成的集合。 滚动条的背景由Track类表示（实际上是一个具有阴影并且被拉伸占满整个滚动条长度的矩形）。滚动条的末尾处是按钮，通过这些按钮可以向上或向下（或向左或向右）滚动一个步长。这些按钮是RepeatButton类的实例，该类继承自ButtonBase类。RepeatButton类和普通Button类之间的重要区别在于，如果在RepeatButton按钮上保持鼠标按下的状态，就会反复触发Click事件。 在滚动...
C# wpf ScrollBar自定义样式详解
codeofcc的博客
10-16 7315
滚动条是一个常见控件，很多控件中都包含滚动条，比如ListBox、ComboBox、GridView等。wpf默认的滚动条的样式并不是特别好看，而且经常与UI设计的滚动条不一致，这个时候我们就需要自定义滚动条了。值得一提的是这，wpf的滚动条定制性和拓展性都非常好，这就为我们自定义滚动条提供了非常有利的条件。......
WPF ScrollViewer滚动
m0_48915942的博客
12-13 355
使用ScrollChanged事件触发通过偏移量来判断。if (scroll!= null)//当数据不在增加的时候//当数据增加,自动滑动else。
WPF实现ScrollViewer滚动到指定控件处
10-19
主要为大家详细介绍了WPF实现ScrollViewer滚动到指定控件处，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
WPF自定义时间控件，可选择日期、时间
04-13
WPF自定义时间控件，可选择日期、时间
WPF如何自定义TabControl控件样式示例详解
08-27
主要给大家介绍了关于WPF如何自定义TabControl控件样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
WPF PopUp的简单使用
热门推荐
韬光养晦
11-29 1万+
WPF PopUp的简单使用 <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2
WPF 自定义各类按钮样式
韬光养晦
03-15 1万+
WPF 自定义按钮样式 Xaml代码： <Window x:Class="WPF0315b.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ...
WPF中TreeView的使用
韬光养晦
07-23 1万+
WPF中TreeView的使用 一、最简单的用法，使用TreeViewItem展开，如下： <Window x:Class="WpfApp2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.m
WPF 阴影的简单使用（DropShadowEffect）
韬光养晦
11-29 8396
WPF 阴影的简单使用（DropShadowEffect） 效果一： <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.co
WPF 值转换器（Converter）的使用
韬光养晦
11-09 8231
WPF 转换器（Converter）的使用 示例一、ViewModel层int型属性Gender绑定界面表示性别的两个RadioButton，Gender=1表示男，Gender=2表示女； 窗体xaml代码： <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.mic
WPF TabControl控件示例
韬光养晦
04-17 8167
WPF TabControl控件示例 运行效果： 主窗体XAML代码： <Window x:Class="WPF0417.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/win...
wpf 设置滚动条的风格
06-04
WPF 中可以通过自定义样式来改变滚动条的外观。以下是实现步骤： 1. 在 XAML 中定义一个样式，设置 TargetType 为 ScrollBar。 ```xaml <Window.Resources> <Style x:Key="ScrollBarStyle" TargetType="ScrollBar"> <!-- 自定义样式 --> </Style> </Window.Resources> ``` 2. 在样式中定义滚动条的控件模板，可以使用一系列 WPF 控件和属性来自定义滚动条的外观。 ```xaml <Window.Resources> <Style x:Key="ScrollBarStyle" TargetType="ScrollBar"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ScrollBar"> <Grid> <Border Background="Gray" CornerRadius="5"/> <RepeatButton x:Name="PART_LineUpButton" Style="{StaticResource ScrollBarButtonStyle}" Content="↑"/> <RepeatButton x:Name="PART_LineDownButton" Style="{StaticResource ScrollBarButtonStyle}" Content="↓"/> <Thumb x:Name="PART_Thumb" Style="{StaticResource ScrollBarThumbStyle}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> ``` 在上面的模板中，我们使用了 Grid、Border、RepeatButton 和 Thumb 等控件来构建滚动条的外观。其中 RepeatButton 和 Thumb 也可以通过自定义样式来改变其外观。 3. 在需要使用滚动条的控件上，使用 ScrollViewer 控件，并设置其 VerticalScrollBarStyle 或 HorizontalScrollBarStyle 属性为自定义的样式。 ```xaml <ScrollViewer VerticalScrollBarStyle="{StaticResource ScrollBarStyle}"> <!-- 内容 --> </ScrollViewer> ``` 通过以上步骤，就可以自定义滚动条的外观了。需要注意的是，不同的控件可能需要不同的样式，需要根据实际情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值