WPF 自定义滚动条控件ScrollViewer（二）

最新推荐文章于 2024-06-28 11:05:12 发布
最新推荐文章于 2024-06-28 11:05:12 发布
阅读量483 收藏
点赞数
分类专栏： WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43024228/article/details/105529348
版权

WPF 自定义滚动条控件ScrollViewer（二）

一.创建一个资源字典：ScrollViewDictionary.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ControlTemplate x:Key="MyScrollViewer" TargetType="{x:Type ScrollViewer}">
        <!--View区域背景色-->
        <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="White" 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 MyScrollBarStyle}"/>
            <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 MyScrollBarStyle}"/>
        </Grid>
    </ControlTemplate>


    <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>

    <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}">
                    <!--滚动条颜色和圆角设置-->
                    <Rectangle Name="thumbRect" Fill="#686868" RadiusX="3" RadiusY="3"/>
                    <!--鼠标拉动滚动条时的颜色-->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" Value="CornflowerBlue" TargetName="thumbRect" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </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>
    <Style x:Key="MyScrollBarStyle" TargetType="{x:Type ScrollBar}">
        <Setter Property="Background" Value="AliceBlue"/>
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <!--滚动条宽度-->
        <Setter Property="Width" Value="8"/>
        <Setter Property="MinWidth" Value="6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <!--滚动条背景色-->
                    <Grid x:Name="Bg" Background="#DDDDDD" SnapsToDevicePixels="true" Width="8">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}">
                            <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>
                    </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="6"/>
                <Setter Property="MinHeight" Value="6"/>
                <Setter Property="Background" Value="AliceBlue"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" Background="Red" SnapsToDevicePixels="true">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Track x:Name="PART_Track"  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}" />
                                    </Track.Thumb>
                                </Track>
                            </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>
</ResourceDictionary>

二.在窗体中引用资源字典中的样式：

<Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ScrollViewDictionary.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

三.主窗体代码：

<Grid>
        <ScrollViewer Template="{StaticResource MyScrollViewer}" Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" x:Name="scrList" Margin="0" VerticalScrollBarVisibility="Auto" Height="350" Width="250">
            <StackPanel Orientation="Vertical" Name="layerList" ScrollViewer.VerticalScrollBarVisibility="Visible" Width="250" >
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据一"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据二"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据三"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据四"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据五"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据六"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据七"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据八"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据九"></Button>
                <Button Height="50" Width="230" HorizontalAlignment="Left" Content="数据十"></Button>
            </StackPanel>
        </ScrollViewer>
    </Grid>

四.运行效果图：
在这里插入图片描述

