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