slider(滑動條)詳細解讀及樣式
阿新 • • 發佈：2019-01-08
我們先來看看slider控制元件組成元素。
Slider控制元件組成：
用圖片自定義thumb（滑塊）：
[html] view plaincopyprint?- <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
- <Setter Property="SnapsToDevicePixels" Value="True" />
- <Setter Property="OverridesDefaultStyle" Value="True" />
- <Setter Property="Height" Value="133" />
- <Setter Property="Width" Value="211" />
- <Setter Property="Template">
- <Setter.Value>
- <ControlTemplate TargetType="{x:Type Thumb}">
- <Rectangle>
- <Rectangle.Fill>
- <ImageBrush ImageSource="Assets/thumb.png" Stretch="None"/>
- </Rectangle.Fill>
- </Rectangle>
- </ControlTemplate>
- </Setter.Value>
- </Setter>
- </Style>
RepeatButton自定義類似上述
需要知道RepeatButton分兩部分，一部分滑塊是劃過的區域，一部分是滑塊還沒滑過的區域。
相關說明：
SnapsToDevicePixels可以將此特性新增到您的根元素的true啟用呈現在 UI中的畫素對齊。對執行在大於 96每英寸點數 (dpi)的計算機，畫素的呈現最大程度地減少抗鋸齒視覺化專案在一個度量單位的實線附近。
如果設定OverridesDefaultStyle到控制元件的true，則會禁止顯示主題樣式提供的預設控制元件模板。
Template獲取或設定控制元件模板。
Rectangle繪製一個矩形形狀，該形狀可以具有筆畫和填充。
Fill獲取或設定指定形狀內部繪製方式的Brush
Stretch獲取或設定一個Stretch列舉值，該值描述形狀如何填充為它分配的空間（對於Ellipse或Rectangle，預設Stretch行為是Fill，因為它們的整個調整大小邏輯都基於Width和Height。將Ellipse或Rectangle的Stretch設定為None 可以有效地使其不呈現出來。）
System.Windows.Shapes提供對可在可擴充套件應用程式標記語言 (XAML)或程式碼中使用的基本形狀庫的訪問。同時還包括Path 類，該類可以載入路徑資料，以便通過物件模型或內聯格式描述複合幾何圖形。
TriggerWPF樣式和模板化模型允許在 Style 內部指定觸發器。從本質上講，觸發器是可以讓您在某些條件（例如某個屬性值變為 true或者某個事件發生時）得到滿足時應用更改的物件。
Track表示一個處理Thumb控制元件的定位和大小調整的控制元件基元和兩個用於設定Value的RepeatButton控制元件。
Orientation獲取或設定Slider的方向。Vertical垂直。Horizontal水平
繪圖相關：
在兩個點之間繪製一條直線。 | |
繪製一系列相互連線的直線和曲線。 直線和曲線維度通過 Data 屬性宣告，並且可以使用 Path 特定的 mini-language 或使用物件模型來指定。 | |
繪製一個多邊形，它是形成閉合形狀的一系列相互連線的直接。 | |
繪製一系列相互連線的直線。 | |
繪製一個矩形形狀，該形狀可以具有筆畫和填充。 |
Slider控制元件樣式：
<UserControl.Resources><!--筆刷-->
<LinearGradientBrush x:Key="SliderBackground" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#59ccfc"/>
<GradientStop Offset="0.5" Color="#00b3fe"/>
<GradientStop Offset="1" Color="#59ccfc"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="SliderThumb" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#FFD9D3E8"/>
<!--<GradientStop Offset="1" Color="#dfdfdf"/>-->
</LinearGradientBrush>
<LinearGradientBrush x:Key="SliderText" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#7cce45"/>
<GradientStop Offset="1" Color="#4ea017"/>
</LinearGradientBrush>
<!--Slider模板-->
<Style x:Key="Slider_RepeatButton" TargetType="RepeatButton">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Background="{StaticResource SliderBackground}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Slider_RepeatButton1" TargetType="RepeatButton">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Slider_Thumb" TargetType="Thumb">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource SliderBackground}"/>
<Border Grid.ColumnSpan="2" CornerRadius="4" Background="{StaticResource SliderThumb}" Width="15">
<!--<TextBlock Text="||" HorizontalAlignment="Center" VerticalAlignment="Center"/>-->
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Slider_CustomStyle" TargetType="Slider">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid>
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>-->
<Grid.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="1" />
</Grid.Effect>
<!--<Border HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="1,1,0,1" Background="{StaticResource SliderText}" Width="80" CornerRadius="8,0,0,8"/>-->
<!--<Border Grid.Column="2" HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="0,1,1,1" Background="{StaticResource SliderText}" Width="40" CornerRadius="0,8,8,0"/>-->
<!--<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Tag}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14"/>-->
<!--<TextBlock Grid.Column="2" Text="{Binding ElementName=PART_Track,Path=Value,StringFormat=\{0:N0\}}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" DataContext="{Binding}" />-->
<Border Grid.Column="1" BorderBrush="Gray" BorderThickness="1" CornerRadius="8,0,0,8">
<Track Grid.Column="1" Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource Slider_RepeatButton}"
Command="Slider.DecreaseLarge"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource Slider_RepeatButton1}"
Command="Slider.IncreaseLarge"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource Slider_Thumb}"/>
</Track.Thumb>
</Track>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>