WPF 重绘滚动条

最新推荐文章于 2022-08-30 11:22:29 发布
最新推荐文章于 2022-08-30 11:22:29 发布
阅读量282 收藏
点赞数
分类专栏： WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41946341/article/details/112437777
版权

在这里插入图片描述

<!--滚动两边按钮样式-->
<Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
    <Setter Property="Background" Value="Transparent"></Setter>
    <Setter Property="Foreground" Value="Green"></Setter>
    <Setter Property="VerticalAlignment" Value="Center"></Setter>
    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
    <Setter Property="Width" Value="auto"></Setter>
    <Setter Property="Height" Value="auto"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <TextBlock x:Name="FIcon" FontSize="12" Text="123456789" Margin="1"></TextBlock>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="Black" TargetName="FIcon"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Foreground" Value="Red" TargetName="FIcon"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Opacity" Value="0.5" TargetName="FIcon"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<!--滚动条滑块两边按钮样式-->
<Style x:Key="ScrollBarTrackButton" TargetType="{x:Type RepeatButton}">
    <Setter Property="Background" Value="Transparent"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Border Background="Transparent"></Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<!--滚动条滑块样式-->
<ControlTemplate x:Key="ThumbTemplate" TargetType="Thumb">
    <Grid>
        <Border x:Name="Bg" CornerRadius="2" Margin="2" SnapsToDevicePixels="True" Background="#DBDBDB"></Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Opacity" Value="0.5" TargetName="Bg"></Setter>
            <Setter Property="Background" Value="Gray" TargetName="Bg"></Setter>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#A5A5A5" TargetName="Bg"></Setter>
        </Trigger>
        <Trigger Property="IsDragging" Value="True">
            <Setter Property="Background" Value="#6F6F6F" TargetName="Bg"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<!--水平滚滚动条模板-->
<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
    <Grid x:Name="HorizontalRoot" Height="{TemplateBinding Height}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <!--内部背景-->
        <Border x:Name="BgInner" Grid.Column="1" Margin="0" SnapsToDevicePixels="True" Opacity="0.3" CornerRadius="6" Background="Black"/>
        <!--中间滑动区域-->
        <Track x:Name="PART_Track" IsDirectionReversed="False" Grid.Column="1">
            <!--左滑块-->
            <Track.DecreaseRepeatButton>
                <RepeatButton x:Name="HorizontalLargeDecrease" Command="ScrollBar.PageLeftCommand" IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb Template="{StaticResource ThumbTemplate}" />
            </Track.Thumb>
            <!--右滑块-->
            <Track.IncreaseRepeatButton>
                <RepeatButton x:Name="HorizontalLargeIncrease" Command="ScrollBar.PageRightCommand" IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
            </Track.IncreaseRepeatButton>
        </Track>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="BgInner" Property="Opacity" Value="0.5"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<!--垂直滚滚动条模板-->
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
    <Grid x:Name="VerticalRoot" Height="{TemplateBinding Height}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <!--内部背景-->
        <Border x:Name="BgInner" Grid.Row="1" Margin="0" CornerRadius="6" SnapsToDevicePixels ="True" Opacity="0.3" Background="Transparent"/>
        <!--中间滑动区域-->
        <Track x:Name="PART_Track" IsDirectionReversed="true" Grid.Row="1">
            <!--上滑块-->
            <Track.DecreaseRepeatButton>
                <RepeatButton x:Name="HorizontalLargeDecrease" Command="ScrollBar.PageUpCommand" IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
            </Track.DecreaseRepeatButton>
            <!--中间滑块-->
            <Track.Thumb>
                <Thumb Template="{StaticResource ThumbTemplate}" MinHeight="10"/>
            </Track.Thumb>
            <!--下滑块-->
            <Track.IncreaseRepeatButton>
                <RepeatButton x:Name="HorizontalLargeIncrease" Command="ScrollBar.PageDownCommand" IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
            </Track.IncreaseRepeatButton>
        </Track>
        </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="BgInner" Property="Opacity" Value="0.5"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<!--ScrollBar样式-->
