继续聊WPF

下面看一个Tick控件的例子，这只是演示，Tick单独使用没有意义。

1. <TickBar Height="15" Width="180" Ticks="10,35,50,70" Maximum="100"  
2.          Minimum="0" Fill="DarkMagenta" Placement="Top" />  

好了，现在我们可以自定义一个Slider，这个例子是水平的，它用一个Grid来布局，共三行，最上和最下行分别放一个TickBar用于显示刻度，中间放一个Track为主体部分。

为了能动态显示刻度值，我们把Slider的Value属性绑定到TextBlock的Text属性，这样，只要Slider控件的值发生改变，TextBlock中就能动态显示，前面我们说过了，WPF的属性系统都是依赖项属性，因此可以动态关联。

1. <Window x:Class="Sample_TickBar.Win2"  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.     Title="Win2" Height="300" Width="550">  
5.     <Window.Resources>  
6.         <Style x:Key="StyleForRepeatButton" TargetType="{x:Type RepeatButton}">  
7.             <Style.Setters>  
8.                 <Setter Property="Background">  
9.                     <Setter.Value>  
10.                         <LinearGradientBrush  
11.                             StartPoint="0.5,0"  
12.                             EndPoint="0.5,1">  
13.                             <GradientStop Color="LightGreen" Offset="0"/>  
14.                             <GradientStop Color="Yellow" Offset="1"/>  
15.                         </LinearGradientBrush>  
16.                     </Setter.Value>  
17.                 </Setter>  
18.                 <Setter Property="Height" Value="10"/>  
19.                 <Setter Property="BorderBrush" Value="Transparent"/>  
20.                 <Setter Property="Focusable" Value="False"/>  
21.             </Style.Setters>  
22.             <Style.Triggers>  
23.                 <Trigger Property="IsPressed" Value="True">  
24.                     <Setter Property="Background">  
25.                         <Setter.Value>  
26.                             <LinearGradientBrush StartPoint="0.5,0"  
27.                                                  EndPoint="0.5,1">  
28.                                 <GradientStop Color="LightBlue" Offset="0"/>  
29.                                 <GradientStop Color="SkyBlue" Offset="1"/>  
30.                             </LinearGradientBrush>  
31.                         </Setter.Value>  
32.                     </Setter>  
33.                 </Trigger>  
34.             </Style.Triggers>  
35.         </Style>  
36.         <ControlTemplate x:Key="tmpThumb" TargetType="{x:Type Thumb}">  
37.             <Ellipse Name="e" Width="13" MinHeight="20" Fill="Blue"/>  
38.             <ControlTemplate.Triggers>  
39.                 <Trigger Property="IsMouseOver" Value="True">  
40.                     <Setter TargetName="e" Property="Fill" Value="Red"/>  
41.                 </Trigger>  
42.             </ControlTemplate.Triggers>  
43.         </ControlTemplate>  
44.         <ControlTemplate x:Key="tmp" TargetType="{x:Type Slider}">  
45.             <Grid>  
46.                 <Grid.RowDefinitions>  
47.                     <RowDefinition Height="auto"/>  
48.                     <RowDefinition Height="auto" MinHeight="25"/>  
49.                     <RowDefinition Height="auto"/>  
50.                 </Grid.RowDefinitions>  
51.                 <TickBar x:Name="top" Fill="Magenta" Grid.Row="0" HorizontalAlignment="Stretch"  
52.                          Placement="Top" Height="8"  
53.                          Visibility="Collapsed"/>  
54.                 <Track x:Name="PART_Track" Grid.Row="1" HorizontalAlignment="Stretch">  
55.                     <Track.IncreaseRepeatButton>  
56.                         <RepeatButton Style="{StaticResource StyleForRepeatButton}"  
57.                                       Command="Slider.IncreaseLarge"/>  
58.                     </Track.IncreaseRepeatButton>  
59.                     <Track.DecreaseRepeatButton>  
60.                         <RepeatButton Style="{StaticResource StyleForRepeatButton}"  
61.                                       Command="Slider.DecreaseLarge"/>  
62.                     </Track.DecreaseRepeatButton>  
63.                     <Track.Thumb>  
64.                         <Thumb Height="20" Template="{StaticResource tmpThumb}"/>  
65.                     </Track.Thumb>  
66.                 </Track>  
67.                 <TickBar x:Name="Bottom" Grid.Row="2" Fill="Magenta" HorizontalAlignment="Stretch"  
68.                          Visibility="Collapsed" Placement="Bottom" Height="8"/>  
69.             </Grid>  
70.             <ControlTemplate.Triggers>  
71.                 <Trigger Property="TickPlacement" Value="TopLeft">  
72.                     <Setter TargetName="top" Property="Visibility" Value="Visible"/>  
73.                 </Trigger>  
74.                 <Trigger Property="TickPlacement" Value="BottomRight">  
75.                     <Setter Property="Visibility" TargetName="Bottom" Value="Visible"/>  
76.                 </Trigger>  
77.                 <Trigger Property="TickPlacement" Value="Both">  
78.                     <Setter TargetName="top" Property="Visibility" Value="Visible"/>  
79.                     <Setter TargetName="Bottom" Property="Visibility" Value="Visible"/>  
80.                 </Trigger>  
81.             </ControlTemplate.Triggers>  
82.         </ControlTemplate>  
83.     </Window.Resources>  
84.     <Grid>  
85.         <Grid.RowDefinitions>  
86.             <RowDefinition Height="50"/>  
87.             <RowDefinition Height="auto"/>  
88.         </Grid.RowDefinitions>  
89.         <Slider x:Name="SliderTest" Grid.Row="0"  Margin="10,5,10,5" Maximum="100" Minimum="0" TickFrequency="1"  
90.                 Template="{StaticResource tmp}"  
91.                 Value="20" TickPlacement="BottomRight"/>  
92.         <TextBlock Grid.Row="1" Text="{Binding Path=Value,ElementName=SliderTest}"  
93.                    FontFamily="宋体" FontSize="24" FontWeight="Bold"  
94.                    Margin="150,0,150,0" HorizontalAlignment="Center"/>  
95.     </Grid>  
96. </Window>