WPF 自定義滾動條（ScrollView、ScrollBar）樣式

阿新 • • 發佈：2019-01-09

一、滾動條基本樣式

本次修改Scrollview及ScrollBar滾動條樣式是通過純樣式實現的。修改的內容包含滾動條的顏色，上下按鈕的隱藏。另外添加了滑鼠經過滾動條動畫。

style樣式如下：

<!-- ScrollViewer 滾動條 -->
    <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}">
                    <Grid>
                        <!--滾動條顏色-->
                        < 
Border Background="#646465" CornerRadius="3"/>
                    </Grid>
                </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="Opacity" Value="0.2"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <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="Opacity" Value="0.2"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--滾動條上下按鈕-->
    <Style x:Key="VerticalScrollBarPageButton2" 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="Opacity"  Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle Fill="#90000000" Width="0" Height="0"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="for_scrollbar" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Margin" Value="0,1,1,6"/>
        <Setter Property="Width"  Value="10"/>
        <Setter Property="MinWidth"  Value="5"/>
        <Setter Property="Opacity"   Value="0.2"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid x:Name="Bg" SnapsToDevicePixels="true">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <RepeatButton  Grid.Row="0" Style="{StaticResource VerticalScrollBarPageButton2}" Command="{x:Static ScrollBar.PageUpCommand}"/>
                        <Track x:Name="PART_Track"   Grid.Row="1" IsEnabled="{TemplateBinding IsMouseOver}" IsDirectionReversed="true">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageUpCommand}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageDownCommand}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumb}"/>
                            </Track.Thumb>
                        </Track>
                        <RepeatButton Grid.Row="2" Style="{StaticResource VerticalScrollBarPageButton2}" Command="{x:Static ScrollBar.PageDownCommand}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Background"  Value="Transparent"/>
                <Setter Property="Margin" Value="1,0,6,1"/>
                <Setter Property="Height"   Value="5"/>
                <Setter Property="MinHeight"  Value="5"/>
                <Setter Property="Width"    Value="Auto"/>
                <Setter Property="Opacity" Value="0.2"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid x:Name="Bg" SnapsToDevicePixels="true">
                                <Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}"  Command="{x:Static ScrollBar.PageLeftCommand}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}"  Command="{x:Static ScrollBar.PageRightCommand}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource ScrollBarThumb}"/>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style x:Key="for_scrollviewer"
           TargetType="{x:Type ScrollViewer}">
        <Setter Property="BorderBrush" Value="LightGray"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                        <Grid Background="{TemplateBinding Background}">
                            <ScrollContentPresenter  Cursor="{TemplateBinding Cursor}" Margin="{TemplateBinding Padding}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                            <ScrollBar x:Name="PART_VerticalScrollBar"
                                       HorizontalAlignment="Right"
                                       Maximum="{TemplateBinding ScrollableHeight}"
                                       Orientation="Vertical"
                                       Style="{StaticResource for_scrollbar}"
                                       ViewportSize="{TemplateBinding ViewportHeight}"
                                       Value="{TemplateBinding VerticalOffset}"
                                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                            <ScrollBar x:Name="PART_HorizontalScrollBar"
                                       Maximum="{TemplateBinding ScrollableWidth}"
                                       Orientation="Horizontal"
                                       Style="{StaticResource for_scrollbar}"
                                       VerticalAlignment="Bottom"
                                       Value="{TemplateBinding HorizontalOffset}"
                                       ViewportSize="{TemplateBinding ViewportWidth}"
                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="ScrollChanged" >
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_VerticalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.8"
                                        Duration="0:0:1"/>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_VerticalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.2"
                                        Duration="0:0:1"
                                        BeginTime="0:0:1"/>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_HorizontalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.8"
                                        Duration="0:0:1"/>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_HorizontalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.2"
                                        Duration="0:0:1"
                                        BeginTime="0:0:1"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseEnter"
                                      SourceName="PART_VerticalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_VerticalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.8"
                                        Duration="0:0:0.7"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave"
                                      SourceName="PART_VerticalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_VerticalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.2"
                                        Duration="0:0:0.7"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseEnter"
                                      SourceName="PART_HorizontalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_HorizontalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.8"
                                        Duration="0:0:0.7"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave"
                                      SourceName="PART_HorizontalScrollBar">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="PART_HorizontalScrollBar"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.2"
                                        Duration="0:0:0.7"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--預設ScrollBar-->
    <Style TargetType="ScrollBar" BasedOn="{StaticResource for_scrollbar}"/>

    <!--預設ScrollView-->
    <Style TargetType="ScrollViewer" BasedOn="{StaticResource for_scrollviewer}"/>

修改之後的滾動條是影響全域性的。

樣式應用之後的效果如下：

引用示例：

<ScrollViewer Margin="10" Height="200" Width="100" BorderBrush="Gray" BorderThickness="1">
        <StackPanel Orientation="Vertical">
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
              <TextBlock Text="測試一"/>
         </StackPanel>
 </ScrollViewer>

所有程式碼已經上傳到github：https://github.com/cmfGit/WpfDemo.git

WPF 自定義滾動條（ScrollView、ScrollBar）樣式

原文: WPF 自定義滾動條（ScrollView、ScrollBar）樣式一、滾動條基本樣式本次修改Scrollview及ScrollBar滾動條樣式是通過純樣式實現的。修改的內容包含滾動條的顏色，上下按鈕的隱藏。另外添加了滑鼠經過滾動條動畫。 style樣式如下： <!-- Scr

