WPF ScrollViewer滚动条样式，适合触摸屏使用

最新推荐文章于 2024-05-30 16:01:14 发布
最新推荐文章于 2024-05-30 16:01:14 发布
阅读量552 收藏 2
点赞数 1
原文链接：http://www.cnblogs.com/lonelyxmas/p/11112140.html
版权
WPF ScrollViewer滚动条样式，适合触摸屏使用
原文: WPF ScrollViewer滚动条样式，适合触摸屏使用

触摸屏上客户要求滚动条宽度大些，方便手指上下滚动，之前在网上看了个，原文找不到了，代码记录下。

效果如下：

 

<ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}">
            <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" />
                <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0"  Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle1}"/>
            </Grid>
        </ControlTemplate>
        <LinearGradientBrush x:Key="VerticalScrollBarBackground" EndPoint="1,0" StartPoint="0,0">
            <GradientStop Color="#E1E1E1" Offset="0"/>
            <GradientStop Color="#EDEDED" Offset="0.20"/>
            <GradientStop Color="#EDEDED" Offset="0.80"/>
            <GradientStop Color="#E3E3E3" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
        <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Microsoft_Windows_Themes:ScrollChrome x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}"/>
                    </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="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="#A5A5A5" BorderBrush="#666666" BorderThickness="1" >
                            <Image x:Name="image" Source="/Images/bar_center.png" VerticalAlignment="Center"></Image>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDragging" Value="True">
                                <Setter Property="Background" TargetName="border" Value="#7F7F7F"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <LinearGradientBrush x:Key="HorizontalScrollBarBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#E1E1E1" Offset="0"/>
            <GradientStop Color="#EDEDED" Offset="0.20"/>
            <GradientStop Color="#EDEDED" Offset="0.80"/>
            <GradientStop Color="#E3E3E3" Offset="1"/>
        </LinearGradientBrush>
        <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>
        <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
            <Setter Property="Background" Value="{StaticResource VerticalScrollBarBackground}"/>
            <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="40"/>
            <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 x:Name="UpButton" Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}"   >
                                <RepeatButton.Content>
                                    <Image x:Name="imgUp" Source="/BarUp.png" Stretch="Fill"></Image>
                                </RepeatButton.Content>
                            </RepeatButton>
                            <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}"/>
                                </Track.Thumb>
                            </Track>
                            <RepeatButton Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" >
                                <RepeatButton.Content>
                                    <Image x:Name="imgDown" Source="/Images/BarDown.png"  Stretch="Fill"></Image>
                                </RepeatButton.Content>
                            </RepeatButton>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" SourceName="UpButton" Value="True">
                                <Setter Property="Source" TargetName="imgUp" Value="/Images/BarUp_S.png"/>
                                <Setter Property="Source" TargetName="imgDown" Value="/Images/BarDown_S.png"/>
                            </Trigger>
                            <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="Background" Value="{StaticResource HorizontalScrollBarBackground}"/>
                    <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="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow"/>
                                    <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}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/>
                                        </Track.Thumb>
                                    </Track>
                                    <RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow"/>
                                </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>
View Code

源码下载：WpfApp1.rar

 

posted on 2019-07-01 08:45 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/11112140.html

