Регулятор громкости CustomControl - PullRequest
Новая
       14

Регулятор громкости CustomControl

1 голос
/ 17 декабря 2011

В последние часы я искал пользовательский элемент управления, который выглядит следующим образом: http://i1 -scripts.softpedia-static.com / screenshots / Volume-Slider-10188.png

Это похоже на простой слайдер, но этот растущий размер с правой стороны - моя проблема.

Я не знаю, как это сделать.

У кого-нибудь есть идеи?

привет

1 Ответ

4 голосов
/ 18 декабря 2011

Вы можете определить геометрию, которая имеет форму треугольника, и использовать ее как OpacityMask из 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>

(Это простопример, который игнорирует многие вещи, такие как, например, Orientation)

...