WPF slider style

Question

I'm kinda new to WPF, and I'm trying to add an style to my slider, but there are so many options that I aways get confused.

could someone make, or give me a start on how to make a slider look like this: green = passsed, gray rest of track

And I'm trying to use it for showing while playing a song, so gray = remaining, what's the easiest way to implement that while your dragging it skips to that part of the song.

I'm using NAudio, I got the trackbar sliding (by time remaining) while the song is playing by doing:

private void dispatcherTimer_Tick(object sender, EventArgs e) {
   LabelCurrentTime.Content = _musicManager.getPlayTime();
   double totalseconds = _musicManager.totalSeconds();
   double currentseconds = _musicManager.currentSeconds();
   if (totalseconds > 0 && currentseconds > 0)
      Trackbar.Value = ((((Trackbar.Width / totalseconds) * currentseconds)) / totalseconds) * 10;
}

with in xaml:

<Slider x:Name="Trackbar" Height="25" Canvas.Left="50" Canvas.Top="10" Width="408" Maximum="10"/>

Answer 1

This will not be a complete solution, but will get you started.

All controls in WPF have a ControlTemplate that defines the way that they look and act. \

The ControlTemplate of the Slider control is surprisingly (at first) complex, and there are lots of examples online.

Take a look at the MSDN example.

Answer 2

Here you go:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Border_MouseDown(object sender, MouseButtonEventArgs e)
    {
        var mainborder = sender as Border;
        double x = e.GetPosition(mainborder).X;
        double val = 1 - (mainborder.ActualWidth - x) / mainborder.ActualWidth;
        slider.Value = val * (slider.Maximum - slider.Minimum) + slider.Minimum;
    }
}

public class SliderValueConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        double val = (double)values[0];
        double min = (double)values[1];
        double max = (double)values[2];
        double sliderWidth = (double)values[3];
        return sliderWidth * (val - min) / (max - min);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

<Window x:Class="WpfTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfTest"
    Title="MainWindow" Height="650" Width="825">
<Window.Resources>
    <local:SliderValueConverter x:Key="sliderValueConverter"/>
</Window.Resources>
<StackPanel>
    <Slider Maximum="200" Minimum="100" Name="slider">
        <Slider.Template>
            <ControlTemplate TargetType="{x:Type Slider}">
                <Border Background="Silver" Height="30" MouseDown="Border_MouseDown">
                    <Border Background="Green" HorizontalAlignment="Left">
                        <Border.Width>
                            <MultiBinding Converter="{StaticResource sliderValueConverter}">
                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Value"/>
                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Minimum"/>
                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Maximum"/>
                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="ActualWidth"/>
                            </MultiBinding>
                        </Border.Width>
                    </Border>
                </Border>
            </ControlTemplate>
        </Slider.Template>
    </Slider>
</StackPanel>