Slider控件，講行通俗一點(diǎn)就是我們很常見的滑塊，控件的外觀上顯示一系例刻度值，并存在一個(gè)可以被拖動(dòng)的滑塊，用戶可以通過拖動(dòng)滑塊來(lái)控制控件的值。 如下圖所示，是Windows系統(tǒng)的音量調(diào)節(jié)滑塊。

下圖所示為QQ音頻聊天設(shè)置窗口中的音量調(diào)節(jié)滑塊。

?

這樣，我們就以很直觀的方式認(rèn)識(shí)了Slider控件。

接下來(lái)看看該控件的構(gòu)成：

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

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

其中，我們看到有一個(gè)部件很重要，那就是命名為PART_Track的部件，它是一個(gè)Track控件，在前面自定義滾動(dòng)條的時(shí)候我們用到它，它由兩個(gè)RepeatButton和一個(gè)Thumb組成，RepeatButton與普通的Button沒太大區(qū)別，只不過它可以記錄單擊次數(shù)和設(shè)置響應(yīng)延遲時(shí)間罷了，這里完全只把它當(dāng)作按鈕來(lái)用。

整個(gè)Track控件就是通過改變Thumb的位置和兩RepeatButton的大小來(lái)動(dòng)態(tài)顯示該控件的外觀的。

為了顯示刻度線，一個(gè)TickBar控件是必須，這個(gè)控件很簡(jiǎn)單，它沒有模板也不需要設(shè)置樣式，只需用好幾個(gè)屬性就行了。

Maximum——最大值，與進(jìn)度條類似；

Minimum——對(duì)應(yīng)的，表示最小值；

Ticks——設(shè)置刻度線的位置，可以設(shè)置多個(gè)值，如果刻度需要不均勻顯示的情況下可以使用該屬性；

TickFrequency——刻度間隔，就是刻度線之間的間距，如果最小值是0，最大值是100，TickFrequency設(shè)置為5，那么，該刻度條將均勻地顯示20處刻度線。

注意：TickFrequency與Ticks不能同時(shí)使用，因?yàn)樗鼈円粋€(gè)是均勻分布，一個(gè)是不均勻分布，同時(shí)設(shè)置會(huì)發(fā)生沖突。

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

下面看一個(gè)Tick控件的例子，這只是演示，Tick單獨(dú)使用沒有意義。

?

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

?

好了，現(xiàn)在我們可以自定義一個(gè)Slider，這個(gè)例子是水平的，它用一個(gè)Grid來(lái)布局，共三行，最上和最下行分別放一個(gè)TickBar用于顯示刻度，中間放一個(gè)Track為主體部分。

為了能動(dòng)態(tài)顯示刻度值，我們把Slider的Value屬性綁定到TextBlock的Text屬性，這樣，只要Slider控件的值發(fā)生改變，TextBlock中就能動(dòng)態(tài)顯示，前面我們說(shuō)過了，WPF的屬性系統(tǒng)都是依賴項(xiàng)屬性，因此可以動(dòng)態(tài)關(guān)聯(lián)。

?

?

?

?

<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>

?

?

總結(jié)

以上是生活随笔為你收集整理的继续聊WPF——Slider控件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。