继续聊WPF

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

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

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

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

<Window x:Class="Sample_TickBar.Win2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Win2" Height="300" Width="550">
<Window.Resources>
<Style x:Key="StyleForRepeatButton" TargetType="{x:Type RepeatButton}">
<Style.Setters>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush
StartPoint="0.5,0"
EndPoint="0.5,1">
<GradientStop Color="LightGreen" Offset="0"/>
<GradientStop Color="Yellow" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="10"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Focusable" Value="False"/>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0"
EndPoint="0.5,1">
<GradientStop Color="LightBlue" Offset="0"/>
<GradientStop Color="SkyBlue" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="tmpThumb" TargetType="{x:Type Thumb}">
<Ellipse Name="e" Width="13" MinHeight="20" Fill="Blue"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="e" Property="Fill" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="tmp" TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto" MinHeight="25"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TickBar x:Name="top" Fill="Magenta" Grid.Row="0" HorizontalAlignment="Stretch"
Placement="Top" Height="8"
Visibility="Collapsed"/>
<Track x:Name="PART_Track" Grid.Row="1" HorizontalAlignment="Stretch">
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource StyleForRepeatButton}"
Command="Slider.IncreaseLarge"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource StyleForRepeatButton}"
Command="Slider.DecreaseLarge"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Height="20" Template="{StaticResource tmpThumb}"/>
</Track.Thumb>
</Track>
<TickBar x:Name="Bottom" Grid.Row="2" Fill="Magenta" HorizontalAlignment="Stretch"
Visibility="Collapsed" Placement="Bottom" Height="8"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="top" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter Property="Visibility" TargetName="Bottom" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="top" Property="Visibility" Value="Visible"/>
<Setter TargetName="Bottom" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Slider x:Name="SliderTest" Grid.Row="0" Margin="10,5,10,5" Maximum="100" Minimum="0" TickFrequency="1"
Template="{StaticResource tmp}"
Value="20" TickPlacement="BottomRight"/>
<TextBlock Grid.Row="1" Text="{Binding Path=Value,ElementName=SliderTest}"
FontFamily="宋体" FontSize="24" FontWeight="Bold"
Margin="150,0,150,0" HorizontalAlignment="Center"/>
</Grid>
</Window>

巴特西

继续聊WPF

最新文章

热门文章