C# wpf ScrollBar自定义仿移动端样式滚动条

最新推荐文章于 2025-03-11 16:43:59 发布
最新推荐文章于 2025-03-11 16:43:59 发布
阅读量2.8k 收藏 20
点赞数 5
分类专栏： # wpf 文章标签： c# wpf xaml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013113678/article/details/120811416
版权

文章目录

前言

本篇是《C# wpf ScrollBar自定义详解》的示例。按照文中的方法实现一个移动端的常规滚动条。移动的常规滚动条有3个特点：细长、灰色、圆角，这些在wpf中都很好实现。

一、步骤

1.确定参数

对于一个仿移动端滚动条，可以定义的参数是：
（1）滚动条宽度
（2）滚动条背景色
（3）滑块颜色
（4）滑块圆角

2.定义style

style的名称就叫ScrollStyle_Mobile，其他与《C# wpf ScrollBar自定义详解》中通用模板一致。

3.定义template

在template中显示滚动条的样式。在《C# wpf ScrollBar自定义详解》中通用模板的基础上，去除行按钮，页按钮透明，滑块设为圆角矩形。绑定滚动条背景色、滑块颜色、滑块圆角参数。

二、完整代码

<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">
    <!--  1.确定参数  -->
    <!--纵向滚动条宽度-->
    <sys:Double   x:Key="VerticalScrollBarThickness">4</sys:Double>
    <!--纵向轨道背景色-->
    <SolidColorBrush x:Key="VerticalTrackBackgroundBrush" Color="Transparent" />
    <!--纵向滑块颜色-->
    <SolidColorBrush x:Key="VerticalTrackThumbBackgroundBrush" Color="#cccccc" />
    <!--纵向滑块圆角-->
    <CornerRadius x:Key="VerticalThumbCornerRadius"  >2</CornerRadius>
    <!--横向滚动条宽度-->
    <sys:Double x:Key="HorizontalScrollBarThickness">4</sys:Double>
    <!--横向轨道背景色-->
    <SolidColorBrush x:Key="HorizontalTrackBackgroundBrush" Color="Transparent" />
    <!--横向滑块颜色-->
    <SolidColorBrush x:Key="HorizontalTrackThumbBackgroundBrush" Color="#cccccc" />
    <!--横向滑块圆角-->
    <CornerRadius x:Key="HorizontalThumbCornerRadius" >2</CornerRadius>

    <!-- 2.定义Style  -->
    <Style x:Key="ScrollStyle_Mobile" TargetType="ScrollBar">
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto" />
                <Setter Property="Height" Value="{DynamicResource HorizontalScrollBarThickness}" />
                <Setter Property="Template" Value="{DynamicResource HorizontalScrollBar}" />
            </Trigger>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Width" Value="{DynamicResource VerticalScrollBarThickness}" />
                <Setter Property="Height" Value="Auto" />
                <Setter Property="Template" Value="{DynamicResource VerticalScrollBar}" />
            </Trigger>
        </Style.Triggers>
    </Style>

    <!-- 3.定义template  -->
    <!-- 纵向滚动条template  -->
    <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
        <Border Width="{DynamicResource VerticalScrollBarThickness}" Background="{DynamicResource VerticalTrackBackgroundBrush}">
            <Track 
                Name="PART_Track"
                IsDirectionReversed="true">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageUpCommand" Focusable="False">
                        <RepeatButton.Template>
                            <ControlTemplate>
                                <Border Background="Transparent"></Border>
                            </ControlTemplate>
                        </RepeatButton.Template>
                    </RepeatButton>
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Width="{TemplateBinding Width}"  Focusable="False">
                        <Thumb.Template>
                            <ControlTemplate>
                                <Border Background="{DynamicResource VerticalTrackThumbBackgroundBrush}"   CornerRadius="{DynamicResource VerticalThumbCornerRadius}" />
                            </ControlTemplate>
                        </Thumb.Template>
                    </Thumb>
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageDownCommand" Focusable="False">
                        <RepeatButton.Template>
                            <ControlTemplate>
                                <Border Background="Transparent"></Border>
                            </ControlTemplate>
                        </RepeatButton.Template>
                    </RepeatButton>
                </Track.IncreaseRepeatButton>
            </Track>
        </Border>
    </ControlTemplate>
    <!-- 横向滚动条template  -->
    <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
        <Grid Background="{DynamicResource HorizontalTrackBackgroundBrush}">
            <Track
                Name="PART_Track"
                Grid.Column="1"
                IsDirectionReversed="False">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageLeftCommand" Focusable="False">
                        <RepeatButton.Template>
                            <ControlTemplate>
                                <Border Background="Transparent"></Border>
                            </ControlTemplate>
                        </RepeatButton.Template>
                    </RepeatButton>
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Height="{TemplateBinding Height}" >
                        <Thumb.Template>
                            <ControlTemplate>
                                <Border Background="{DynamicResource HorizontalTrackThumbBackgroundBrush}"   CornerRadius="{DynamicResource HorizontalThumbCornerRadius}" />
                            </ControlTemplate>
                        </Thumb.Template>
                    </Thumb>
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Command="ScrollBar.PageRightCommand" Focusable="False">
                        <RepeatButton.Template>
                            <ControlTemplate>
                                <Border Background="Transparent"></Border>
                            </ControlTemplate>
                        </RepeatButton.Template>
                    </RepeatButton>
                </Track.IncreaseRepeatButton>
            </Track>
        </Grid>
    </ControlTemplate>