（八十九）c#Winform自定義控制元件-自定義滾動條（treeview、panel、datagridview、listbox、listview、textbox）

官網 http://www.hzhcontrols.com/ 前提入行已經7,8年了，一直想做一套漂亮點的自定義控制元件，於是就有了本系列文章。 GitHub：https://github.com/kwwwvagaa/NetWinformControl 碼雲：https://gitee.com/kwwwva

HTML自定義滾動條（仿網易郵箱滾動條）轉載

基本上 fma 內容 scrollbar color http code %20 water 它是使用CSS中的偽元素來實現的，主要由以下三個來完成： 1. -webkit-scrollbar：定義滾動條的樣式，如長寬。 2. -webkit-scrollbar-thumb

利用原生js實現自定義滾動條（可點選到達，拖動到達）

1.HTML檔案 div1是滾動條，div2是滾動小球，div3是文字區域容器，div4是文字區域。 <div id="div"> <div id="div1"> <div id="div2"> </div> </div&

WPF 自定義滾動條

我修改了一些地方，部分程式碼參考了博主 https://www.cnblogs.com/xiaomingg/  <Style x:Key="ScrollBarThumb" TargetType="{x:Ty

HTML自定義滾動條（仿網易郵箱滾動條）

自定義滾動條在web前端非常火爆的今天，好的介面可以給人們很好的體驗。瀏覽器的滾動條總是千篇一律，那麼滾動條是否可以自定義呢？網上好多自定義滾動條通過CSS樣式來設定的，但是這種做法只有IE支援，那麼谷歌瀏覽器是否也可以自定義滾動條呢？前一段時間瀏覽網易郵箱的時候發現它上面的滾

CSS在移動端隱藏滾動條/自定義滾動條（scrollbar的各種屬性）

一個醜醜的滾動條在某些時候是非常礙眼的，移動端由於螢幕小的緣故，更是顯眼，最好還是讓它能不出現，就不出現。除了用div遮罩外，許多瀏覽器核心也提供了私有屬性控制滾動條的樣式。移動端多為weibkit核心，滾動條的定製方案提供的很完善，蠻強大的哦~ 最基本的，o

自定義滾動條（原生，相容ie8以上）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> &l

WPF-自定義滾動條ScrollBar

<Style TargetType="{x:Type ScrollBar}"> <Setter Property="Template"> &l

自定義Button形狀（圓形、橢圓） shape

這裡介紹2種改變Button形狀的方法，一個是直接通過設定一張圓形背景圖片，另一種方法是通過引用自定義的shape 檔案。具體參見如下： --------main_menu_btnshape.xml 自定義形狀xml檔案 <?xml version="1.0" e

Android簡單自定義進度條（小白進）

今天，我在騰訊課堂學習了自定義一個進度條，視訊連結：https://ke.qq.com/course/144239#term_id=100163342，我根據此視訊教程，寫了關於此程式碼的詳細註釋，非常簡單，非常適合小白學習。主要步驟是: 1.

kafka傳送自定義訊息體（物件、陣列）

在前面簡單搭建了Windows上的kafka環境，並使用命令列測試可以執行之後（環境請參考：http://blog.csdn.net/u014104286/article/details/75040932）我們會考慮怎麼使用kafka；先試著傳送一個簡單的訊息，傳送成功之後

H5移動端開發基礎（三）自定義滾動條、實戰-音悅臺

自定義滾動條、實戰-音悅臺自定義滾動條 js封裝 transform.js tween.js scrollBar.js 音悅臺適配樣式 html

wpf之自定義滾動條

horizon viewport maximum lap html 消失 tro getname imu 原文:wpf之自定義滾動條首先我們添加一個帶滾動條的textbox控件： <ScrollViewer Height="130" Width="620" Vert

C# WPF下自定義滾動條ScrollViewer樣式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/20

CSS3自定義滾動條樣式 -webkit-scrollbar

play 偽類 thumb area 沒有 :link 現在自定義滾動條 box ::-webkit-scrollbar {/*隱藏滾輪*/display: none;} 前言 webkit支持擁有overflow屬性的區域，列表框，下拉菜單，textarea的滾動條自定

每天一個JS 小demo之自定義滾動條。主要知識點：事件應用

prevent 數據滾動 sca listener 視頻希望特效 poi <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D

移動端網頁自定義滾動條

max view andro move .html class height transform inner <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

CSS3自定義滾動條樣式之 -webkit-scrollbar

selection 單獨窗口請求方塊利用源碼 bsp 進行有沒有覺得瀏覽器自帶的原始滾動條很不美觀，同時也有看到很多網站的自定義滾動條顯得高端，就連chrome32.0開發板都拋棄了原始的滾動條，美觀多了。那webkit瀏覽器是如何自定義滾動條的呢？前言

WPF自定義控件（二）の重寫原生控件樣式模板

我們 new 所有代碼 microsoft tps ron 例子 family 開發過程中，我們有時候用WPF原生的控件就能實現自己的需求，但是樣式、風格並不能滿足我們的需求，那麽我們該怎麽辦呢？----自定義樣式與模板。一、樣式在WPF中我們可以

WPF 自定義滾動條（ScrollView、ScrollBar）樣式

一、滾動條基本樣式

相關推薦