Создайте ползунок с другим цветом фона большого пальца до/после

Я сейчас работаю над медиаплеером. Я хотел бы создать слайдер, как на этом снимке экрана:

slider

То, что у меня есть до сих пор, это:

current_slider

В настоящее время я борюсь со световой полосой перед большим пальцем. Он меняет свою длину в зависимости от положения большого пальца. Как я могу реализовать это в WPF? Или я должен попробовать использовать индикатор выполнения?

Атм, у меня есть этот код:

   <LinearGradientBrush x:Key="SliderThumbGradient" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Offset="0" Color="#f7f7f7"/>
    <GradientStop Offset="1" Color="#bcbcbc"/>
</LinearGradientBrush>

<Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <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="Transparent" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Height" Value="14"/>
    <Setter Property="Width" Value="14"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Ellipse 
      Name="Ellipse" 
      Fill="{DynamicResource SliderThumbGradient}"
      Stroke="#404040"
      StrokeThickness="1" />
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Ellipse" Property="Fill" Value="#808080"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="Ellipse" Property="Fill" Value="#EEEEEE"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TickBar 
  Name="TopTick"
  SnapsToDevicePixels="True" 
  Placement="Top"
  Fill="#404040"
  Height="4"
  Visibility="Collapsed" />
        <Border 
  Name="TrackBackground"
  Margin="0"
  CornerRadius="6" 
  Height="12"
  Grid.Row="1"
  Background="#0a0a0a" 
  BorderBrush="#121212"
  BorderThickness="1" />
        <Track Grid.Row="1" Name="PART_Track">
            <Track.DecreaseRepeatButton>
                <RepeatButton 
      Style="{StaticResource SliderButtonStyle}"
      Command="Slider.DecreaseLarge" />
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb Style="{StaticResource SliderThumbStyle}" />
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton 
      Style="{StaticResource SliderButtonStyle}"
      Command="Slider.IncreaseLarge" />
            </Track.IncreaseRepeatButton>
        </Track>
        <TickBar 
  Name="BottomTick"
  SnapsToDevicePixels="True" 
  Grid.Row="2"
  Fill="{TemplateBinding Foreground}"
  Placement="Bottom"
  Height="4"
  Visibility="Collapsed" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="TickPlacement" Value="TopLeft">
            <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
        </Trigger>
        <Trigger Property="TickPlacement" Value="BottomRight">
            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
        </Trigger>
        <Trigger Property="TickPlacement" Value="Both">
            <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TickBar 
  Name="TopTick"
  SnapsToDevicePixels="True" 
  Placement="Left"
  Fill="#404040"
  Width="4"
  Visibility="Collapsed" />
        <Border 
  Name="TrackBackground"
  Margin="0"
  CornerRadius="2" 
  Width="4"
  Grid.Column="1"
  Background="#E0E0E0" 
  BorderBrush="#404040"
  BorderThickness="1" />
        <Track Grid.Column="1" Name="PART_Track">
            <Track.DecreaseRepeatButton>
                <RepeatButton 
      Style="{StaticResource SliderButtonStyle}"
      Command="Slider.DecreaseLarge" />
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb Style="{StaticResource SliderThumbStyle}" />
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton 
      Style="{StaticResource SliderButtonStyle}"
      Command="Slider.IncreaseLarge" />
            </Track.IncreaseRepeatButton>
        </Track>
        <TickBar 
  Name="BottomTick"
  SnapsToDevicePixels="True" 
  Grid.Column="2"
  Fill="{TemplateBinding Foreground}"
  Placement="Right"
  Width="4"
  Visibility="Collapsed" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="TickPlacement" Value="TopLeft">
            <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
        </Trigger>
        <Trigger Property="TickPlacement" Value="BottomRight">
            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
        </Trigger>
        <Trigger Property="TickPlacement" Value="Both">
            <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
            <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<Style TargetType="{x:Type Slider}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Style.Triggers>
        <Trigger Property="Orientation" Value="Horizontal">
            <Setter Property="MinWidth" Value="104" />
            <Setter Property="MinHeight" Value="21" />
            <Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
        </Trigger>
        <Trigger Property="Orientation" Value="Vertical">
            <Setter Property="MinWidth" Value="21" />
            <Setter Property="MinHeight" Value="104" />
            <Setter Property="Template" Value="{StaticResource VerticalSlider}" />
        </Trigger>
    </Style.Triggers>
</Style>

slider styling wpf xaml
person Daniel Gilbert    schedule 01.09.2012    source источник

Ответы (1)


arrow_upward
12
arrow_downward

Объект, который меняет свою длину с левой стороны, — это Уменьшить кнопку повтора. Вы можете реализовать другой цвет, создав для него стиль. Не знаю, как сделать вогнутый край справа.

i.e.

<Style x:Key="DecreaseSliderButtonStyle" TargetType="{x:Type RepeatButton}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <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 Height="12" Background="DimGray" CornerRadius="6" Margin="0,0,-12,0" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

и в вашем ControlTemplate:

<Track.DecreaseRepeatButton>
    <RepeatButton 
        Style="{StaticResource DecreaseSliderButtonStyle}"
        Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
person Mark Hall    schedule 02.09.2012
comment
Относительно Edge: я применил отрицательное правое поле к RepeatButton. Работает как шарм. :) - person Daniel Gilbert; 02.09.2012