</ResourceDictionary>

三、效果预览

1.默认参数

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:WpfApp1"     
        mc:Ignorable="d"
        Title="MainWindow" Height="720" Width="1280">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ScrollStyle_Mobile.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <ListBox Width="320" Height="200"  BorderThickness="0" >
            <ListBox.Resources>
                <Style TargetType="ScrollBar" BasedOn="{StaticResource ScrollStyle_Mobile}"></Style>
            </ListBox.Resources>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Width="380" Height="400"></WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock FontSize="32" Foreground="#666666" Text="123"></TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.Items>
                <Control/>
                <Control/>
                <Control/>
                <Control/>
                <Control/>
                <Control/>
            </ListBox.Items>
        </ListBox>
    </Grid>
</Window>

在这里插入图片描述

2.设置宽度

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:WpfApp1"     
        mc:Ignorable="d"
        Title="MainWindow" Height="720" Width="1280">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ScrollStyle_Mobile.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <ListBox Width="320" Height="200"  BorderThickness="0" >
            <ListBox.Resources>
                <Style TargetType="ScrollBar" BasedOn="{StaticResource ScrollStyle_Mobile}"></Style>
                 <!--纵向滚动条宽度-->
                <sys:Double   x:Key="VerticalScrollBarThickness">10</sys:Double>
                <!--纵向滑块圆角-->
                <CornerRadius x:Key="VerticalThumbCornerRadius"  >5</CornerRadius>
            </ListBox.Resources>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Width="300" Height="400"></WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock FontSize="32" Foreground="#666666" Text="123"></TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.Items>
                <Control/>
                <Control/>
                <Control/>
                <Control/>
                <Control/>
                <Control/>
            </ListBox.Items>
        </ListBox>
    </Grid>
</Window>

在这里插入图片描述

3.设置颜色

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:WpfApp1"     
        mc:Ignorable="d"
        Title="MainWindow" Height="720" Width="1280">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ScrollStyle_Mobile.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <ListBox Width="320" Height="200"  BorderThickness="0" >
            <ListBox.Resources>
                <Style TargetType="ScrollBar" BasedOn="{StaticResource ScrollStyle_Mobile}"></Style>
                <!--纵向滑块颜色-->
                <SolidColorBrush x:Key="VerticalTrackThumbBackgroundBrush" Color="Green" />
                <!--横向滑块颜色-->
                <SolidColorBrush x:Key="HorizontalTrackThumbBackgroundBrush" Color="Green" />
            </ListBox.Resources>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Width="380" Height="400"></WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock FontSize="32" Foreground="#666666" Text="123"></TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.Items>
                <Control/>
                <Control/>
                <Control/>
                <Control/>
                <Control/>
                <Control/>
            </ListBox.Items>
        </ListBox>
    </Grid>
</Window>

在这里插入图片描述

总结

wpf自定义的ScrollBar界面效果还是很不错的，而且灵活度也比较高，像上述的滚动条就是去掉了行按钮的（上下箭头），配合绑定机制，可以设置不同的参数，基本解决了曾经Windows上滚动条难做的痛点。

