卷滑块CustomControl

时间:2011-12-17 19:12:12

标签: wpf wpf-controls

我在最后几个小时搜索了一个如下所示的自定义控件:http://i1-scripts.softpedia-static.com/screenshots/Volume-Slider-10188.png

这就像一个简单的滑块,但这个尺寸越来越大,这是我的问题。

我不知道该怎么做。

有人有想法吗?

问候

1 个答案:

答案 0 :(得分:4)

您可以定义具有三角形形状的几何体,并将其用作OpacityMask的{​​{1}}。 Track左侧有一个重复按钮可以减小值,右侧有一个增加它的值。您只需将左按钮的背景与滑块的背景以及拇指的背景绑定即可。您还应该使拇指和转发器的模板非常简单,只显示背景颜色。

以下是一个示例样式:

Track

(这只是一个忽视很多事情的例子,例如<Style TargetType="{x:Type Slider}"> <Setter Property="Background" Value="Gray"/> <Setter Property="Height" Value="20"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Slider}"> <ControlTemplate.Resources> <Style TargetType="{x:Type RepeatButton}"> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="IsTabStop" Value="false"/> <Setter Property="Focusable" Value="false"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type RepeatButton}"> <Border Background="{TemplateBinding Background}"/> </ControlTemplate> </Setter.Value> </Setter> </Style> <PathGeometry x:Key="Triangle"> <PathFigure StartPoint="0,1"> <LineSegment Point="1,1"/> <LineSegment Point="1,0"/> <LineSegment Point="0,1"/> </PathFigure> </PathGeometry> </ControlTemplate.Resources> <Grid> <Grid> <Grid.OpacityMask> <DrawingBrush> <DrawingBrush.Drawing> <GeometryDrawing Brush="Black" Geometry="{StaticResource Triangle}"/> </DrawingBrush.Drawing> </DrawingBrush> </Grid.OpacityMask> <Track Name="PART_Track" Value="{TemplateBinding Value}"> <Track.Thumb> <Thumb Width="10" Background="{TemplateBinding Background}"> <Thumb.Template> <ControlTemplate TargetType="{x:Type Thumb}"> <Border Background="{TemplateBinding Background}"/> </ControlTemplate> </Thumb.Template> </Thumb> </Track.Thumb> <Track.DecreaseRepeatButton> <RepeatButton Background="{TemplateBinding Background}" Command="Slider.DecreaseLarge"/> </Track.DecreaseRepeatButton> <Track.IncreaseRepeatButton> <RepeatButton Background="Transparent" Command="Slider.IncreaseLarge"/> </Track.IncreaseRepeatButton> </Track> </Grid> <Path Data="{StaticResource Triangle}" Stretch="Fill" Stroke="Black" StrokeThickness="1"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>