WPF自定义ScrollViewer

最新推荐文章于 2023-12-13 16:03:27 发布
最新推荐文章于 2023-12-13 16:03:27 发布
阅读量9.8k 收藏 4
点赞数 1
分类专栏： WPF 文章标签： WPF 滚动条 ScrollViewer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qian_f/article/details/29876077
版权

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"
             StartupUri="ScrollViewTest.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="MyResDic.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>
ScrollViewTest.xaml 

<Window x:Class="WPFTEST.ScrollViewTest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ScrollViewTest" Height="300" Width="300">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ScrollViewer.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock Height="23" HorizontalAlignment="Center" Margin="0" Name="textBlock1" Text="自定义滚动条" VerticalAlignment="Center" FontWeight="Bold" FontSize="16" FontStretch="Normal" FlowDirection="LeftToRight" Foreground="CornflowerBlue" />
        <ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" Margin="0" Name="scrollViewer1" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Visible" Template="{StaticResource MyScrollViewerControlTemplate}">
            <StackPanel Background="AliceBlue">
                <TextBlock Height="30">春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓春眠不觉晓</TextBlock>
                <TextBlock Height="30">处处闻啼鸟</TextBlock>
                <TextBlock Height="30">春眠不觉晓</TextBlock>
                <TextBlock Height="30">处处闻啼鸟</TextBlock>
                <TextBlock Height="30">春眠不觉晓</TextBlock>
                <TextBlock Height="30">处处闻啼鸟</TextBlock>
                <TextBlock Height="30">春眠不觉晓</TextBlock>
                <TextBlock Height="30">处处闻啼鸟</TextBlock>
                <TextBlock Height="30">春眠不觉晓</TextBlock>
                <TextBlock Height="30">处处闻啼鸟</TextBlock>
                <TextBlock Height="30">春眠不觉晓</TextBlock>
                <TextBlock Height="30">处处闻啼鸟</TextBlock>
                <TextBlock Height="30">春眠不觉晓</TextBlock>
                <TextBlock Height="30">处处闻啼鸟</TextBlock>
                <TextBlock Height="30">春眠不觉晓</TextBlock>
                <TextBlock Height="30">处处闻啼鸟</TextBlock>
            </StackPanel>
            
        </ScrollViewer>
    </Grid>
</Window>
MyResDic.xaml 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ControlTemplate x:Key="MyScrollViewerControlTemplate" 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="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="CornflowerBlue" RadiusX="3" RadiusY="3"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" Value="Blue" 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="6"/>
        <Setter Property="MinWidth" Value="6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid x:Name="Bg" Background="AliceBlue" SnapsToDevicePixels="true" Width="6">
                        <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="AliceBlue" 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>

截图：



