音量滑块自定义控件 [英] Volume Slider CustomControl

问题描述

我在过去几个小时里搜索了一个看起来像这样的自定义控件:

I searched the last hours for a custom control that looks like this:

三角音量控制

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

It's like a simple slider, but this growing size to the right side is my problem.

我不知道该怎么做.

有人有想法吗?

推荐答案

您可以定义具有三角形形状的几何图形，并将其用作 Track 的 OpacityMask代码>.Track 在左边有一个重复按钮来减少值，在右边有一个重复按钮来增加它.您只需要将左按钮的背景与拇指的背景一起绑定到滑块的背景.您还应该使拇指和中继器的模板非常简单，只显示背景颜色.

You can define a geometry that has the shape of a triangle and use that as a OpacityMask of the Track. The Track has a repeat button on the left to decrease the value and on the right to increase it. You just need to bind the background of the left button to the background of your slider along with the background of the thumb. You also should make the templates of both the thumb and the repeaters very simple to only show the background color.

这是一个示例样式:

<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)

这篇关于音量滑块自定义控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！