WPF 自定义ScrollViewer

最新推荐文章于 2025-03-14 14:56:29 发布
最新推荐文章于 2025-03-14 14:56:29 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： WPF 文章标签： wpf 自定义ScrollViwer 样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lvguoshan/article/details/47832727
版权


刚自定义ScrollViewer样式：如下




一、关于滚动条构成



二、样式总体代码一锅贴


<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    >

    <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
    <!--ScrollViewer样式-->
    <Style TargetType="ScrollViewer" x:Key="ScrollViewerStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <!--右下角四方形-->
                        <Rectangle x:Name="Corner"  Grid.Row="1" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        <!--内容区域-->
                        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
                        <!--竖直滚动条-->
                        <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle}"/>
                        <!--水平滚动条-->
                        <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{DynamicResource ScrollBarStyle}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                    </Grid>
                </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="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                </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="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--Theum-->
    <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}">
                    <Border x:Name="border" CornerRadius="3" Background="#ACACAC" BorderThickness="0" >

                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#888888"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#888888"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--滚动条样式-->
    <Style x:Key="ScrollBarStyle" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
        <Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                            <RowDefinition Height="0.00001*"/>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                        </Grid.RowDefinitions>
                        <!--上箭头-->
                        <RepeatButton Style="{DynamicResource ArrowDownPathButton}" Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}"/>
                        <!--滑动条 ？ 是不是Slider中的滑动条？？？ -是 -->
                        <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
                            <!--滑动条上部区域-->
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                            </Track.DecreaseRepeatButton>
                            <!--滑动条部分-->
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                            </Track.IncreaseRepeatButton>
                            <!--滑动条下部区域-->
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumb}" Margin="3,0,3,0"/>
                            </Track.Thumb>
                        </Track>
                        <!--下箭头-->
                        <RepeatButton Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Style="{DynamicResource ArrowUpPathButton}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <!--水平摆放时-->
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="MinWidth" Value="0"/>
                <Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                <Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                    <ColumnDefinition Width="0.00001*"/>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                </Grid.ColumnDefinitions>
                                <RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{DynamicResource ArrowLeftPathButton}"/>
                                <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource ScrollBarThumb}" Margin="0,3,0,3"/>
                                    </Track.Thumb>
                                </Track>
                                <RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{DynamicResource ArrowRightPathButton}"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
    
    <!--下箭头-->
    <Style x:Key="ArrowDownPathButton" TargetType="RepeatButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid Background="Transparent">
                        <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform Angle="180"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--上箭头-->
    <Style x:Key="ArrowUpPathButton" TargetType="RepeatButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid Background="Transparent">
                        <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"  StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform Angle="0"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--左箭头-->
    <Style x:Key="ArrowLeftPathButton" TargetType="RepeatButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid Background="Transparent">
                        <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform Angle="-90"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--右箭头-->
    <Style x:Key="ArrowRightPathButton" TargetType="RepeatButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid Background="Transparent">
                        <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"  StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform Angle="90"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>