Qian_F
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
05-20
WPF ScrollViewer(滚动条) 自定义样式表 这个样式比较适合触摸屏上使用 滚动条设计的很宽
silverlight中常用的控件
weixin_30439031的博客
08-20 114
一、布局控件 Canvas面板是一种很基础的布局面板，它支持对其中的控件采用绝对坐标定位。Canvas.Top和Canvas.Left。Canvas.ZIndex附加属性：如果指定了两个控件相对于父容器Canvas同样的边距，则后面声明的控件父覆盖前面声明的控件。这时我们可以使用Canvas.ZIndex属性来改变它们的显示顺序。 StackPanel是一种简单的布局面板，它支持用行或列...
WPF控件常用属性（持续更新）
jianxia628的博客
03-14 6074
WPF控件 Scrollviewer（滚动条）： 1.Vertical（Horizontal）ScrollBarVisIbility（是否出现滚动条） 2.CanContentScroll（逐元素展示） Text（字体）： 1.fortfamily（例如宋体，楷体各种字体的集合） 2.fontsize（大小） 3.fontstyle（例斜体，倾斜） 4.fontweight
WPF系列教程（十四）：特殊容器控件ScrollViewer
qq_43511299的博客
11-24 5758
ScrollViewer是一个可以滚动的控件。它使得大量内容在有限容器内显示成为可能。 在窗体中添加ScrollViewer控件，在ScrollViewer中添加一个文本框TextBox，将Text属性设置为较长的字符串。 （可以用word的语句自动生成功能，在word中输入函数=rand(1,2)即可） 利用滚动条的效果： ScrollViewer有一个滚动条设置的属性，在垂直方向有VerticalScrollBarVisibility=“Hidden” 有四种取值，分别是： Visible：显示滚动条
ScrollViewer结构介绍和ListBox自定义样式
狂奔之林的博客
03-17 344
转自：https://www.cnblogs.com/anding/p/4987426.html 一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要内容： ScrollViewer的样式拆解及基本样式定义； ListBox集合控件的样式定义；&nbs...
WPF 控件 (七、ScrollViewer)
LyRics1996的博客
04-03 738
【代码】WPF 控件 (七、ScrollViewer)
WPF ScrollViewer滚动
最新发布
m0_48915942的博客
12-13 331
使用ScrollChanged事件触发通过偏移量来判断。if (scroll!= null)//当数据不在增加的时候//当数据增加,自动滑动else。
WPF基础五：UI②内容元素ScrollViewer
hd51cc的博客
04-21 2127
ScrollViewer 表示可包含其他可视元素的可滚动区域。 ScrollViewer可使内容在小于其实际大小的区域中显示。如果ScrollViewer的内容不完全可见，ScrollViewer将显示用户可用于移动可见内容区域的滚动条。范围包含ScrollViewer所有内容的区域。内容的可见区域是viewport。 物理滚动用于按预设的物理增量（通常按以像素为单位声明的值）滚动内容。逻辑滚动用于滚动到逻辑树中的下一项。如果需要物理滚动而不是逻辑滚动，请在ScrollV...
WPF 自定义滚动条控件ScrollViewer（三）
韬光养晦
09-16 960
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 自定义ScrollViwer
weixin_30343157的博客
12-15 221
ScrollViewer自定义样式 ScrollViewer在各种列表、集合控件中广泛使用的基础组建，先看看效果图： 如上图，ScrollViewer简单来说分两部分，一个横向的滚动条，一个垂直滚动条，两个样式、模板、功能都基本一样，他们都是ScrollBar。以垂直滚动条为例，分解一下，分解图： 1：向上滑动的按钮，用RepeatButton实现功能； 2：上部分滑块，功能...
自定义ScrollViewer——仿iphone和android
04-15
网上找不到 只好自己开发了 ScrollViewer是不错，不过不足够 特别是用了IPHONE和ANDROID之后 拖到底部后，还可以继续拖一小段距离 符合手触设备的用户体验 VS2010开发
WPF ScrollViewer(滚动条) 仿苹果样式
02-05
仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html 仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html
WPF的scrollview滚动条设置及上一页下一页设置
10-29
WPF的scrollview滚动条设置，包括上一页下一页上一条吓一条设置
WPF自定义样式W：TabControlTest,倒计时,数字加减文本框,WPF圆形图像
04-21
WPF实现， BindConvert, Comboximage GridSplit MessageBox ScrollViewer TabControlTest 倒计时 数字加减文本框 WPF圆形图像
WPF自定义Popup和弹出菜单
热门推荐
天空
06-14 4万+
Popup：
WPF图片按钮
天空
06-06 1万+
进行按钮美化时，手上有的可能只是美工给的按钮的三态或四态图（鼠标）
WPF下ImageButton的实现
天空
06-11 1万+
在处理美工的这种图的时候：
WPF实现淡入淡出效果
天空
06-06 1万+
淡入淡出的功能可以通过WPF中的动画调整控件的touming
WPF自定义ComboBox
05-20
在WPF中，可以通过继承ComboBox类并重写其默认模板，来实现自定义ComboBox的样式和行为。下面是一个简单的例子，演示如何创建一个带有自定义下拉框项的ComboBox。 首先，创建一个名为CustomComboBox的类，继承自...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值