自定义WPF滚动条(ScrollViewer)：仿苹果系统规划

最新推荐文章于 2024-08-09 14:19:22 发布
最新推荐文章于 2024-08-09 14:19:22 发布
阅读量1.8k 收藏
点赞数
分类专栏： C# 文章标签： wpf command

苹果系统滚动条最大的特点就是滚动上下按钮是统一摆放在右下侧(如下图)。今天通过WPF灵活的控件模板来定义一个类似的滚动条。　　 　　

 

效果如下：

 

 

<Window.Resources>

        <SolidColorBrush x:Key="NormalColor">Red</SolidColorBrush>

        <SolidColorBrush x:Key="HighlightColor">Orange</SolidColorBrush>

        <SolidColorBrush x:Key="PressedColor">DarkRed</SolidColorBrush>

        <SolidColorBrush x:Key="BorderColor">Gray</SolidColorBrush>

        <SolidColorBrush x:Key="BackColor">Pink</SolidColorBrush>

        <Style x:Key="stBorder" TargetType="Border">

            <Setter Property="BorderBrush" Value="{StaticResource BorderColor}"/>

            <Setter Property="BorderThickness" Value="1"/>

            <Setter Property="Background" Value="{StaticResource NormalColor}"/>

            <Setter Property="CornerRadius" Value="3"/>

        </Style>

        <Style x:Key="stBackBorder" TargetType="Border">

            <Setter Property="BorderBrush" Value="{StaticResource BorderColor}"/>

            <Setter Property="BorderThickness" Value="1"/>

            <Setter Property="Background" Value="{StaticResource BackColor}"/>

            <Setter Property="CornerRadius" Value="3"/>

        </Style>

        <Style x:Key="stRepeatBtn" TargetType="RepeatButton">

            <Setter Property="SnapsToDevicePixels" Value="True"/>

            <Setter Property="OverridesDefaultStyle" Value="true"/>

            <Setter Property="Focusable" Value="false"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="RepeatButton">

                        <Border Name="bd" 

                                Style="{StaticResource stBorder}">

                            <Path 

                                HorizontalAlignment="Center"

                                VerticalAlignment="Center"

                                Fill="White"

                                Data="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" />

 

                        </Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsMouseOver" Value="true">

                                <Setter TargetName="bd" Property="Background" Value="{StaticResource HighlightColor}"/>

                            </Trigger>

                            <Trigger Property="IsPressed" Value="true">

                                <Setter TargetName="bd" Property="Background" Value="{StaticResource PressedColor}"/>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <Style x:Key="stScrollBtn" TargetType="RepeatButton">

            <Setter Property="SnapsToDevicePixels" Value="True"/>

            <Setter Property="OverridesDefaultStyle" Value="true"/>

            <Setter Property="IsTabStop" Value="false"/>

            <Setter Property="Focusable" Value="false"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="RepeatButton">

                        <Border Background="Transparent" />

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <Style x:Key="stThumb" TargetType="{x:Type Thumb}">

            <Setter Property="SnapsToDevicePixels" Value="True"/>

            <Setter Property="OverridesDefaultStyle" Value="true"/>

            <Setter Property="IsTabStop" Value="false"/>

            <Setter Property="Focusable" Value="false"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type Thumb}">

                        <Border Name="bd" Style="{StaticResource stBorder}"></Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsDragging" Value="true">

                                <Setter TargetName="bd" Property="Background" Value="{StaticResource PressedColor}"></Setter>

                            </Trigger>

                            <Trigger Property="IsMouseOver" Value="true">

                                <Setter TargetName="bd" Property="Background" Value="{StaticResource HighlightColor}"></Setter>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">

            <Border Style="{StaticResource stBackBorder}">

                <Grid>

                    <Grid.RowDefinitions>

                        <RowDefinition/>

                        <RowDefinition MaxHeight="18"/>

                        <RowDefinition MaxHeight="18"/>

                    </Grid.RowDefinitions>

                    <Border

                      Grid.RowSpan="3"

                      CornerRadius="2" />

                    <RepeatButton 

                      Grid.Row="1"                           

                      Style="{StaticResource stRepeatBtn}"

                      Height="18"

                      Command="ScrollBar.LineUpCommand"

                      Content="M 0 4 L 8 4 L 4 0 Z" />

                    <Track 

                      Name="PART_Track"

                      Grid.Row="0"

                      IsDirectionReversed="true">

                        <Track.DecreaseRepeatButton>

                            <RepeatButton 

                              Style="{StaticResource stScrollBtn}"

                              Command="ScrollBar.PageUpCommand" />

                        </Track.DecreaseRepeatButton>

                        <Track.Thumb>

                            <Thumb 

                              Style="{StaticResource stThumb}" 

                              Margin="1,0,1,0"  />

                        </Track.Thumb>

                        <Track.IncreaseRepeatButton>

                            <RepeatButton 

                              Style="{StaticResource stScrollBtn}"

                              Command="ScrollBar.PageDownCommand" />

                        </Track.IncreaseRepeatButton>

                    </Track>

                    <RepeatButton 

                      Grid.Row="3" 

                      Style="{StaticResource stRepeatBtn}"

                      Height="18"

                      Command="ScrollBar.LineDownCommand"

                      Content="M 0 0 L 4 4 L 8 0 Z"/>

                </Grid>

            </Border>

        </ControlTemplate>

        <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">

            <Border Style="{StaticResource stBackBorder}">

                <Grid >

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition/>

                        <ColumnDefinition MaxWidth="18"/>

                        <ColumnDefinition MaxWidth="18"/>

                    </Grid.ColumnDefinitions>

                    <Border

                      Grid.ColumnSpan="3"

                      CornerRadius="2"  />

                    <RepeatButton 

                      Grid.Column="1"                           

                      Style="{StaticResource stRepeatBtn}"

                      Width="18"

                      Command="ScrollBar.LineLeftCommand"

                      Content="M 4 0 L 4 8 L 0 4 Z" />

                    <Track 

                      Name="PART_Track"

                      Grid.Column="0"

                      IsDirectionReversed="False">

                        <Track.DecreaseRepeatButton>

                            <RepeatButton 

                              Style="{StaticResource stScrollBtn}"

                              Command="ScrollBar.PageLeftCommand" />

                        </Track.DecreaseRepeatButton>

                        <Track.Thumb>

                            <Thumb 

                              Style="{StaticResource stThumb}" 

                              Margin="0,1,0,1"   />

                        </Track.Thumb>

                        <Track.IncreaseRepeatButton>

                            <RepeatButton 

                              Style="{StaticResource stScrollBtn}"

                              Command="ScrollBar.PageRightCommand" />

                        </Track.IncreaseRepeatButton>

                    </Track>

                    <RepeatButton 

                      Grid.Column="2" 

                      Style="{StaticResource stRepeatBtn}"

                      Width="18"

                      Command="ScrollBar.LineRightCommand"

                      Content="M 0 0 L 4 4 L 0 8 Z"/>

                </Grid>

            </Border>

        </ControlTemplate>

        <Style TargetType="{x:Type ScrollViewer}">

            <Setter Property="OverridesDefaultStyle" Value="True"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type ScrollViewer}">

                        <Grid Background="{StaticResource BackColor}">

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition/>

                                <ColumnDefinition Width="Auto"/>

                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>

                                <RowDefinition/>

                                <RowDefinition Height="Auto"/>

                            </Grid.RowDefinitions>

                            <ScrollContentPresenter/>

                            <ScrollBar  Name="PART_VerticalScrollBar"

                                        Grid.Column="1"

                                        Value="{TemplateBinding VerticalOffset}"

                                        Maximum="{TemplateBinding ScrollableHeight}"

                                        ViewportSize="{TemplateBinding ViewportHeight}"

                                        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"

                                        Template="{StaticResource VerticalScrollBar}"/>

                            <ScrollBar  Name="PART_HorizontalScrollBar"

                                        Orientation="Horizontal"

                                        Grid.Row="1"

                                        Value="{TemplateBinding HorizontalOffset}"

                                        Maximum="{TemplateBinding ScrollableWidth}"

                                        ViewportSize="{TemplateBinding ViewportWidth}"

                                        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"

                                        Template="{StaticResource HorizontalScrollBar}"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </Window.Resources>

    <ScrollViewer HorizontalScrollBarVisibility="Auto" >

        <Grid>

            <Border Width="500" 

                    Height="500">

                <Border.Background>

                    <VisualBrush ViewportUnits="Absolute"

                                 Viewport="0 0 50 30"

                                 TileMode="FlipXY">

                        <VisualBrush.Visual>

                            <Button Margin="5" Width="50" Height="30">ASD</Button>

                        </VisualBrush.Visual>

                    </VisualBrush>

                </Border.Background>

            </Border>

        </Grid>

    </ScrollViewer>

 

