How draw line or something on a Slider?

Question

I'm going to design a Seek bar for my own player. I already using Slider.

Scenario: When user clicks on button A , in seek bar, a line will be drawn and continues until user clicks on button B . Check out the image to understand better! ;)

Image http://efreephoto.com/pictures/11182763364d5141df3d8d8.png

How can i just draw that red line on Slider?

Answer 1

I believe there are two solutions.

• Create a custom template (or base it on the existing one) to create your own slider layout. I believe you will have to extend from Slider in order to add extra dependency properties to store information for the line to draw.
• Use an adorner to overlay over the existing slider.

Hopefully this will guide you in the right direction.

Answer 2

The best way to go I think is to use a custom template.

See here for more http://msdn.microsoft.com/en-us/library/aa970773.aspx

You can download the default control templates here
http://code.msdn.microsoft.com/Project/Download/FileDownload.aspx?ProjectName=wpfsamples&DownloadId=7741

Then you should adapt the default to whatever you want. From the link above have a look at the slider.xaml file and update the following section to whatever you like.

<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="{StaticResource GlyphBrush}"
        Height="4"
        Visibility="Collapsed" />
      <Border 
        Name="TrackBackground"
        Margin="0"
        CornerRadius="2" 
        Height="4"
        Grid.Row="1"
        Background="{StaticResource LightBrush}" 
        BorderBrush="{StaticResource NormalBorderBrush}"
        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>