ScrollViewer自定义滚动条样式

billypon

这里有滚动条控件的结构：http://www.cnblogs.com/homezzm/archive/2010/01/25/1656041.html
这里有自动隐藏滚的代码：http://blog.csdn.net/qqamoon/article/details/7317891

billypon

我也来发一个自己做的滚动条样式吧：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

	<SolidColorBrush x:Key="NormalBrush" Color="#BDD4DE" />
	<SolidColorBrush x:Key="GlyphBrush" Color="White" />

	<Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
		<Setter Property="OverridesDefaultStyle" Value="True" />
		<Setter Property="SnapsToDevicePixels" Value="True" />
		<Setter Property="Focusable" Value="False" />
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type RepeatButton}">
					<Border Name="Border" Background="{StaticResource NormalBrush}">
						<Path HorizontalAlignment="Center"
							  VerticalAlignment="Center"
							  Fill="{StaticResource GlyphBrush}"
							  Data="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
					</Border>
					<ControlTemplate.Triggers>
						<Trigger Property="IsEnabled" Value="False">
							<Setter Property="Foreground" Value="{StaticResource GlyphBrush}" />
						</Trigger>
					</ControlTemplate.Triggers>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

	<Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
		<Setter Property="OverridesDefaultStyle" Value="True" />
		<Setter Property="SnapsToDevicePixels" Value="True" />
		<Setter Property="IsTabStop" Value="False" />
		<Setter Property="Focusable" Value="False" />
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type RepeatButton}">
					<Border Background="Transparent" />
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

	<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
		<Setter Property="OverridesDefaultStyle" Value="True" />
		<Setter Property="SnapsToDevicePixels" Value="True" />
		<Setter Property="IsTabStop" Value="False" />
		<Setter Property="Focusable" Value="False" />
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type Thumb}">
					<Border Background="{TemplateBinding Background}" />
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>

	<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
		<Grid>
			<Grid.RowDefinitions>
				<RowDefinition MaxHeight="16" />
				<RowDefinition />
				<RowDefinition MaxHeight="16" />
			</Grid.RowDefinitions>
			<RepeatButton Grid.Row="0"
						  Style="{StaticResource ScrollBarLineButton}"
						  Height="16"
						  Margin="0,1"
						  Command="ScrollBar.LineUpCommand"
						  Content="M 0 4 L 8 4 L 4 0 Z" />
			<Grid Grid.Row="1" Background="#EEF3F6">
				<Track Name="PART_Track" IsDirectionReversed="True">
					<Track.DecreaseRepeatButton>
						<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand" />
					</Track.DecreaseRepeatButton>
					<Track.Thumb>
						<Thumb Style="{StaticResource ScrollBarThumb}" Background="{StaticResource NormalBrush}" />
					</Track.Thumb>
					<Track.IncreaseRepeatButton>
						<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand" />
					</Track.IncreaseRepeatButton>
				</Track>
			</Grid>
			<RepeatButton Grid.Row="2"
						  Style="{StaticResource ScrollBarLineButton}"
						  Height="16"
						  Margin="0,1"
						  Command="ScrollBar.LineDownCommand"
						  Content="M 0 0 L 4 4 L 8 0 Z" />
		</Grid>
	</ControlTemplate>

	<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition MaxWidth="16" />
				<ColumnDefinition />
				<ColumnDefinition MaxWidth="16" />
			</Grid.ColumnDefinitions>
			<RepeatButton Grid.Column="0"
						  Style="{StaticResource ScrollBarLineButton}"
						  Width="16"
						  Margin="1,0"
						  Command="ScrollBar.LineLeftCommand"
						  Content="M 4 0 L 4 8 L 0 4 Z" />
			<Grid Grid.Column="1" Background="#EEF3F6">
				<Track Name="PART_Track" IsDirectionReversed="False">
					<Track.DecreaseRepeatButton>
						<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageLeftCommand" />
					</Track.DecreaseRepeatButton>
					<Track.Thumb>
						<Thumb Style="{StaticResource ScrollBarThumb}" Background="{StaticResource NormalBrush}" />
					</Track.Thumb>
					<Track.IncreaseRepeatButton>
						<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand" />
					</Track.IncreaseRepeatButton>
				</Track>
			</Grid>
			<RepeatButton Grid.Column="2"
						  Style="{StaticResource ScrollBarLineButton}"
						  Width="16"
						  Margin="1,0"
						  Command="ScrollBar.LineRightCommand"
						  Content="M 0 0 L 4 4 L 0 8 Z" />
		</Grid>
	</ControlTemplate>
	
	<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
		<Setter Property="OverridesDefaultStyle" Value="True" />
		<Setter Property="SnapsToDevicePixels" Value="True" />
		<Style.Triggers>
			<Trigger Property="Orientation" Value="Vertical">
				<Setter Property="Width" Value="16" />
				<Setter Property="Height" Value="Auto" />
				<Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
			</Trigger>
			<Trigger Property="Orientation" Value="Horizontal">
				<Setter Property="Width" Value="Auto" />
				<Setter Property="Height" Value="16" />
				<Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
			</Trigger>
		</Style.Triggers>
	</Style>

	<Style x:Key="ScrollViewer" TargetType="{x:Type ScrollViewer}">
		<Setter Property="OverridesDefaultStyle" Value="True" />
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ScrollViewer}">
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition />
							<ColumnDefinition Width="Auto" />
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition />
							<RowDefinition Height="Auto" />
						</Grid.RowDefinitions>
						<ScrollContentPresenter Margin="1" />
						<ScrollBar Name="PART_VerticalScrollBar"
								   Grid.Column="1"
								   Margin="0,0,1,0"
								   Value="{TemplateBinding VerticalOffset}"
								   Maximum="{TemplateBinding ScrollableHeight}"
								   ViewportSize="{TemplateBinding ViewportHeight}"
								   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
						<ScrollBar Name="PART_HorizontalScrollBar"
								   Orientation="Horizontal"
								   Grid.Row="1"
								   Grid.Column="0"
								   Margin="0,0,0,1"
								   Value="{TemplateBinding HorizontalOffset}"
								   Maximum="{TemplateBinding ScrollableWidth}"
								   ViewportSize="{TemplateBinding ViewportWidth}"
								   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</ResourceDictionary>

使用方法：引用资源后，把ScrollViewer的Style属性设置为Style="{StaticResource ScrollViewer}"