WPF ScrollViewer 仿苹果 细长 滚动条

最新推荐文章于 2024-06-28 11:05:12 发布
最新推荐文章于 2024-06-28 11:05:12 发布
阅读量288 收藏 1
点赞数
分类专栏： 小功能Demo 小功能 代码片段 自以为是的小技巧 文章标签： wpf ScrollViewer 样式 Style
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_30224769/article/details/115368527
版权

有时候需要比较细长的滚动条， 也不用管实不实用 好看就是了

github：https://github.com/442040292/ScrollViewStyleDemo

下载：https://download.csdn.net/download/sinat_30224769/16296651

 

 

 

直接上 Style

<ResourceDictionary 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">


    <sys:Double x:Key="scrollRadio">5</sys:Double>
    <sys:Double x:Key="scrollSize">10</sys:Double>

    <ControlTemplate x:Key="ScrollViewerControlTemplateSlender" 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.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>-->
            <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 ScrollBarStyleSlender}"/>
            <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}}" ViewportSize="{TemplateBinding ViewportWidth}"  Style="{DynamicResource ScrollBarStyleSlender}"/>
        </Grid>
    </ControlTemplate>
    <SolidColorBrush x:Key="ScrollBar.Static.Background" Color="#F0F0F0"/>
    <SolidColorBrush x:Key="ScrollBar.Static.Border" Color="#F0F0F0"/>
    <SolidColorBrush x:Key="ScrollBar.Pressed.Glyph" Color="#FFFFFF"/>
    <SolidColorBrush x:Key="ScrollBar.MouseOver.Glyph" Color="#000000"/>
    <SolidColorBrush x:Key="ScrollBar.Disabled.Glyph" Color="#BFBFBF"/>
    <SolidColorBrush x:Key="ScrollBar.Static.Glyph" Color="#606060"/>
    <Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="ScrollBar.MouseOver.Background" Color="#DADADA"/>
    <SolidColorBrush x:Key="ScrollBar.MouseOver.Border" Color="#DADADA"/>
    <SolidColorBrush x:Key="ScrollBar.Pressed.Background" Color="#606060"/>
    <SolidColorBrush x:Key="ScrollBar.Pressed.Border" Color="#606060"/>
    <SolidColorBrush x:Key="ScrollBar.Disabled.Background" Color="#F0F0F0"/>
    <SolidColorBrush x:Key="ScrollBar.Disabled.Border" Color="#F0F0F0"/>
    <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border x:Name="border" BorderBrush="{StaticResource ScrollBar.Static.Border}" BorderThickness="1" Background="{StaticResource ScrollBar.Static.Background}" SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource ScrollBar.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource ScrollBar.MouseOver.Border}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource ScrollBar.Pressed.Background}"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource ScrollBar.Pressed.Border}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                            <Setter Property="Background" TargetName="border" Value="{StaticResource ScrollBar.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource ScrollBar.Disabled.Border}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="RepeatButtonTransparent" 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>
    <SolidColorBrush x:Key="ScrollBar.MouseOver.Thumb" Color="#A6A6A6"/>
    <SolidColorBrush x:Key="ScrollBar.Pressed.Thumb" Color="#606060"/>
    <SolidColorBrush x:Key="ScrollBar.Static.Thumb" Color="#CDCDCD"/>
    <Style x:Key="ScrollBarThumbVertical" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Rectangle x:Name="rectangle"  RadiusX="{StaticResource scrollRadio}" RadiusY="{StaticResource scrollRadio}"  Fill="{StaticResource ScrollBar.Static.Thumb}" Height="{TemplateBinding Height}" SnapsToDevicePixels="True" Width="{TemplateBinding Width}"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.MouseOver.Thumb}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.Pressed.Thumb}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarThumbHorizontal" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Rectangle x:Name="rectangle" RadiusX="{StaticResource scrollRadio}" RadiusY="{StaticResource scrollRadio}" Fill="{StaticResource ScrollBar.Static.Thumb}" Height="{TemplateBinding Height}" SnapsToDevicePixels="True" Width="{TemplateBinding Width}"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.MouseOver.Thumb}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.Pressed.Thumb}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarStyleSlender" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <Setter Property="Background" Value="{StaticResource ScrollBar.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ScrollBar.Static.Border}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1,0"/>
        <Setter Property="Width" Value="{StaticResource scrollSize}"/>
        <Setter Property="MinWidth" Value="{StaticResource scrollSize}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid x:Name="Bg" SnapsToDevicePixels="true">
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                            <RowDefinition Height="0.00001*"/>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                        </Grid.RowDefinitions>
                        <!--<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Row="1"/>-->
                        <!--滚动条背景-->
                        <Rectangle RadiusX="{StaticResource scrollRadio}" RadiusY="{StaticResource scrollRadio}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Fill="{TemplateBinding Background}" Grid.Row="1"/>
                        <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <!--滚动条滑块-->
                                <Thumb Style="{StaticResource ScrollBarThumbVertical}"/>
                            </Track.Thumb>
                        </Track>
                    </Grid>
                </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="{StaticResource scrollSize}"/>
                <Setter Property="MinHeight" Value="{StaticResource scrollSize}"/>
                <Setter Property="BorderThickness" Value="0,1"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" SnapsToDevicePixels="true">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                    <ColumnDefinition Width="0.00001*"/>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                </Grid.ColumnDefinitions>
                                <!--<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1"/>-->
                                <!--滚动条背景-->
                                <Rectangle RadiusX="{StaticResource scrollRadio}" RadiusY="{StaticResource scrollRadio}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Fill="{TemplateBinding Background}" Grid.Column="1"/>
                                <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <!--滚动条滑块-->
                                        <Thumb Style="{StaticResource ScrollBarThumbHorizontal}"/>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>

 