<Style x:Key="DefaultScrollBar" TargetType="{x:Type ScrollBar}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Style.Triggers>
        <Trigger Property="Orientation" Value="Horizontal">
            <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
            <Setter Property="Height" Value="10" />
        </Trigger>
        <Trigger Property="Orientation" Value="Vertical">
            <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
            <Setter Property="Width" Value="10" />
        </Trigger>
    </Style.Triggers>
</Style>
<!--ScrollViewer样式-->
<Style x:Key="DefaultScrollViewer" TargetType="{x:Type ScrollViewer}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <ControlTemplate.Resources>
                    <Storyboard x:Key="Storyboard1">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar">
                            <EasingDoubleKeyFrame KeyTime="0:0:.2" Value=".8"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_HorizontalScrollBar">
                            <EasingDoubleKeyFrame KeyTime="0:0:.2" Value=".8"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                    <Storyboard x:Key="Storyboard2">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar">
                            <EasingDoubleKeyFrame KeyTime="0:0:.2" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_HorizontalScrollBar">
                            <EasingDoubleKeyFrame KeyTime="0:0:.2" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </ControlTemplate.Resources>
                <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" x:Name="leftColumn" />
                        <!--<ColumnDefinition Width="Auto" x:Name="rightColumn" />-->
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <!--<RowDefinition Height="Auto" />-->
                    </Grid.RowDefinitions>
                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" Grid.Row="0" Grid.Column="0" />
                    <!--垂直滚动条 -->
                    <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" ViewportSize="{TemplateBinding ViewportHeight}" Opacity="0" HorizontalAlignment="Right" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                    <!--水平底部滚动条-->
                    <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Opacity="0" VerticalAlignment="Bottom" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" />
                </Grid>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="ScrollBar" BasedOn="{StaticResource DefaultScrollBar}"/>
<Style TargetType="ScrollViewer" BasedOn="{StaticResource DefaultScrollViewer}"/>

参考:
WPF ControlBase

