WPF ScrollViewer(滾動條) 自定義樣式表制作 (改良+美化)

注釋直接寫在代碼里了   不太理解意思的 可以先去看看我上一篇  WPF ScrollViewer(滾動條)  自定義樣式表制作 圖文並茂

滾動條因為要在觸摸屏上用  所以我設計的很寬 寬度可以自己改  把寬度變量單獨拿出來了

先上效果圖

還沒滾動

已滾動區域

滾動到底部

內容夠顯示,不需要滾動條的時候

 

<Window 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"
        x:Class="ScrollViewerStyle.Window1"
        x:Name="Window"
        Title="Window1"
        Width="300"
        Height="300">

    <Window.Resources>


        <!--滾動條默認背景色灰色-->
        <ImageBrush x:Key="imgVerticalScrollBarBackground"
                    TileMode="FlipY"
                    ImageSource="Images/Window1/PageDownBG.png" />
        <!--滾動條上部分已滾動背景色橘黃色-->
        <ImageBrush x:Key="imgVerticalScrollBarDisabledBackground"
                    TileMode="FlipY"
                    ImageSource="Images/Window1/PageUpBG.png" />
        <!--滾動條上滾動按鈕圖片-->
        <ImageBrush x:Key="imgVerticalScrollBarUpButton"
                    ImageSource="Images/Window1/BarUp.png" />
        <!--滾動條上滾動按鈕不可用狀態圖片-->
        <ImageBrush x:Key="imgVerticalScrollBarDisabledUpButton"
                    ImageSource="Images/Window1/BarUp_E.png" />
        <!--滾動條下滾動按鈕圖片 可用 和不可用 都是灰色圖片-->
        <ImageBrush x:Key="imgVerticalScrollBarDownButton"
                    ImageSource="Images/Window1/BarDown.png" />
        <!--滾動條中間滾動按鈕圖片-->
        <BitmapImage x:Key="imgNavigationButton"
                     UriSource="Images/Window1/Nar_Center.png" />
        <!--滾動條中間滾動按鈕 滾動時圖片-->
        <BitmapImage x:Key="imgNavigationButton_S"
                     UriSource="Images/Window1/Nar_Center_S.png" />
        <!--滾動條的寬度-->
        <sys:Double x:Key="VerticalScrollBarWidth">50</sys:Double>


        <!--ScrollViewer模版-->
        <ControlTemplate x:Key="ScrollViewerControlTemplate1"
                         TargetType="{x:Type ScrollViewer}">
            <Grid x:Name="Grid"
                  Background="{TemplateBinding Background}">

                <!--還是上一話題,我只需要右側縱向的滾動條,橫向滾動條和多余的代碼我都去掉了,如果橫豎都要用,請照葫蘆畫瓢,就當是復習了-->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <!--ScrollViewer左側內容模版,對它沒什么特別的操作,默認就可以-->
                <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" />

                <!--ScrollViewer右側滾動條,編輯它的樣式-->
                <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 ScrollBarStyle1}" />

            </Grid>
        </ControlTemplate>

        <!--滾動條上下滾動按鈕的基樣式表-->
        <Style x:Key="RepeatButtonBaseStyle"
               TargetType="{x:Type RepeatButton}">
            <Setter Property="OverridesDefaultStyle"
                    Value="true" />
            <Setter Property="Focusable"
                    Value="false" />
            <Setter Property="IsTabStop"
                    Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Rectangle x:Name="bg"
                                   Height="{TemplateBinding Height}"
                                   Width="{TemplateBinding Width}"
                                   Fill="{TemplateBinding Background}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!--上滾動區域和下滾動區域的基樣式表-->
        <Style x:Key="VerticalScrollBarPageButtonBaseStyle"
               TargetType="{x:Type RepeatButton}">
            <Setter Property="OverridesDefaultStyle"
                    Value="true" />
            <Setter Property="Focusable"
                    Value="false" />
            <Setter Property="IsTabStop"
                    Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Rectangle Height="{TemplateBinding Height}"
                                   Width="{TemplateBinding Width}"
                                   Fill="{TemplateBinding Background}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <!--滾動條中間滾動按鈕的樣式表-->
        <Style x:Key="ThumbStyle1"
               TargetType="{x:Type Thumb}">
            <Setter Property="Stylus.IsPressAndHoldEnabled"
                    Value="false" />
            <Setter Property="Template">

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

                        <Image x:Name="image"
                               Stretch="Fill"
                               Source="{StaticResource imgNavigationButton}" />

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDragging"
                                     Value="True">
                                <Setter Property="Source"
                                        TargetName="image"
                                        Value="{StaticResource imgNavigationButton_S}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

        </Style>


        <!--滾動條樣式表-->
        <Style x:Key="ScrollBarStyle1"
               TargetType="{x:Type ScrollBar}">
            <Setter Property="Stylus.IsPressAndHoldEnabled"
                    Value="false" />
            <Setter Property="Stylus.IsFlicksEnabled"
                    Value="false" />
            <Setter Property="Width"
                    Value="{StaticResource VerticalScrollBarWidth}" />
            <Setter Property="MinWidth"
                    Value="{StaticResource VerticalScrollBarWidth}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                        <Grid x:Name="Bg"
                              Background="{TemplateBinding Background}"
                              SnapsToDevicePixels="true">
                            <Grid.RowDefinitions>
                                <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}" />
                                <RowDefinition Height="0.00001*" />
                                <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}" />
                            </Grid.RowDefinitions>

                            <RepeatButton x:Name="rpBtnUp"
                                          Command="{x:Static ScrollBar.LineUpCommand}"
                                          Style="{StaticResource RepeatButtonBaseStyle}"
                                          Background="{StaticResource imgVerticalScrollBarUpButton}"
                                          Foreground="{x:Null}"
                                          BorderBrush="{x:Null}" />

                            <RepeatButton  Grid.Row="2"
                                           x:Name="rpBtnDown"
                                           Command="{x:Static ScrollBar.LineDownCommand}"
                                           Style="{StaticResource RepeatButtonBaseStyle}"
                                           Background="{StaticResource imgVerticalScrollBarDownButton}"
                                           Foreground="{x:Null}"
                                           BorderBrush="{x:Null}" />

                            <Border Grid.Row="1"
                                    x:Name="bdBackground"
                                    Visibility="Collapsed"
                                    Background="{StaticResource imgVerticalScrollBarBackground}">

                            </Border>
                            <Track x:Name="PART_Track"
                                   Grid.Row="1"
                                   IsDirectionReversed="true"
                                   ViewportSize="NaN"
                                   IsEnabled="{TemplateBinding IsMouseOver}">
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}"
                                                  Style="{StaticResource VerticalScrollBarPageButtonBaseStyle}"
                                                  Background="{StaticResource imgVerticalScrollBarDisabledBackground}" />
                                </Track.DecreaseRepeatButton>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}"
                                                  Style="{StaticResource VerticalScrollBarPageButtonBaseStyle}"
                                                  Background="{StaticResource imgVerticalScrollBarBackground}" />
                                </Track.IncreaseRepeatButton>
                                <Track.Thumb>
                                    <Thumb Style="{StaticResource ThumbStyle1}"
                                           Height="64"
                                           Margin="-2,-14,-1,-14" />
                                </Track.Thumb>
                            </Track>


                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled"
                                     Value="false">
                                <Setter Property="Background"
                                        TargetName="rpBtnUp"
                                        Value="{StaticResource imgVerticalScrollBarDisabledUpButton}" />
                                <Setter Property="Visibility"
                                        TargetName="PART_Track"
                                        Value="Collapsed" />
                                <Setter Property="Visibility"
                                        TargetName="bdBackground"
                                        Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

        </Style>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <ScrollViewer Template="{DynamicResource ScrollViewerControlTemplate1}">
            <TextBlock TextWrapping="Wrap"><Run Text="-------------------------------------------------------------------------------- ScrollViewer 可使內容顯示在比其實際大小小的區域中。當 ScrollViewer 的內容不是全部可見時，ScrollViewer 會顯示滾動條，用戶可利用這些滾動條來移動可見的內容區域。包括 ScrollViewer 的所有內容的區域稱為范圍。內容的可見區域稱為視區。 物理滾動用於按預設的物理增量（通常按以像素為單位聲明的值）滾動內容。邏輯滾動用於滾動到邏輯樹中的下一項。如果您需要物理滾動，而不是邏輯滾動，請將宿主 Panel 元素包裝在一個 ScrollViewer 中，並將其 CanContentScroll 屬性設置為 false。物理滾動是大多數 Panel 元素的默認滾動行為。 如果 ScrollViewer 包含大量項目，則滾動性能可能會受影響。在這種情況下，可將 IsDeferredScrollingEnabled 設置為 true。這樣可使內容視圖在拖動 Thumb 時保持靜態，並且僅當釋放 Thumb 時才更新。 因為 ScrollViewer 元素的滾動欄是按元素的默認樣式進行定義的，所以如果您將自定義樣式應用到 ScrollViewer，那么滾動欄將不再顯示。滾動欄必須按自定義樣式進行定義才能夠顯示。 自定義 ScrollViewer 控件 若要對多個 ScrollViewer 控件應用相同的屬性設置，請使用 Style 屬性。您可以修改默認的 ControlTemplate，以便為控件提供一個獨特的外觀。有關創建 ControlTemplate 的更多信息，請參見 通過創建 ControlTemplate 自定義現有控件的外觀。若要查看特定於 ScrollViewer 的部件和狀態，請參見 ScrollViewer 樣式和模板。 可通過控件的默認樣式設置此控件的依賴項屬性。如果某一屬性按默認樣式設置，則當控件顯示在應用程序中時，該屬性的值可能會由默認值更改為其他值。默認樣式是由應用程序在運行時所使用的桌面主題決定的。有關更多信息，請參見 Default WPF Themes（默認 WPF 主題）。" /></TextBlock>
        </ScrollViewer>
    </Grid>
</Window>

 

源代碼