继续聊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>