註釋直接寫在程式碼裡了   不太理解意思的 可以先去看看我上一篇  <a target=_blank class="postTitle2" id="cb_post_title_url" href="http://www.cnblogs.com/lanymy/archive/2013/04/01/2993602.html">WPF ScrollViewer(滾動條)  自定義樣式表製作 圖文並茂</a>

滾動條因為要在觸控式螢幕上用  所以我設計的很寬 寬度可以自己改  把寬度變數單獨拿出來了

先上效果圖

還沒滾動

已滾動區域

滾動到底部

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

<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>