Volume Slider CustomControl

Question

i searched the last hours for a customcontrol that looks like this: http://i1-scripts.softpedia-static.com/screenshots/Volume-Slider-10188.png

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

I don't know how to do this.

Have anyone an idea?

greetings

Answer 1

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.

Here is an example style:

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

(This is just an example which disregards a lot of things like e.g. the Orientation)