अंगूठे पृष्ठभूमि रंग से पहले/बाद में स्लाइडर बनाएं

Question

मैं वर्तमान में मीडिया प्लेयर पर काम कर रहा हूं। मैं इस स्क्रीन शॉट पर एक की तरह एक स्लाइडर बनाने के लिए करना चाहते हैं:

मैं क्या मिल गया है अब यह एक है करने के लिए:

मैं वर्तमान में कर रहा हूँ अंगूठे से पहले प्रकाश पट्टी के साथ struggeling। यह अंगूठे की स्थिति के अनुसार इसकी लंबाई बदलता है। मैं इसे 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> 

Answer 1

उद्देश्य यह है कि बाईं ओर इसकी लंबाई से बदल रहा है DecreaseRepeatButton है:

एटीएम, मैं इस कोड है। आप इसके लिए शैली बनाकर अलग-अलग रंग को कार्यान्वित कर सकते हैं। हालांकि दाईं ओर अवतल किनारे को कैसे प्राप्त करें, यह सुनिश्चित नहीं है।

अर्थात

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