转自http://www.wpf123.com/news/?6212.html

haylhf
关注
专栏目录
WPF滚动条样式自定义，ScrollViewer样式自定义
小周爱学习的博客
04-03 7852
在做wpf界面制作中布局经常用到ScrollViewer控件，默认的样式很丑，跟自己设计的界面风格不搭配，需要修改成跟自己界面设计风格一样的话需要修改它的默认样式。下面就分享下代码：&lt;ScrollViewer HorizontalScrollBarVisibility="Visible" Template="{DynamicResource ScrollViewerControlTempla...
WPF ScrollViewer样式
OneOnce的专栏
08-14 1490
效果 scrollviewer Style： <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WPF ScrollViewer(滚动条) 仿苹果样式
08-07
仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html
WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
weixin_33858249的博客
11-23 456
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要内容： ScrollViewer的样式拆解及基本样式定义； ListBox集合控件的样式定义； 二．ScrollViewer自定义样式 ScrollViewer在各种列表、集合...
WPF篇（13）-ScrollViewer控件+ScrollBar滚动条+Slider滑动条
最新发布
一个人的江湖
08-09 1593
如果某个控件的尺寸太大，当前界面无法全部显示，则可以将这个控件包含在ScrollViewer中，因为ScrollViewer控件封装了一个水平滚动条ScrollBar和一个垂直滚动条ScrollBar，所以，ScrollViewer就是一个包含其它可视元素的可滚动区域控件。ScrollViewer继承于ContentControl，所以它也是一个内容控件，只能在Content属性中设置一个子元素，如果要在ScrollViewer中显示多个子元素，请设置一个集合控件。 ScrollViewer 控件既响应鼠标
WPF ScrollViewer 仿苹果 细长 滚动条
04-01
WPF ScrollViewer 仿苹果 细长 滚动条
WPF实现ScrollViewer滚动到指定控件处
10-19
在WPF开发中，ScrollViewer控件用于提供可滚动的视图，允许用户查看超过屏幕范围的内容。然而，有时我们需要在程序逻辑中自动控制ScrollViewer滚动到特定的子控件，比如用户完成某个操作后自动定位到指定内容。本文...
WPF ScrollViewer 样式
11-25 5015
[code=csharp]
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
05-20
WPF ScrollViewer(滚动条) 自定义样式表 这个样式比较适合触摸屏上使用 滚动条设计的很宽
WPF ScrollViewer样式 滚动时显示滚动条
09-28
滚动时显示滚动条,其他时候隐藏样式，滚动条为细窄边框
wpf ScrollViewer样式
qq_32961291的博客
12-22 560
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateB
WPF ScrollViewer 自定义样式
jtl2004的专栏
12-27 3243
    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"     Height="300"
wpf ScrollViewer 滚动条样式(两种)
weixin_30551963的博客
05-22 688
样式1 直角 1 <Style x:Key="RightAngleScrollViewer" 2 TargetType="{x:Type ScrollViewer}"> 3 <Setter Property="OverridesDefaultStyle" Value="True"/&gt...
WPF 滚动条ScrollViewer样式记录
今天也是个小白
07-12 909
WPF 应ScrollBar 和 ScrollViewer样式
WPF listbox模板
withyzu
07-14 239
<Window.Resources> <ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}"> <Grid x:Name="Grid" Background="{TemplateBinding Background}"> <Grid.ColumnDefinitions&g.
ScrollViewer—WPF滚动条控件
小芦荟同学的博客
05-30 1830
ScrollViewer—WPF滚动条控件 ScrollViewer定义与功能、 ScrollViewer使用、ScrollViewer常用属性、滚动类型、用Button来控制ScrollViewer的滚动
WPF自定义滚动条：控制滑块尺寸与动画效果
此文档展示了如何利用WPF的模板和动画系统来创建一个自定义滚动条，开发者可以根据需求调整滑块的尺寸和交互效果，提升应用程序的视觉和交互体验。同时，了解并掌握这类自定义控件的设计原则和技术细节，对于开发高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值