WPF 自定义进度条

之前写过一篇文章[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");