WPF自定义ScrollViewer滚动条样式
FireGhost57的专栏
02-17 1399
&lt;!-- 滚动条颜色 --&gt; &lt;SolidColorBrush x:Key="ScrollBarBackground" Color="Transparent"/&gt; &lt;SolidColorBrush x:Key="ScrollBarThumbNormal" Color="Black" Opacity="0.1" /&
WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
LJianDong的博客
11-07 878
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要内容： ScrollViewer的样式拆解及基本样式定义； ListBox集合控件的样式定义； 二．ScrollViewer自定义样式 ScrollViewer在各种列表、集合控件中广泛使...
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
05-20
WPF ScrollViewer(滚动条) 自定义样式表 这个样式比较适合触摸屏上使用 滚动条设计的很宽
WPF 自定义ScrollViwer
weixin_30343157的博客
12-15 302
ScrollViewer自定义样式 ScrollViewer在各种列表、集合控件中广泛使用的基础组建，先看看效果图： 如上图，ScrollViewer简单来说分两部分，一个横向的滚动条，一个垂直滚动条，两个样式、模板、功能都基本一样，他们都是ScrollBar。以垂直滚动条为例，分解一下，分解图： 1：向上滑动的按钮，用RepeatButton实现功能； 2：上部分滑块，功能...
深入理解WPF TreeView控件操作
最新发布
weixin_42181686的博客
03-14 951
TreeView控件是图形用户界面中的一种常用组件，主要用于以树状结构展示信息，以层级方式组织数据。在应用程序中，它可以用来展示文件系统的目录结构、组织架构或者任何需要层次化展示的信息。TreeView控件在XAML中除了基本的声明外，还可以配置多项属性和事件，以实现丰富的交互功能。常见的属性包括HeaderHeightWidth等，用于设置TreeView的基本显示效果。以下是几个重要属性和事件的简单介绍：Header: 设置TreeView控件上方显示的文本。Height和。
WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂
weixin_30527551的博客
04-01 619
先上效果图 正常样式 拖动时样式 好下面 开始吧 ================================================================= 打开blend 新建个 WPF应用程序工程 点击左上角 文件 → 新建项目 项目类型WPF→右侧选WPF应用程序→项目名称你随便起一个用输入的ScrollViewerStyle→...
WPF自定义ScrollViewer
天空
06-10 9972
App.xaml <Application x:Class="WPFTEST.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WPF----自定义滚动条ScrollViewer
chongchong1325的博客
06-28 1866
滚动条是项目当中经常用到的一个控件，大部分对外项目都有外观的需求，因此需要自定义，文中主要是针对一段动态的状态数据进行展示，并保证数据始终在最新一条，就是需要滚动条滚动到底部。
WPF实现ScrollViewer滚动到指定控件处
10-19
在WPF开发中，ScrollViewer控件用于提供可滚动的视图，允许用户查看超过屏幕范围的内容。然而，有时我们需要在程序逻辑中自动控制ScrollViewer滚动到特定的子控件，比如用户完成某个操作后自动定位到指定内容。本文...
WPF自定义MenuItem样式的实现方法
08-25
在WPF（Windows Presentation Foundation）中，自定义控件样式是一项常见的需求，这可以让你的应用程序界面更加个性化和专业。本篇文章将详细讲解如何自定义`MenuItem`的样式，以便改变其默认外观，如颜色、布局等。...
WPF ScrollViewer 自定义样式
jtl2004的专栏
12-27 3343
    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(滚动条) 仿苹果样式
08-07
仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html
自定义ScrollViewer——仿iphone和android
04-15
网上找不到 只好自己开发了 ScrollViewer是不错，不过不足够 特别是用了IPHONE和ANDROID之后 拖到底部后，还可以继续拖一小段距离 符合手触设备的用户体验 VS2010开发
wpf 自定义scrollviewer
大话程序员
04-14 2594
http://www.codeproject.com/Tips/115159/Silverlight-Tip-ScrollViewer-for-a-WrapPanel of sssssssssssssssssssssssscouse, scrollview can do this but, after using iphone and android
WPF 自定义滚动条控件ScrollViewer（三）
韬光养晦
09-16 1224
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="Scroll
WPF ScrollViewer控件添加自定义滚动条
DavidLiu的博客
07-29 555
<ScrollViewer Name="sv1" VerticalScrollBarVisibility="Hidden" Margin="0" Width="auto" Grid.Row="1"> <DockPanel Name="FlowPanel" MinWidth="20" Background="#FFE1F3D8" ></DockPanel> </ScrollViewer> <ScrollViewer .
WPF 自定义滚动条（ScrollView、ScrollBar）样式
weixin_34326179的博客
04-07 1233
一、滚动条基本样式 本次修改Scrollview及ScrollBar滚动条样式是通过纯样式实现的。修改的内容包含滚动条的颜色，上下按钮的隐藏。另外添加了鼠标经过滚动条动画。 style样式如下： <!-- ScrollViewer 滚动条 --> <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"...
ScrollViewer—WPF滚动条控件
小芦荟同学的博客
05-30 2478
ScrollViewer—WPF滚动条控件 ScrollViewer定义与功能、 ScrollViewer使用、ScrollViewer常用属性、滚动类型、用Button来控制ScrollViewer的滚动
WPF ScrollViewer 样式
11-25 5108
[code=csharp]
WPF中ScrollViewer控件的样式定制
ScrollViewer控件在WPF中扮演着管理滚动功能的角色，而自定义滚动条样式可以让开发者创建更加符合应用程序风格的用户体验。 首先，要了解WPF中ScrollViewer控件的作用，它是一个容器，提供了垂直和水平滚动条，用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值