繼續聊WPF——Slider控制項

 

Slider控制項，講行通俗一點就是我們很常見的滑塊，控制項的外觀上顯示一系例刻度值，並存在一個可以被拖動的滑塊，使用者可以通過拖動滑塊來控制控制項的值。如所示，是Windows系統的音量大小滑塊。  

所示為QQ音頻聊天設定視窗中的音量大小滑塊。

 

 

這樣，我們就以很直觀的方式認識了Slider控制項。

接下來看看該控制項的構成：

 

然後，查看Slider類的定義，從中找出主體部分。

 

[LocalizabilityAttribute(LocalizationCategory.Ignore)][TemplatePartAttribute(Name = "PART_SelectionRange", Type = typeof(FrameworkElement))][TemplatePartAttribute(Name = "PART_Track", Type = typeof(Track))]public class Slider : RangeBase

其中，我們看到有一個組件很重要，那就是命名為PART_Track的組件，它是一個Track控制項，在前面自訂捲軸的時候我們用到它，它由兩個RepeatButton和一個Thumb組成，RepeatButton與普通的Button沒太大區別，只不過它可以記錄單擊次數和設定響應延遲時間罷了，這裡完全只把它當作按鈕來用。

整個Track控制項就是通過改變Thumb的位置和兩RepeatButton的大小來動態顯示該控制項的外觀的。

為了顯示刻度標記，一個TickBar控制項是必須，這個控制項很簡單，它沒有模板也不需要設定樣式，只需用好幾個屬性就行了。

Maximum——最大值，與進度條類似；

Minimum——對應的，表示最小值；

Ticks——設定刻度標記的位置，可以設定多個值，如果刻度需要不均勻顯示的情況下可以使用該屬性；

TickFrequency——刻度間隔，就是刻度標記之間的間距，如果最小值是0，最大值是100，TickFrequency設定為5，那麼，該刻度條將均勻地顯示20處刻度標記。

注意：TickFrequency與Ticks不能同時使用，因為它們一個是均勻分布，一個是不均勻分布，同時設定會發生衝突。

Placement——Tick在Slider控制項中的位置，如果Slider是水平的，那麼就是上或下，如果Slider控制項是垂直的，那麼就是左或右。

下面看一個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>