slider(滑动条)详细解读及样式

我们先来看看slider控件组成元素。

Slider控件组成：

用图片自定义thumb（滑块）：

[html] view plain copy print ?

<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)的计算机，像素的呈现最大程度地减少抗锯齿可视化项目在一个度量单位的实线附近。

扫描二维码关注公众号，回复： 2193044 查看本文章

如果设置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水平

绘图相关：

Ellipse	绘制一个椭圆。
Line	在两个点之间绘制一条直线。
Path	绘制一系列相互连接的直线和曲线。直线和曲线维度通过 Data 属性声明，并且可以使用 Path 特定的 mini-language 或使用对象模型来指定。
Polygon	绘制一个多边形，它是形成闭合形状的一系列相互连接的直接。
Polyline	绘制一系列相互连接的直线。
Rectangle	绘制一个矩形形状，该形状可以具有笔画和填充。
Shape	为 Ellipse、Polygon 和Rectangle 之类的形状元素提供基类。

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"/>
            
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="SliderText" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="#7cce45"/>
            <GradientStop Offset="1" Color="#4ea017"/>
        </LinearGradientBrush>

        
        <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">
                                
                            </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.Effect>
                                <DropShadowEffect BlurRadius="10" ShadowDepth="1" />
                            </Grid.Effect>
                            
                            
                            
                            
                            <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>

slider(滑动条)详细解读及样式

猜你喜欢