之前寫過一篇文章[WPF 重寫按鈕變成音樂播放器按鈕]
(http://blog.csdn.net/lishuangquan1987/article/details/52097803)，
其實這一篇是接著那一篇寫的，這一篇重點介紹音樂播放器的滑動進度條。
本文示例下載地址
首先看看我做的效果：

具體原理就是用一個Canvas裡放一個border和一個Rectangle,設定成不同顏色，滑動條使用的是Thumb.
使用其他的拖動效果沒有使用thumb好，而且thumb拖動處理起來很方便。所以以後遇到再WPF中有控制元件需要跟隨滑鼠拖動改變位置就考慮用thumb吧。
程式碼如下：

<UserControl
 
 x:Class="WPF_Player.UCProcessBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 
 
             mc:Ignorable="d" 
             xmlns:local="clr-namespace:WPF_Player"
             d:DesignHeight="20" d:DesignWidth="205">
    <UserControl.Resources>
        <local:ValueConverter x:Key="converter"></local:ValueConverter>
    </UserControl.Resources>
    <Grid
 
 >

        <Canvas>

            <Border Height="14" Canvas.Top="4" Width="202" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Background="Gray" Opacity="0.4">

            </Border>
            <Rectangle Height="10" Canvas.Left="1" Canvas.Top="5" Width="{Binding RealValue, Mode=TwoWay}" Fill="Green" Margin="1"></Rectangle>
            <Thumb DragCompleted="Thumb_DragCompleted" DragDelta="Thumb_DragDelta"   Height="20" Panel.ZIndex="5" Width="5"  Canvas.Left="{Binding RealValue, Converter={StaticResource converter}, ConverterParameter=Button, Mode=TwoWay}" Cursor="Hand"></Thumb>
        </Canvas>
    </Grid>
</UserControl>

後臺處理的程式碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Windows.Controls.Primitives;

namespace WPF_Player
{
    /// <summary>
    /// Interaction logic for UCProcessBar.xaml
    /// </summary>
    public partial class UCProcessBar : UserControl,INotifyPropertyChanged
    {
        public UCProcessBar()
        {
            InitializeComponent();
            this.DataContext = this;
        }
        private double minValue = 0;

        public double MinValue
        {
            get { return minValue; }
            set { minValue = value; }
        }
        private double maxValue = 100;

        public double MaxValue
        {
            get { return maxValue; }
            set { maxValue = value; }
        }
        private double currentValue = 0;

        public double CurrentValue
        {
            get { return currentValue; }
            set { currentValue = value; RealValue = 200 / (MaxValue - minValue) * value; }
        }

        private double realValue;//經過轉換後的值

        public double RealValue
        {
            get { return realValue; }
            set { realValue = value; OnPropertyChanged("RealValue"); }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string name)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
        public event Action<double> PlayProcessChanged;
        private bool canMove = false;
        private double x = 0;

        private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
        {
            Thumb t = sender as Thumb;

            Canvas.SetLeft(t, Canvas.GetLeft(t) + e.HorizontalChange);
            Canvas.SetTop(t, Canvas.GetTop(t) + e.VerticalChange);
        }

        private void Thumb_DragCompleted(object sender, System.Windows.Controls.Primitives.DragCompletedEventArgs e)
        {
            if (PlayProcessChanged != null)
            {
                PlayProcessChanged(RealValue * (MaxValue - MinValue) / 200);
            }
        }
    }
    public class ValueConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            double v = (double)value;
            string para = parameter.ToString();
            switch (para)
            {
                case "Button": return v + 1;
                case "Rectangle": return v;
                default: return v;                   
            }

        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            double v = (double)value;
            switch (parameter.ToString())
            {
                case "Button": return v - 1;

                default: return v;

            }
        }
    }
}

要注意的地方
TimeSpan轉換為時分秒的格式是：與DateTime有區別

TimeSpan t=TimeSpan.FromSeconds(100);
string str=t.tostring("mm\\:ss");