weixin_30606669
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF ScrollViewer滚动时显示滚动条样式
12-08
Blend基础上制作的滚动条样式，当滚动条滚动时才会显示滚动条 https://download.csdn.net/download/dycx880709/9642078代码有问题，一直没有更新，非常抱歉
WPF ScrollViewer 仿苹果 细长 滚动条
04-01
总结来说，WPF的ScrollViewer控件配合自定义样式和模板，能让我们轻松实现类似苹果设备上的细长滚动条效果。这种定制不仅可以改变滚动条的视觉外观，还能调整其交互行为，从而提升应用程序的整体设计感和用户体验。...
解决WPF的ScrollViewer在使用触摸屏时，滑到尽头窗口抖动的情况
k
10-23 6657
wpf的ScrollViewer在触摸条件下 默认在尽头时会有一个窗口一起被拖动的FeedBack，但对用户的交互很不友好，尤其是全屏应用，一划就看到了后面的桌面。如下图： 这几就找个个方法吧那个给禁用掉了。在ScrollViewer的xaml代码那里加上ManipulationBoundaryFeedback="SCManipulationBoundaryFeedback"然后cs里加上
ScrollViewer—WPF滚动条控件
最新发布
小芦荟同学的博客
05-30 968
ScrollViewer—WPF滚动条控件 ScrollViewer定义与功能、 ScrollViewer使用、ScrollViewer常用属性、滚动类型、用Button来控制ScrollViewer的滚动
WPF ScrollViewer滚动
m0_48915942的博客
12-13 898
使用ScrollChanged事件触发通过偏移量来判断。if (scroll!= null)//当数据不在增加的时候//当数据增加,自动滑动else。
WPF ScrollViewer滚动条不起作用问题解决
IT界的小菜比
08-03 3686
最近使用ScrollViewer发现同样的代码有时候滚动条效果有的实现有的失效，很是苦恼，研究了一下发现这个控件是否起作用取决于很重要的属性就是高度 1、如果父级控件高度确定有Heiht属性，或者父级控件是根节点那么ScrollViewer自身是不需要设置高度的，如 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/
C# WPF下自定义滚动条ScrollViewer样式
热门推荐
凡梦
12-22 1万+
一、实现对ScrollViewer样式的自定义主要包括： 1、滚动条宽度设置 2、滚动条颜色 3、滚动条圆角 4、滚动条拉动时的效果mouseover 二、实现效果： 三、实现方法 1、创建资源字典（ResourceDictionary）文件 由于style代码比较多，之间在控件文件中加载style比较混乱，也不利于其它窗口复用，这里单独创建了ScrollViewDic
WPF ScrollViewer(滚动条) 仿苹果样式
02-05
仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html 仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html
WPF实现ScrollViewer滚动到指定控件处
10-19
在WPF开发中，ScrollViewer控件用于提供可滚动的视图，允许用户查看超过屏幕范围的内容。然而，有时我们需要在程序逻辑中自动控制ScrollViewer滚动到特定的子控件，比如用户完成某个操作后自动定位到指定内容。本文...
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
05-20
标题提到的“WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)”就是一个关于如何改变默认滚动条外观和交互的实践。 首先，我们要了解WPF中的样式和模板。样式决定了控件的视觉外观，而模板则定义了控件的...
wpf 界面控件随着界面大小进行缩放
11-04
WPF 界面 实现控件随着界面大小进行缩放，按住Ctrl按钮，然后混动混轮，就可以实现缩放了，控件比例和布局不变，会产生滚动条。
WPF使用自定义控件实现上下滑动并且加载元素
04-08
这里面实现了用自定义控件作为子元素，通过加载的方式实现Y轴移动和单个元素添加的过程的动画展示
2018-12-26-WPF-开启-ScrollViewer-的触摸滚动
lindexi
11-21 609
title author date CreateTime categories WPF 开启 ScrollViewer 的触摸滚动 lindexi 2018-12-26 14:24:26 +0800 2018-12-26 11:51:31 +0800 WPF 在 ScrollVi...
WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂
weixin_30527551的博客
04-01 520
先上效果图 正常样式 拖动时样式 好下面 开始吧 ================================================================= 打开blend 新建个 WPF应用程序工程 点击左上角 文件 → 新建项目 项目类型WPF→右侧选WPF应用程序→项目名称你随便起一个用输入的ScrollViewerStyle→...
ScrollViewer 滑动条：
Makefilehoon的博客
06-15 338
wpf
WPF操作滚动条
12-10 1万+
最近客户反映一个滚动条的用户体验问题，在ListView加很多项时出现滚动条后，滚动条会向上走（看不到刚加的那一项），只能每次加了之后再滑下来看。调查了下原来是ListView的默认滚动条的问题，设法操作这个滚动条，无果，于是加了个滚动条控件，用ScollToEnd方法将滚动条重置到最下面。测试时发现当鼠标在ListView上时滚轮没反映，于是找了下事件，MouseWheel和PreviewMou
WPF 可触摸移动的ScrollViewer控件
weixin_30919235的博客
10-10 940
ListBox支持触摸滑动，而ScrollViewer默认不支持。需要设置PanningMode属性，如果不设置PanningMode，如何自定义触摸滑动？ ScrollViewer如需要添加上下/左右触摸移动，需要在Touch事件中处理。 处理如下：封装成一个用户控件 TouchDown事件中记录起始点，并添加对TouchMove事件的监听 TouchUp事件中注销TouchMove...
wpf richtextbox 滚动条样式
06-02
WPF的RichTextBox控件提供了多种自定义滚动条的方式，可以使用XAML来定义样式和模板。以下是一个简单的示例，展示了如何自定义RichTextBox的滚动条样式： ```xml <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <!--定义一个自定义的ScrollBar样式--> <Style x:Key="CustomScrollBar" TargetType="{x:Type ScrollBar}"> <Setter Property="Background" Value="LightGray"/> <Setter Property="Width" Value="20"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ScrollBar}"> <Grid> <!--定义滚动条的轨道--> <Border Background="{TemplateBinding Background}" CornerRadius="10"/> <!--定义滚动条的滑块--> <Border Name="PART_Track" Background="DarkGray" CornerRadius="10"/> <RepeatButton Name="PART_UpButton" Style="{StaticResource ScrollBarLineButton}" Command="ScrollBar.LineUpCommand"/> <RepeatButton Name="PART_DownButton" Style="{StaticResource ScrollBarLineButton}" Command="ScrollBar.LineDownCommand"/> <Thumb Name="PART_Thumb" Style="{StaticResource ScrollBarThumb}" Margin="2"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <RichTextBox ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible" VerticalScrollBarStyle="{StaticResource CustomScrollBar}" HorizontalScrollBarStyle="{StaticResource CustomScrollBar}"> <FlowDocument> <Paragraph> This is a sample text! </Paragraph> </FlowDocument> </RichTextBox> </Grid> </Window> ``` 在这个示例中，我们定义了一个名为CustomScrollBar的自定义样式，包含了滚动条的轨道、滑块和按钮等控件。然后，我们将RichTextBox的VerticalScrollBarStyle和HorizontalScrollBarStyle属性分别设置为CustomScrollBar，即可应用自定义的滚动条样式。 需要注意的是，这只是一个简单的示例，实际中可能需要根据具体需求进行更加复杂的滚动条自定义。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值