slider wpf 垂直_WPF自定义Slider样式踩坑记录

0x01. 概要

WPF 自带的拖动条控件是 Slider, 其默认样式为:

这种风格一般很难和实际的APP匹配, UI肯定会给一种自己的APP风格的拖动条. 最简单的莫过于修改滑块图案, 滑轨颜色等等. 如:

0x02. Slider组成

根据微软官方的文档, 一个Slider如下组成:

从上图我们可以看出, Slider的简单组成为: Track 和 TickBar, 其中Track包括:Thumb : 滑块

RepeatButton : 重复的按钮, 即滑轨. 分为两段, 增量部分和减量部分.

TickBar为刻度标尺, 可选.

0x03. 自定义Slider风格

和其他WPF控件的自定义一样, 可以在 Window 标签的 Resource 中直接定义 Style, 也可以在 Slider 标签内自定义.

首先自定义 Thumb 部分, 把 Thumb 改为一个灰色边儿的白色圆形:

其次是定义 RepeatButton, 分为IncreaseRepeatButton 和 DecreaseRepeatButton, 这里我们将两种 Button 定义为一样的颜色和形状:

接下来是组合上面的Thumb 和 RepeatButton :

Style="{StaticResource SliderDecreaseButtonStyle}"/>

Style="{StaticResource SliderIncreaseButtonStyle}"/>

Style="{StaticResource SliderThumbStyle}"

<