音量滑块自定义控件

Question

我在最后几个小时搜索了一个看起来像这样的自定义控件：

Triangular volume control

它就像一个简单的滑块，但右侧越来越大是我的问题。

我不知道该怎么做。

有人有想法吗？

Answer 1

您可以定义一个具有三角形形状的几何图形并将其用作Track 的OpacityMask。 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>

（这只是一个忽略很多东西的例子，例如Orientation）