我在最后几个小时搜索了一个如下所示的自定义控件:http://i1-scripts.softpedia-static.com/screenshots/Volume-Slider-10188.png
这就像一个简单的滑块,但这个尺寸越来越大,这是我的问题。
我不知道该怎么做。
有人有想法吗?
问候
答案 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>
)