註釋直接寫在代碼裏了 不太理解意思的 能夠先去看看我上一篇 WPF ScrollViewer(滾動條) 自定義樣式表製做 圖文並茂html
滾動條由於要在觸摸屏上用 因此我設計的很寬 寬度能夠本身改 把寬度變量單獨拿出來了app
先上效果圖ide
還沒滾動性能
已滾動區域url
滾動到底部spa
內容夠顯示,不須要滾動條的時候.net
<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>
源代碼設計