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

原文: 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>      

View Code

源代碼