@kolalo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF中自定义Scrollbar 滚动条 样式 图片
11-24
WPF中自定义Scrollbar 样式，设置颜色或者自定义图片
自绘滚动条
04-22
总的来说，自绘滚动条是一项高级的UI定制技巧，需要对Windows Forms或WPF的绘制机制有深入理解。这种技术可以用于创建独特风格的应用程序界面，提升用户体验，但同时也需要更多的开发时间和精力投入。如果你正在寻找...
在WPF窗体中重绘
weixin_34404393的博客
12-08 415
  写这篇主要是为了验证任何元素自身都具备绘图功能. 在默认Window中重写OnRender方法 protected override void OnRender(DrawingContext drawingContext) { drawingContext.DrawRectangle(Brushes.White, null, new Rect(0, 0, this.Actua...
继续聊WPF——自定义滚动条
kanwoerzi
11-21 130
关键点：Track控件没有默认模板，它包括三个部分 DecreaseRepeatButton——这是一个RepeatButton即滑块左（上）的部分； IncreaseRepeatButton——同上，即滑块右（下）部分； Thumb——很明显了，这是拖动的滑块，请参考前面的文章。 &lt;Window x:Class="WpfApplication1.Window1" ...
WPF样式-ScrollBar
weixin_30535043的博客
05-08 689
1.对于滚动条ScrollBar样式的设计，通过继承，可以实现在不同的控件中，如TextBox、RichTextBox、DataGrid、ListBox...等带有滚动条的控件统一修改。 2.在对ScrollBar样式的设计过程中，很容易实现 + -按钮、滚动条宽度、滚动条的背景颜色的修改，如下代码中 1 <ResourceDictionary xmlns="http:...
datagridview 自定义滚动条
12-17
6. **性能优化**：自定义滚动条时要注意性能问题，尤其是在大数据量时，避免频繁的重绘和计算，可以使用虚拟化技术减少内存占用和提高响应速度。 7. **样式和主题**：对于Windows Forms，可以使用...
WPF 模仿IOS 安卓 滚动时间选择
11-24
对性能进行优化，如减少不必要的重绘或使用虚拟化技术来提高大量数据的加载速度。 最后，将这个自定义的时间选择器控件整合到你的WPF项目中，就可以直接使用了。记住，良好的代码组织和注释可以使其他开发者更容易...
能保存 重绘的画图工具
06-24
在IT领域，开发一个能保存、重绘及具备多种图形绘制功能的画图工具是一项常见的任务，这通常涉及到图形用户界面（GUI）编程和图像处理技术。本项目名为“能保存 重绘的画图工具”，它实现了基本的画图功能，包括绘制...
WPF用鼠标在Canvas画线
03-19
为了使画布更易于使用，可以添加滚动条、颜色选择器、线条样式选择等控件，让用户自定义画线参数。 ### 4. 性能优化 对于大量线条的绘制，考虑使用`VisualBrush`或`DrawingVisual`进行优化，减少重绘的性能开销。 ...
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
05-20
WPF ScrollViewer(滚动条) 自定义样式表 这个样式比较适合触摸屏上使用 滚动条设计的很宽
wpf之自定义滚动条
weixin_34416649的博客
10-20 370
原文:wpf之自定义滚动条首先我们添加一个带滚动条的textbox控件： &lt;ScrollViewer Height="130" Width="620" VerticalScrollBarVisibility="Auto" Style="{StaticResource for_scrollviewer}"&gt; &lt;TextBlock xml:sp...
WPF（滚动条）
breakbridge的博客
07-28 2988
ScrollBar控件出奇复杂。它实际上是一个由更小部分组成的集合。 滚动条的背景由Track类表示（实际上是一个具有阴影并且被拉伸占满整个滚动条长度的矩形）。滚动条的末尾处是按钮，通过这些按钮可以向上或向下（或向左或向右）滚动一个步长。这些按钮是RepeatButton类的实例，该类继承自ButtonBase类。RepeatButton类和普通Button类之间的重要区别在于，如果在RepeatButton按钮上保持鼠标按下的状态，就会反复触发Click事件。 在滚动...
scrollbar wpf 高度_Wpf ScrollBar自定义样式
weixin_39557087的博客
12-21 130
Wpf的ScrollBar可以分为六个区域：A.背景、B.向上按钮、C.向下的按钮、D.Track里面向上的按钮、E.Track里面向下的按钮、F.Track的Thumb详情见下图下面通过一个例子来自定义ScrollBar的样式这里用到了两个其它的样式，其中 scroll_background 定义Track.DecreaseRepeatButton 、 Track.IncreaseRepeatB...
WPF ---- ScrollBarStyle
weixin_30265171的博客
02-04 63
Style x:Key="VerticalScrollBarThumbStyle" TargetType="{x:Type Thumb}"> ...
C# wpf ScrollBar自定义样式详解
codeofcc的博客
10-16 8106
滚动条是一个常见控件，很多控件中都包含滚动条，比如ListBox、ComboBox、GridView等。wpf默认的滚动条的样式并不是特别好看，而且经常与UI设计的滚动条不一致，这个时候我们就需要自定义滚动条了。值得一提的是这，wpf的滚动条定制性和拓展性都非常好，这就为我们自定义滚动条提供了非常有利的条件。......
WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
weixin_33858249的博客
11-23 444
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要内容： ScrollViewer的样式拆解及基本样式定义； ListBox集合控件的样式定义； 二．ScrollViewer自定义样式 ScrollViewer在各种列表、集合...
WPF 控件专题 ScrollBar控件详解
^@^lemon tea^@^
08-30 2812
WPF 控件专题 ScrollBar控件详解
wpf RichTextBox显示滚动条
最新发布
06-01
如果你想在 WPF RichTextBox 中显示滚动条，可以设置 VerticalScrollBarVisibility 和 HorizontalScrollBarVisibility 属性。这些属性决定 RichTextBox 控件的垂直和水平滚动条的可见性。以下是一些示例代码： ```xml <RichTextBox VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"/> ``` 在上面的例子中，我将垂直滚动条和水平滚动条的可见性都设置为 Auto。这意味着当 RichTextBox 中的内容超出控件的大小时，滚动条会自动出现。 如果你想要始终显示滚动条，可以将这些属性设置为 Visible。如果你想要禁用滚动条，可以将它们设置为 Hidden。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值