WPF 自定义滚动条（ScrollView、ScrollBar）样式
weixin_34326179的博客
04-07 1239
一、滚动条基本样式 本次修改Scrollview及ScrollBar滚动条样式是通过纯样式实现的。修改的内容包含滚动条的颜色，上下按钮的隐藏。另外添加了鼠标经过滚动条动画。 style样式如下： <!-- ScrollViewer 滚动条 --> <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"...
wpf ScrollBar自定义样式
qq_69686662的博客
01-23 1471
WPF ScrollBar滚动条样式是通过纯样式实现的。修改的内容包含滚动条的颜色，上下按钮的隐藏。另外添加了鼠标经过滚动条动画。PS:改代码影响全局。
WPF样式-ScrollBar
weixin_30535043的博客
05-08 737
1.对于滚动条ScrollBar样式的设计，通过继承，可以实现在不同的控件中，如TextBox、RichTextBox、DataGrid、ListBox...等带有滚动条的控件统一修改。 2.在对ScrollBar样式的设计过程中，很容易实现 + -按钮、滚动条宽度、滚动条的背景颜色的修改，如下代码中 1 <ResourceDictionary xmlns="http:...
C# wpf ScrollBar自定义样式详解
codeofcc的博客
10-16 9115
滚动条是一个常见控件，很多控件中都包含滚动条，比如ListBox、ComboBox、GridView等。wpf默认的滚动条的样式并不是特别好看，而且经常与UI设计的滚动条不一致，这个时候我们就需要自定义滚动条了。值得一提的是这，wpf的滚动条定制性和拓展性都非常好，这就为我们自定义滚动条提供了非常有利的条件。......
实现 ScrollView ScrollBar 自定义样式全攻略
最新发布
temp0504的博客
03-11 446
在 WPF（Windows Presentation Foundation）开发中，我们常常会用到ScrollView控件，而默认的ScrollBar样式可能无法满足多样化的设计需求。这时，自定义ScrollBar样式就显得尤为重要啦。今天，咱们就来详细聊聊如何实现ScrollView中ScrollBar的自定义样式。在现代应用程序开发中，用户界面的美观性和独特性是吸引用户的关键因素之一。默认的ScrollBar样式千篇一律，缺乏个性。通过自定义样式，我们可以让ScrollBar。
wpf滚动条样式
03-22
wpf制作的滚动体，主要修改了样式和其他的一些东西，可以研究下滚动体的整体结构和修改他的样式，增加模板
C# wpf ScrollBar自定义音量调节样式滚动条
codeofcc的博客
10-18 2486
文章目录前言一、步骤1.确定参数2.定义style3.定义template二、完整代码三、效果预览1.默认参数2.设置大小3.设置颜色总结 前言 本篇是《C# wpf ScrollBar自定义详解》的示例。按照文中的方法实现一个音量调节样式的滚动条。音量调节控件一般用Slider会更合适，只是Slider好ScrollBar的构造几乎一样，继承了同一个基类RangeBase，样式可以相互使用，所以这里统一以ScrollBar为例子来说明。 一、步骤 1.确定参数 对于一个音量调节滚动条，可以定义的参数是
WPF中自定义Scrollbar 滚动条 样式 图片
11-24
WPF中自定义Scrollbar 样式，设置颜色或者自定义图片
datagridview 自定义滚动条
12-17
标题中的“datagridview 自定义滚动条”指的是在C#编程环境下，使用Windows Forms或WPF中的DataGridView控件时，对内置滚动条进行自定义样式和功能的调整。DataGridView是.NET框架提供的一种数据网格视图控件，常...
C# WPF实现自定义滚动条的流畅滚动效果
在C#编程中，实现滚动条的流畅滚动是一个常见的需求，尤其是当应用需要展示大量信息或连续数据时。流畅的滚动不仅能够提高用户体验，还能让界面显得更加专业。本篇将围绕如何实现一个颜色可改变、大小可设置、滚动...
wpf 为自定义控件添加滚动条
大黄鸭在发光的专栏
01-11 1357
wpf 为自定义控件添加滚动条
WPF自定义连续滚动条
09-19
滚动条控件，可以直接使用，也可以作为例子。
WPF ScrollViewer(滚动条) 仿苹果样式
08-07
仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
05-20
WPF ScrollViewer(滚动条) 自定义样式表 这个样式比较适合触摸屏上使用 滚动条设计的很宽
C# 自定义滚动条样式和多窗口切换
07-29
在C#编程中，自定义滚动条样式和多窗口切换是两种常见的用户界面（UI）设计技巧，可以提升应用程序的视觉效果和用户体验。本篇将详细介绍这两个知识点。 首先，我们来探讨如何实现自定义滚动条样式。在Windows ...
继续聊WPF——自定义滚动条
kanwoerzi
11-21 189
关键点：Track控件没有默认模板，它包括三个部分 DecreaseRepeatButton——这是一个RepeatButton即滑块左（上）的部分； IncreaseRepeatButton——同上，即滑块右（下）部分； Thumb——很明显了，这是拖动的滑块，请参考前面的文章。 &lt;Window x:Class="WpfApplication1.Window1" ...
Wpf ScrollBar自定义样式
weixin_30561425的博客
02-09 422
Wpf ScrollBar自定义样式 Wpf的ScrollBar可以分为六个区域：A.背景、B.向上按钮、C.向下的按钮、D.Track里面向上的按钮、E.Track里面向下的按钮、F.Track的Thumb 详情见下图 下面通过一个例子来自定义ScrollBar的样式 <Style x:Key="ScrollBar_style" TargetT...
WPF Listview ScrollBar 样式
weixin_30609331的博客
05-18 622
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowStartupLocation="CenterScreen" Title="" SizeToConte...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodeOfCC

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值