WPF ScrollViewer 样式

最新推荐文章于 2025-09-22 19:22:25 发布
原创 最新推荐文章于 2025-09-22 19:22:25 发布 · 5.2k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这篇博客介绍了如何为WPF应用中的ScrollViewer组件自定义样式，包括设置滚动条的颜色、背景、箭头样式以及按下和鼠标悬停时的视觉效果。通过定义不同的样式模板，可以实现不同状态下的滚动条外观变化。 
[code=csharp]
  <!--所有页面滚动条样式-->
        <Style TargetType="{x:Type ScrollViewer}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="CanContentScroll" Value="True"></Setter>
            <Style.Resources>
                <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#D6D4D4" />
                <SolidColorBrush x:Key="NormalBrush" Color="Transparent" />
                <SolidColorBrush x:Key="NormalBorderBrush" Color="#D6D4D4" />
                <SolidColorBrush x:Key="HorizontalNormalBrush" Color="#D6D4D4" />
                <SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#D6D4D4" />
                <!--方向箭头颜色-->
                <SolidColorBrush x:Key="GlyphBrush" Color="Black" />
                <LinearGradientBrush x:Key="PressedBrush"
            StartPoint="0,0" EndPoint="0,1">
                    <GradientBrush.GradientStops>
                        <GradientStopCollection>
                            <GradientStop Color="#BBB" Offset="0.0"/>
                            <GradientStop Color="#EEE" Offset="0.1"/>
                            <GradientStop Color="#EEE" Offset="0.9"/>
                            <GradientStop Color="#FFF" Offset="1.0"/>
                        </GradientStopCollection>
                    </GradientBrush.GradientStops>
                </LinearGradientBrush>
                <!--方向箭头按钮-->
                <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Border Name="Border" Margin="1" Background="{StaticResource NormalBrush}">
                                    <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{StaticResource GlyphBrush}"
            Data="{Binding Path=Content,
                RelativeSource={RelativeSource TemplatedParent}}" />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <!--选择箭头时的背景色-->
                                    <Trigger Property="IsPressed" Value="true">
                                        <Setter TargetName="Border" Property="Background"
                                Value="#6A6A6A" />
                                    </Trigger>
                                    <!--鼠标悬浮时 设置透明度-->
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Opacity" TargetName="Border" Value="0.8"></Setter>
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Foreground"
                                Value="{StaticResource DisabledForegroundBrush}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!-- 滚动条显示部分样式-->
                <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Border Background="Transparent" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!--滚动条样式-->
                <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Width" Value="8"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Border x:Name="border"  Background="#D6D4D4" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0" />
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Background" TargetName="border" Value="#6A6A6A"></Setter>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
                    <Grid >
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="18"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition MaxHeight="18"/>
                        </Grid.RowDefinitions>
                        <Border  Grid.RowSpan="3" CornerRadius="2"  Background="Transparent"  BorderThickness="0"
	  BorderBrush="#D6D4D4" />
                        <RepeatButton  Grid.Row="0" Style="{StaticResource ScrollBarLineButton}"
      Height="18" Command="ScrollBar.LineUpCommand" Content="M 0 4 L 8 4 L 4 0 Z" />
                        <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{StaticResource ScrollBarPageButton}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumb}" Margin="1,0,1,0" Background="{StaticResource HorizontalNormalBrush}"
          BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageDownCommand" />
                            </Track.IncreaseRepeatButton>
                        </Track>
                        <RepeatButton Grid.Row="3" Style="{StaticResource ScrollBarLineButton}" Height="18" Command="ScrollBar.PageDownCommand"  Content="M 0 0 L 4 4 L 8 0 Z"/>
                    </Grid>
                </ControlTemplate>

                <Style x:Key="HScrollBarThumb" TargetType="{x:Type Thumb}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Height" Value="9"/>
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Border  x:Name="border" CornerRadius="0" Background="#D6D4D4"
                             BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" />
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Background" TargetName="border" Value="#6A6A6A"></Setter>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MaxWidth="18"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition MaxWidth="18"/>
                        </Grid.ColumnDefinitions>
                        <Border  Grid.ColumnSpan="3"  CornerRadius="2" Background="Transparent"  BorderThickness="0"
	  BorderBrush="#D6D4D4" />
                        <RepeatButton   Grid.Column="0" Style="{StaticResource ScrollBarLineButton}"  Width="18"  Command="ScrollBar.LineLeftCommand" Content="M 4 0 L 4 8 L 0 4 Z" />
                        <Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{StaticResource ScrollBarPageButton}"
 />
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource HScrollBarThumb}" Margin="0,1,0,1" Background="{StaticResource NormalBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}" />
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton  Style="{StaticResource ScrollBarPageButton}" />
                            </Track.IncreaseRepeatButton>
                        </Track>
                        <RepeatButton Grid.Column="2" Style="{StaticResource ScrollBarLineButton}" Width="18" Command="ScrollBar.PageRightCommand" 
 Content="M 0 0 L 4 4 L 0 8 Z"/>
                    </Grid>
                </ControlTemplate>
                <!--滚动条整体样式-->
                <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Style.Triggers>
                        <Trigger Property="Orientation" Value="Horizontal">
                            <Setter Property="Width" Value="Auto"/>
                            <Setter Property="Height" Value="10" />
                            <Setter Property="Template"
                        Value="{StaticResource HorizontalScrollBar}" />
                        </Trigger>
                        <Trigger Property="Orientation" Value="Vertical">
                            <Setter Property="Width" Value="10"/>
                            <Setter Property="Height" Value="Auto" />
                            <Setter Property="Template"
                        Value="{StaticResource VerticalScrollBar}" />
                        </Trigger>
                    </Style.Triggers></Style>   </Style.Resources> </Style>
