继续聊WPF——自定义滚动条

• <Window x:Class="WpfApplication1.Window1"
• xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
• xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
• Title="Window1" Height="300" Width="300">
• <Window.Resources>
• <ControlTemplate x:Key="myThumb" TargetType="{x:Type Thumb}">
• <Border Name="bd" BorderThickness="0.8" CornerRadius="2"
• Height="{TemplateBinding Height}"
• Width="{TemplateBinding Width}"
• Margin="0,1,0,1">
• <Border.Background>
• <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
• <GradientStop Color="#112299" Offset="0"/>
• <GradientStop Color="#3522AA" Offset="1"/>
• </LinearGradientBrush>
• </Border.Background>
• </Border>
• <ControlTemplate.Triggers>
• <Trigger Property="IsMouseOver" Value="True">
• <Trigger.Setters>
• <Setter TargetName="bd" Property="BorderBrush" Value="#66BBEE"/>
• </Trigger.Setters>
• </Trigger>
• </ControlTemplate.Triggers>
• </ControlTemplate>
• <ControlTemplate x:Key="myRepBt" TargetType="{x:Type RepeatButton}">
• <Border Margin="0,2,0,2"
• BorderThickness="0.7"
• BorderBrush="#BBBBBB">
• <Border.Background>
• <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
• <GradientStop Color="White" Offset="0"/>
• <GradientStop Color="LightGray" Offset="1"/>
• </LinearGradientBrush>
• </Border.Background>
• </Border>
• </ControlTemplate>
• <ControlTemplate x:Key="rbtForScrollBar" TargetType="{x:Type RepeatButton}">
• <Border CornerRadius="2"
• Margin="0,1,0,1">
• <Border.Background>
• <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
• <GradientStop Color="Yellow" Offset="0"/>
• <GradientStop Color="Orange" Offset="1"/>
• </LinearGradientBrush>
• </Border.Background>
• <Path VerticalAlignment="Center" HorizontalAlignment="Center"
• Data="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}"
• Fill="Black"/>
• </Border>
• </ControlTemplate>
• <ControlTemplate x:Key="ScrollTmp" TargetType="{x:Type ScrollBar}">
• <Grid>
• <Grid.ColumnDefinitions>
• <ColumnDefinition MaxWidth="20"/>
• <ColumnDefinition Width="*"/>
• <ColumnDefinition MaxWidth="20"/>
• </Grid.ColumnDefinitions>
• <Border Grid.ColumnSpan="3" />
• <RepeatButton Template="{StaticResource rbtForScrollBar}" Grid.Column="0"
• Margin="0,1,0,1"
• Command="ScrollBar.LineLeftCommand"
• Content="M0,4 L4,8 L4,0 Z"/>
• <Track Grid.Column="1" Name="PART_Track"
• Maximum="{TemplateBinding Maximum}"
• Minimum="{TemplateBinding Minimum}"
• Value="{TemplateBinding Value}">
• <Track.DecreaseRepeatButton>
• <RepeatButton Template="{StaticResource myRepBt}"
• Command="ScrollBar.PageLeftCommand"/>
• </Track.DecreaseRepeatButton>
• <Track.IncreaseRepeatButton>
• <RepeatButton Template="{StaticResource myRepBt}"
• Command="ScrollBar.PageRightCommand"/>
• </Track.IncreaseRepeatButton>
• <Track.Thumb>
• <Thumb Width="auto" Template="{StaticResource myThumb}"/>
• </Track.Thumb>
• </Track>
• <RepeatButton Template="{StaticResource rbtForScrollBar}" Grid.Column="3"
• Margin="0,1,0,1"
• Command="ScrollBar.LineRightCommand"
• Content="M0,0 L0,8 4,4 Z"/>
• </Grid>
• </ControlTemplate>
• </Window.Resources>
• <Canvas Margin="10,10,10,10">
• <ScrollBar Canvas.Left="5" Canvas.Top="5" Width="260" Height="28"
• Template="{StaticResource ScrollTmp}"
• Orientation="Horizontal" Maximum="5" Minimum="0"/>
• </Canvas>
• </Window>