注释直接写在代码里了 不太理解意思的 能够先去看看我上一篇 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>
源代码设计