实际上没改很多内容  直接用原模版改了一下

难点是要看懂，每个元素代表的是什么，了解了组成就很容易改了

修改模板的方式

1.

2.

你要上天
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF ScrollViewer(滚动条) 仿苹果样式
02-05
仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html 仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html
WPF ScrollViewer无法触摸滚动的问题
log103628的博客
06-06 415
ScrollViewer属性设置IsManipulationEnabled="True" PanningMode="VerticalOnly" 设置后，ScrollViewer里面如果还有控件再存在滚动操作，就无法触摸滚动了 所以如果里面的控件Canvas在存在滚动操作，那么可以给控件Canvas增加事件MouseEnter和MouseLeave，并且调整ScrollViewer的属性IsMa...
WPF ScrollViewer滚动条不起作用问题解决
IT界的小菜比
08-03 3743
最近使用ScrollViewer发现同样的代码有时候滚动条效果有的实现有的失效，很是苦恼，研究了一下发现这个控件是否起作用取决于很重要的属性就是高度 1、如果父级控件高度确定有Heiht属性，或者父级控件是根节点那么ScrollViewer自身是不需要设置高度的，如 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/
WPF ScrollViewer嵌套控件导致无法滚动
weixin_51786302的博客
09-21 381
WPF ScrollViewer嵌套控件导致无法滚动
WPF中ScrollViewer滚动条自动滚动到最上方
热门推荐
也许(Oliver)
03-15 1万+
参考链接：https://social.msdn.microsoft.com/Forums/vstudio/en-US/bab3fb62-bf9e-4db6-854c-829bd2896319/how-to-prevent-scrollviewer-from-calling-bringintoview?forum=wpf 问题描述：WPF中点击一个文件夹A，A的子文件不能完全显示在视图里面，此时...
美化WPF中ScrollViewer的垂直滚动条样式
qq_37189288的博客
10-22 1512
新建一个字典文件Resource\ScrollViewerDictionary.xaml <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ControlTemplate x:Key="ScrollViewer
ScrollViewer—WPF滚动条控件
小芦荟同学的博客
05-30 1212
ScrollViewer—WPF滚动条控件 ScrollViewer定义与功能、 ScrollViewer使用、ScrollViewer常用属性、滚动类型、用Button来控制ScrollViewer的滚动
自定义WPF滚动条(ScrollViewer)：仿苹果系统规划
Lassewang的成长历程
01-03 2922
Red Orange DarkRed Gray Pink
WPF----自定义滚动条ScrollViewer
最新发布
chongchong1325的博客
06-28 487
滚动条是项目当中经常用到的一个控件，大部分对外项目都有外观的需求，因此需要自定义，文中主要是针对一段动态的状态数据进行展示，并保证数据始终在最新一条，就是需要滚动条滚动到底部。
WPF 滚动条ScrollViewer样式记录
今天也是个小白
07-12 872
WPF 应ScrollBar 和 ScrollViewer样式
WPF ScrollViewer滚动时显示滚动条样式
12-08
Blend基础上制作的滚动条样式，当滚动条滚动时才会显示滚动条 https://download.csdn.net/download/dycx880709/9642078代码有问题，一直没有更新，非常抱歉
WPF实现ScrollViewer滚动到指定控件处
10-19
在WPF开发中，ScrollViewer控件用于提供可滚动的视图，允许用户查看超过屏幕范围的内容。然而，有时我们需要在程序逻辑中自动控制ScrollViewer滚动到特定的子控件，比如用户完成某个操作后自动定位到指定内容。本文...
C# .NET 遍历Json 形成键值对
sinat_30224769的博客
06-17 1万+
记录一下小方法，在C#中可能用到，获取Json中很多的键值，如果一个一个手敲出来有些麻烦，不过本方法还是会损耗一些性能滴。懒人编程找方法... string test_json = "{\"name\":\"tom\",\"nickname\":\"tony\",\"sex\":\"male\",\"age\":20,\"email\":\"123@123.com
WPF 组合单选 样式 RadioButton Style
sinat_30224769的博客
08-31 6133
本来想写个方便的控件  ，但是真正写起来内容太多了，所以还是分三个样式来解决 等到后面有什么组合的方法 再看 使用自定义控件包裹的话 遇到问题是  Trigger 里面不能动态绑定值 效果如下 &lt;Grid Height="27" Margin="20,42,20,0" VerticalAlignment="Top"&gt; ...
c# 界面中利用 FindName 来获取 控件值
sinat_30224769的博客
08-29 4638
雕虫小技不值一提   string[] Parament = new string[] { }; Dictionary&lt;string, string&gt; Params = new Dictionary&lt;string, string&gt;(); foreach (var item in Parament)...
WPF 晚上吃什么 制作gif动图，截图晚上吃什么
sinat_30224769的博客
01-11 4425
今天看到了一个类似这样的gif，截图来决定晚上吃什么，于是动手自己写一个，生成如此Gif的程序 github:https://github.com/442040292/WhatForDinner完整的项目、虽然是个简单的小程序 需要使用到这个dll： Gif.Components.dll 直接上代码： 主页： <Window x:Class="WhatForDinner.MainWindow" xmlns="http://schemas.microsoft.com...
WPF 自定义模版 Style 中控件引用方法
sinat_30224769的博客
09-16 3021
本来想这是原创 不过貌似已经有很多资料介绍的很详细 直接搜 WPF+ OnApplyTemplate 这里直接贴我找到的一个链接 https://www.cnblogs.com/wywnet/p/4000372.html 当然也有我自己的一个创新内容 绑定如果想绑定一两个控件  直接后台代码像上面这样写没问题的， 但是如果控件很多，需要绑定，和操作事件很复杂，虽然逃不了必写的代码，...
WPF ScrollViewer嵌套Listbox无法滚动
06-03
这个问题可能是由于ScrollViewer内部嵌套的Listbox已经占用了滚动条的事件，导致外部的ScrollViewer无法滚动。你可以尝试在外部的ScrollViewer上加上PreviewMouseWheel事件，然后在事件处理函数中手动滚动ScrollViewer，代码如下： ```csharp private void OuterScrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e) { OuterScrollViewer.ScrollToVerticalOffset(OuterScrollViewer.VerticalOffset - e.Delta); e.Handled = true; } ``` 另外，你还需要将内部的Listbox的滚动条事件处理函数中的e.Handled属性设为false，以便将事件继续传递给外部的ScrollViewer。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值