[/code]

WPF ScrollViewer样式
OneOnce的专栏
08-14 1624
效果 scrollviewer Style： <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WPF ScrollViewer详解与高效使用技巧
冰茶的博客
05-03 1587
ScrollViewer是WPF中的一个重要控件，它提供了内容滚动查看的功能。当内容超出可见区域时，ScrollViewer会自动显示滚动条，使用户能够滚动查看所有内容。它在处理大型数据集和内容时特别有用，是许多WPF应用程序的核心组件之一。本文将详细介绍ScrollViewer控件的特性、属性、使用方法以及性能优化技巧，帮助你更好地在WPF应用程序中运用这一控件。ScrollViewer主要由以下几个部分组成：ScrollViewer控件内容区域水平滚动条垂直滚动条滚动角 内容区域：用于显示实际内容的区
[MFC]ScrollDemo程序：CScrollView滚动视图的应用
Lirx_Tech的专栏
10-11 9218
1. CView的各种派生类：     1) MFC为了方便，还从CView派生出一些具有特殊功能的视图供程序员使用；     2) 其中最常用的有CScrollView、CListView、CTreeView、CHtmlView这四个，分别用来建立可滚动的视图、基于列表的视图、属性视图（资源管理器就是典型的一种）和浏览器视图（浏览器软件常用的一种视图）；     3) 这里我们介绍CScr
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
05-20
WPF ScrollViewer(滚动条) 自定义样式表 这个样式比较适合触摸屏上使用 滚动条设计的很宽
在 WPF 中，`ScrollViewer` 是一个容器控件，用于为内容提供可滚动的区域，当内容超出其可视区域时显示水平或垂直滚动条
最新发布
专注于前沿技术的探索与实践，热衷于从代码逻辑、架构设计到行业应用等多维度深挖技术本质。期待在技术之路上与你共同成长～
09-22 1072
功能提供一个可滚动的容器，支持水平和垂直滚动条。自动或手动显示滚动条，支持鼠标、键盘和触摸交互。支持数据绑定、自定义样式和动画，适合动态交互场景。在上下文中的潜在用途通道列表滚动：为长通道列表提供垂直滚动。测试日志导航：显示长格式的测试日志。测试条件配置：滚动查看详细的参数设置。自定义布局：包装复杂布局以支持滚动。适用场景长内容导航：为超出显示区域的内容提供滚动。动态内容：支持动态加载的通道或日志数据。用户体验：通过滚动条或平滑滚动增强导航。嵌套控件：包装ListView或Grid。
WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
weixin_33858249的博客
11-23 555
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要内容： ScrollViewer的样式拆解及基本样式定义； ListBox集合控件的样式定义； 二．ScrollViewer自定义样式 ScrollViewer在各种列表、集合...
WPF ScrollViewer 自定义样式
jtl2004的专栏
12-27 3387
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:sys="clr-namespace:System;assembly=mscorlib"     Height="300"
WPF ScrollViewer样式 滚动时显示滚动条
09-28
滚动时显示滚动条,其他时候隐藏样式，滚动条为细窄边框
WPF ScrollViewer滚动时显示滚动条样式
12-08
Blend基础上制作的滚动条样式，当滚动条滚动时才会显示滚动条 https://download.youkuaiyun.com/download/dycx880709/9642078代码有问题，一直没有更新，非常抱歉
WPF----自定义滚动条ScrollViewer
chongchong1325的博客
06-28 2298
滚动条是项目当中经常用到的一个控件，大部分对外项目都有外观的需求，因此需要自定义，文中主要是针对一段动态的状态数据进行展示，并保证数据始终在最新一条，就是需要滚动条滚动到底部。
WPF ScrollViewer(滚动条) 仿苹果样式
08-07
仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html
WPF滚动条样式自定义，ScrollViewer样式自定义
小周爱学习的博客
04-03 8271
在做wpf界面制作中布局经常用到ScrollViewer控件，默认的样式很丑，跟自己设计的界面风格不搭配，需要修改成跟自己界面设计风格一样的话需要修改它的默认样式。下面就分享下代码：&lt;ScrollViewer HorizontalScrollBarVisibility="Visible" Template="{DynamicResource ScrollViewerControlTempla...
WPF 滚动条ScrollViewer样式记录
今天也是个小白
07-12 1074
WPF 应ScrollBar 和 ScrollViewer样式
WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂
weixin_30527551的博客
04-01 659
先上效果图 正常样式 拖动时样式 好下面 开始吧 ================================================================= 打开blend 新建个 WPF应用程序工程 点击左上角 文件 → 新建项目 项目类型WPF→右侧选WPF应用程序→项目名称你随便起一个用输入的ScrollViewerStyle→...
WPF 控件库——带有惯性的ScrollViewer
HandyOrg
09-05 1013
WPF 控件库——带有惯性的ScrollViewer WPF 控件库系列博文地址： WPF 控件库——仿制Chrome的ColorPicker WPF 控件库——仿制Windows10的进度条 WPF 控件库——轮播控件 WPF 控件库——带有惯性的ScrollViewer WPF 控件库——可拖动选项卡的TabControl 一...
wpf ScrollViewer样式
qq_32961291的博客
12-22 603
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateB
WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化
weixin_34032779的博客
05-26 234
原文:WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化   艾尼路 出的效果图 本人嵌套  WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)  源代码      ...
WPF中ScrollViewer控件的样式定制
ScrollViewer控件在WPF中扮演着管理滚动功能的角色，而自定义滚动条样式可以让开发者创建更加符合应用程序风格的用户体验。 首先，要了解WPF中ScrollViewer控件的作用，它是一个容器，提供了垂直和水平滚动条，用于...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值