WPF滑块控件的自定义样式

前言

每次开发滑块控件的样式，读取样式代码都要花很长时间，有点难记，在此做个备忘录。

自定义滑块样式

首先，创建一个项目并添加一个滑块控件。

然后得到滑块的窗口样式，如下图所示。

然后弹出如下界面。我们单击确定。

单击“确定”后，一系列样式代码被添加到我们页面的“资源”中，滑块代码将被修改如下：

您可以看到，系统已经将样式—— style=“{动态资源Slider style 1}”添加到我们的滑块控件中

现在，让我们看看样式SliderStyle1和F12对定义的跟踪。

在上面的代码中，我们可以看到SliderHorizontal使用的模板是SliderHorizontal，但是当它的排列方向为“垂直”时，使用的是SliderVertical模板。

因为默认情况下滑块控件是水平布局的，所以我们首先修改SliderHorizontal模板来美化滑块。

同样，我们继续F12来跟进SliderHorizontal的定义。

SliderHorizontal模板的定义有很多，这里直接定义到关键内容——曲目。

首先，定位代码[border x : name=' trackbackground ']，其中track back地面控制滑块的背景颜色，我们修改它的背景颜色和边框颜色。

结果如下：

但是有时候我们在拖动前后需要不同的颜色，光修改背景是不够的。

在幻灯片窗口模板中找到创建重复按钮和减少重复按钮；这两种颜色分别是拖动前的叠加色和拖动后的叠加色。

按如下方式修改代码：

结果如下：

请注意，此处的高度必须给定一个值。

现在，我们已经设置了轨道，但是我们对当前滑块的颜色不满意，所以我们将再次处理滑块。

滑块模板的模板是代码——Thumb，在上面的代码中用粉色标记。

可以看到Thumb使用的是sliderthrumhorizontal fault模板，所以我们继续F12跟进sliderthrumhorizontal fault，看看它的定义。

从上面的代码可以看出，滑块的定义非常简单，布局是一个Path放在一个Grid中，只有三个事件响应。

以下是修改路径的填充颜色和描边的虚线颜色，如下所示：

结果如下：

现在，我们认为矩形滑块不好看，所以我们需要使用椭圆形滑块，所以我们将再次处理滑动滑块。

首先删除Thumb中定义的宽度和高度，因为如果不删除它们，模板中的宽度和高度将受到此限制。

删除如下：

现在让我们修改SliderThumbHorizontalDefault模板。

在模板中找到路径并修改他的数据。在此之前，他的数据是自己画的矩形。现在，我们将其更改为椭圆，并重置路径的宽度和高度，如下所示：

我们得到以下结果：

如你所见，图中的滑块是一个圆，但我们需要的是一个椭圆。

处理非常简单，只需修改“路径宽度”，我们应该将其设置为14，并获得以下结果：

当然，既然我们可以通过修改样式来设计椭圆滑块，那么我们也可以设计其他形状的滑块。例如，我们修改路径如下，以获得倾斜四边形滑块：

效果图如下：

按如下方式修改代码，并设置三角形滑块：

效果图如下：

-

以上代码设置了水平方向的滑块样式，垂直方向的滑块样式也是这样设置的，只要使用模板SliderVertical进行修改即可。

-

至此，WPF滑块的定制风格已经说明。

代码已经上传到Github。欢迎下载。

Github地址：https://github.com/kiba518/WpfSlider

-

摘要

以上是边肖介绍的WPF滑块的定制风格。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！