Danny_hi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF_Silverlight使用Grid+ScrollViewer自定义GridView示例
12-03
WPF_Silverlight使用Grid+ScrollViewer自定义GridView示例
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
weixin_30587927的博客
05-20 316
注释直接写在代码里了 不太理解意思的 可以先去看看我上一篇 WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 滚动条因为要在触摸屏上用 所以我设计的很宽 宽度可以自己改 把宽度变量单独拿出来了 先上效果图 还没滚动 已滚动区域 滚动到底部 内容够显示,不需要滚动条的时候 <Window xmlns="ht...
WPF----自定义滚动条ScrollViewer
最新发布
chongchong1325的博客
06-28 494
滚动条是项目当中经常用到的一个控件，大部分对外项目都有外观的需求，因此需要自定义，文中主要是针对一段动态的状态数据进行展示，并保证数据始终在最新一条，就是需要滚动条滚动到底部。
WPF滚动条样式自定义，ScrollViewer样式自定义
小周爱学习的博客
04-03 7786
在做wpf界面制作中布局经常用到ScrollViewer控件，默认的样式很丑，跟自己设计的界面风格不搭配，需要修改成跟自己界面设计风格一样的话需要修改它的默认样式。下面就分享下代码：&lt;ScrollViewer HorizontalScrollBarVisibility="Visible" Template="{DynamicResource ScrollViewerControlTempla...
WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂
weixin_30527551的博客
04-01 523
先上效果图 正常样式 拖动时样式 好下面 开始吧 ================================================================= 打开blend 新建个 WPF应用程序工程 点击左上角 文件 → 新建项目 项目类型WPF→右侧选WPF应用程序→项目名称你随便起一个用输入的ScrollViewerStyle→...
WPF listbox模板
withyzu
07-14 209
<Window.Resources> <ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}"> <Grid x:Name="Grid" Background="{TemplateBinding Background}"> <Grid.ColumnDefinitions&g.
WPF实现ScrollViewer滚动到指定控件处
10-19
在WPF开发中，ScrollViewer控件用于提供可滚动的视图，允许用户查看超过屏幕范围的内容。然而，有时我们需要在程序逻辑中自动控制ScrollViewer滚动到特定的子控件，比如用户完成某个操作后自动定位到指定内容。本文...
WPF ScrollViewer 仿苹果 细长 滚动条
04-01
总结来说，WPF的ScrollViewer控件配合自定义样式和模板，能让我们轻松实现类似苹果设备上的细长滚动条效果。这种定制不仅可以改变滚动条的视觉外观，还能调整其交互行为，从而提升应用程序的整体设计感和用户体验。...
WPF中自定义Scrollbar 滚动条 样式 图片
11-24
通过分析和学习这个文件，你可以了解到更多关于自定义WPF滚动条的细节。 总的来说，WPF的自定义能力使得滚动条可以根据设计需求进行高度定制，无论是颜色调整还是图片应用，都能实现独特的视觉效果。只要理解了样式...
WPF的ListView控件自定义布局用法实例
09-02
ScrollViewer的背景设为白色，垂直滚动条自动显示，而水平滚动条被禁用。ItemsPresenter用于放置ListView的所有项目，它会自动适应内容的大小。 接下来，`myLVItemTemplate`是ListViewItem的数据模板。这个模板定义...
wpf ScrollViewer 滚动条样式(两种)
weixin_30551963的博客
05-22 671
样式1 直角 1 <Style x:Key="RightAngleScrollViewer" 2 TargetType="{x:Type ScrollViewer}"> 3 <Setter Property="OverridesDefaultStyle" Value="True"/&gt...
WPF ScrollViewer滚动时显示滚动条样式
12-08
Blend基础上制作的滚动条样式，当滚动条滚动时才会显示滚动条 https://download.csdn.net/download/dycx880709/9642078代码有问题，一直没有更新，非常抱歉
WPF自定义ScrollViewer滚动条样式
FireGhost57的专栏
02-17 1274
&lt;!-- 滚动条颜色 --&gt; &lt;SolidColorBrush x:Key="ScrollBarBackground" Color="Transparent"/&gt; &lt;SolidColorBrush x:Key="ScrollBarThumbNormal" Color="Black" Opacity="0.1" /&
wpf之自定义滚动条
weixin_34416649的博客
10-20 367
原文:wpf之自定义滚动条首先我们添加一个带滚动条的textbox控件： &lt;ScrollViewer Height="130" Width="620" VerticalScrollBarVisibility="Auto" Style="{StaticResource for_scrollviewer}"&gt; &lt;TextBlock xml:sp...
WPF自定义滚动条
dengjieming5263的博客
12-11 188
我修改了一些地方，部分代码参考了博主 https://www.cnblogs.com/xiaomingg/ <!-- ScrollViewer 滚动条 --> <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"> <Setter Property="Over...
WPF UI开发教程自定义滚动条
liaohaiyin的专栏
08-07 245
wpf 自带滚动条比较简单，在项目中要原形图要求设计滚动条。 <LinearGradientBrush x:Key="ForegroundBrush" StartPoint="0.0,0" EndPoint="1,0"> <GradientStop Color="#8DBDEE" Offset="0.5" /> <GradientStop Color="#6BAAE9" Offset="0.7" /> <Gra
C# WPF下自定义滚动条ScrollViewer样式
热门推荐
凡梦
12-22 1万+
一、实现对ScrollViewer样式的自定义主要包括： 1、滚动条宽度设置 2、滚动条颜色 3、滚动条圆角 4、滚动条拉动时的效果mouseover 二、实现效果： 三、实现方法 1、创建资源字典（ResourceDictionary）文件 由于style代码比较多，之间在控件文件中加载style比较混乱，也不利于其它窗口复用，这里单独创建了ScrollViewDic
wpf 设置滚动条的风格
06-04
WPF 中可以通过自定义样式来改变滚动条的外观。以下是实现步骤： 1. 在 XAML 中定义一个样式，设置 TargetType 为 ScrollBar。 ```xaml <Window.Resources> <Style x:Key="ScrollBarStyle" TargetType="ScrollBar"> <!-- 自定义样式 --> </Style> </Window.Resources> ``` 2. 在样式中定义滚动条的控件模板，可以使用一系列 WPF 控件和属性来自定义滚动条的外观。 ```xaml <Window.Resources> <Style x:Key="ScrollBarStyle" TargetType="ScrollBar"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ScrollBar"> <Grid> <Border Background="Gray" CornerRadius="5"/> <RepeatButton x:Name="PART_LineUpButton" Style="{StaticResource ScrollBarButtonStyle}" Content="↑"/> <RepeatButton x:Name="PART_LineDownButton" Style="{StaticResource ScrollBarButtonStyle}" Content="↓"/> <Thumb x:Name="PART_Thumb" Style="{StaticResource ScrollBarThumbStyle}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> ``` 在上面的模板中，我们使用了 Grid、Border、RepeatButton 和 Thumb 等控件来构建滚动条的外观。其中 RepeatButton 和 Thumb 也可以通过自定义样式来改变其外观。 3. 在需要使用滚动条的控件上，使用 ScrollViewer 控件，并设置其 VerticalScrollBarStyle 或 HorizontalScrollBarStyle 属性为自定义的样式。 ```xaml <ScrollViewer VerticalScrollBarStyle="{StaticResource ScrollBarStyle}"> <!-- 内容 --> </ScrollViewer> ``` 通过以上步骤，就可以自定义滚动条的外观了。需要注意的是，不同的控件可能需要不同的样式，需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值