示例：WPF中Slider控件封装的缓冲播放进度条控件

一、目的：模仿播放器播放进度条，支持缓冲任务功能

二、进度：

实现类似播放器中带缓存的播放样式（播放区域、缓冲区域、全部区域等样式）

实现设置播放中断时满足缓存够一定数量才继续播放的功能

实现设置缓存数量最大限制，即缓存够一定数量即停止缓存，减少开销

实现缓存中缓存进度的获取

二、示例（GIF）

三、实现：

1、UI部分

添加用户控件：BufferPlayControl.Xaml

设置Slider样式

   <!--Slider模板-->
        <Style x:Key="Slider_RepeatButton" TargetType="RepeatButton">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border Background="{TemplateBinding Foreground}" CornerRadius="5" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="Slider_RepeatButton1" TargetType="RepeatButton">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border Background="{TemplateBinding Background}" CornerRadius="5" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

        </Style>

        <Style x:Key="Slider_Thumb" TargetType="Thumb">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>

                            <Border Background="{DynamicResource S_AccentBrush}"/>

                            <Border Grid.ColumnSpan="2" 
                                    CornerRadius="4"  
                                    Background="{TemplateBinding Foreground}" 
                                    Width="8" Height="8" Margin="-8"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="Slider_CustomStyle" TargetType="Slider">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid>
                            <!--<Grid.Effect>
                                <DropShadowEffect BlurRadius="20" ShadowDepth="1" />
                            </Grid.Effect>-->

                            <Border Grid.Column="1"  BorderBrush="Transparent" BorderThickness="1" CornerRadius="8,0,0,8">
                                
                                <Track Grid.Column="1" Name="PART_Track">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource Slider_RepeatButton}" 
                                                      Foreground="{TemplateBinding Foreground}" 
                                                      Background="{TemplateBinding Background}"
                                                      Command="Slider.DecreaseLarge"/>
                                    </Track.DecreaseRepeatButton>

                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource Slider_RepeatButton1}" 
                                                      Foreground="{TemplateBinding Foreground}" 
                                                      Background="{TemplateBinding Background}"
                                                      Command="Slider.IncreaseLarge"/>
                                    </Track.IncreaseRepeatButton>
                                    
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource Slider_Thumb}" VerticalAlignment="Center"
                                               Foreground="{TemplateBinding Foreground}" 
                                               Background="{TemplateBinding Background}"/>
                                    </Track.Thumb>
                                </Track>
                            </Border>
                        </Grid>
                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <Style x:Key="Slider_CustomStyle1" TargetType="Slider">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid>
                            <!--<Grid.Effect>
                                <DropShadowEffect BlurRadius="20" ShadowDepth="1" />
                            </Grid.Effect>-->

                            <Border Grid.Column="1"  BorderBrush="Transparent" BorderThickness="1" CornerRadius="8,0,0,8">

                                <Track Grid.Column="1" Name="PART_Track">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource Slider_RepeatButton}" 
                                                      Foreground="{TemplateBinding Foreground}" 
                                                      Background="{TemplateBinding Background}"
                                                      Command="Slider.DecreaseLarge"/>
                                    </Track.DecreaseRepeatButton>

                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource Slider_RepeatButton1}" 
                                                      Foreground="{TemplateBinding Foreground}" 
                                                      Background="{TemplateBinding Background}"
                                                      Command="Slider.IncreaseLarge"/>
                                    </Track.IncreaseRepeatButton>

                                    <!--<Track.Thumb>
                                        <Thumb Style="{StaticResource Slider_Thumb}"
                                               Foreground="{TemplateBinding Foreground}" 
                                               Background="{TemplateBinding Background}"/>
                                    </Track.Thumb>-->
                                </Track>
                            </Border>
                        </Grid>
                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

用两个Slider叠加，一个用来播放进度，一个用来缓冲进度

   <Grid>

        <Slider Height="5" Value="{Binding ElementName=control,Path=BufferValue,Mode=TwoWay}"  
                Maximum="{Binding ElementName=control,Path=MaxValue}" 
                Minimum="{Binding ElementName=control,Path=MinValue}" 
                SmallChange="{Binding ElementName=control,Path=SmallChange}"
                Background="{DynamicResource S_GrayNotice}" 
                Foreground="Gray" 
                Style="{StaticResource Slider_CustomStyle1}" VerticalAlignment="Center"
                IsHitTestVisible="False"/>

        <Slider Height="5" Value="{Binding ElementName=control,Path=Value,Mode=TwoWay}" 
                Maximum="{Binding ElementName=control,Path=MaxValue}" 
                Minimum="{Binding ElementName=control,Path=MinValue}" 
                SmallChange="{Binding ElementName=control,Path=SmallChange}"
                Background="Transparent" 
                Foreground="{DynamicResource S_AccentBrush}" 
                Style="{StaticResource Slider_CustomStyle}" VerticalAlignment="Center"/>
    </Grid>

2、用户控件设置依赖属性

        /// <summary> 绑定最小值 </summary>
        public double MinValue
        {
            get { return (double)GetValue(MinValueProperty); }
            set { SetValue(MinValueProperty, value); }
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MinValueProperty =
            DependencyProperty.Register("MinValue", typeof(double), typeof(BufferPlayControl), new PropertyMetadata(0.0, (d, e) =>
             {
                 BufferPlayControl control = d as BufferPlayControl;

                 if (control == null) return;

                 //double config = e.NewValue as double;

             }));

        /// <summary> 绑定最大值 </summary>
        public double MaxValue
        {
            get { return (double)GetValue(MaxValueProperty); }
            set { SetValue(MaxValueProperty, value); }
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MaxValueProperty =
            DependencyProperty.Register("MaxValue", typeof(double), typeof(BufferPlayControl), new PropertyMetadata(100.0, (d, e) =>
             {
                 BufferPlayControl control = d as BufferPlayControl;

                 if (control == null) return;

                 //double config = e.NewValue as double;

             }));

        /// <summary> 绑定最小偏移量 </summary>
        public double SmallChange
        {
            get { return (double)GetValue(SmallChangeProperty); }
            set { SetValue(SmallChangeProperty, value); }
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty SmallChangeProperty =
            DependencyProperty.Register("SmallChange", typeof(double), typeof(BufferPlayControl), new PropertyMetadata(0.1, (d, e) =>
             {
                 BufferPlayControl control = d as BufferPlayControl;

                 if (control == null) return;

                 //double config = e.NewValue as double;

             }));

        /// <summary> 设置当前播放值 </summary>
        public double Value
        {
            get { return (double)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register("Value", typeof(double), typeof(BufferPlayControl), new PropertyMetadata(30.0, (d, e) =>
             {
                 BufferPlayControl control = d as BufferPlayControl;

                 if (control == null) return;

                 //double config = e.NewValue as double;

             }));


        /// <summary> 设置当前缓冲值 </summary>
        public double BufferValue
        {
            get { return (double)GetValue(BufferValueProperty); }
            set { SetValue(BufferValueProperty, value); }
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty BufferValueProperty =
            DependencyProperty.Register("BufferValue", typeof(double), typeof(BufferPlayControl), new PropertyMetadata(50.0, (d, e) =>
             {
                 BufferPlayControl control = d as BufferPlayControl;

                 if (control == null) return;

                 //double config = e.NewValue as double;

             }));

3、测试代码

测试代码UI部分：开始、暂停、继续和显示进度、缓冲进度

            <GroupBox Header="缓冲播放进度条">
                <StackPanel>
                    <wpfcontrollib:BufferPlayControl x:Name="control_bufferPlay"/>
                    <TextBlock x:Name="txt_persent"/>
                    <TextBlock Text="{Binding ElementName=control_bufferPlay,Path=Value}"/>
                    <Button Content="开始" Click="Button_Click"/>
                    <Button x:Name="btn_play" Content="暂停" Click="Button_Click_1"/>
                </StackPanel>
            </GroupBox>

测试代码后台逻辑：

点击播放代码部分

            List<IBufferPlayEntity> bufferPlays = new List<IBufferPlayEntity>();

            //  Message：构造1000个测试数据
            for (int i = 0; i < 1000; i++)
            {
                BufferPlayEntity entity = new BufferPlayEntity();

                bufferPlays.Add(entity);
            }

            //  Message：初始化控件
            this.control_bufferPlay.MinValue = 0;
            this.control_bufferPlay.Value = 0;
            this.control_bufferPlay.BufferValue = 0;
            this.control_bufferPlay.MaxValue = bufferPlays.Count;

            //  Message：开始缓冲引擎
            BufferPlayEngine bufferPlayEngine = new BufferPlayEngine(bufferPlays);

            bufferPlayEngine.RefreshCapacity(5);

            bufferPlayEngine.Start();

            Action<bool, int, int> action = (l, k, n) =>
              {
                  Application.Current.Dispatcher.Invoke(() =>
                  {
                      if (l)
                      {
                          this.txt_persent.Text = "缓冲完成..";
                      }
                      else
                      {
                          string p = (Convert.ToDouble(k) * 100 / Convert.ToDouble(n)).ToString();

                          this.txt_persent.Text = "缓冲中.." + p + "%";
                      }
                  });

              };

            //  Message：刷新播放进度
            Task.Run(() =>
            {
                for (int i = 0; i < bufferPlays.Count; i++)
                {
                    //  Message：设置当前播放进度值
                    Application.Current.Dispatcher.Invoke(() =>
                    {
                        this.control_bufferPlay.Value = i;
                    });

                    //  Message：检查当前是否已经暂停
                    while (true)
                    {

                        bool result = false;

                        Application.Current.Dispatcher.Invoke(() =>
                        {
                            result = this.btn_play.Content.ToString() == "暂停";
                        });

                        if (result) break;

                        Thread.Sleep(1000);
                    }

                    Thread.Sleep(100);

                    //  Message：阻塞等待当前进度是否可以播放
                    bufferPlayEngine.GetWaitCurrent(l => l == bufferPlays[i], action);

                }

            });

            //  Message：刷新下载进度
            Task.Run(() =>
            {
                while (true)
                {
                    Thread.Sleep(100);

                    Application.Current.Dispatcher.Invoke(() =>
                    {
                        this.control_bufferPlay.BufferValue = bufferPlayEngine.GetBufferSize((int)this.control_bufferPlay.Value);
                    });

                }
            });

点击暂停或继续代码部分：

            Button button = sender as Button;

            button.Content = button.Content.ToString() == "暂停" ? "继续" : "暂停";

测试任务实体：继承任务抽象类基类或接口，实现一个随机等待1-2秒完成的方法

    public class BufferPlayEntity : BufferPlayEntityBase
    {
        public int IsLoaded { get; set; }

        Random random = new Random();

        public override void DoStart()
        {
            Thread.Sleep(random.Next(1, 2) * 1000);
        }
    }

4、核心缓冲引擎：

BufferPlayEngine：

设置可播放容量：在播放过程中，播放阻塞后需要缓冲的容量

设置播放缓冲总量：为了节省性能，当达到当前播放容量时，停止继续缓冲

设置并行任务数量：多线程执行任务的并行数量

原理：

Start（）方法：后台创建多个缓冲线程去根据当前播放的任务去执行缓冲任务，获取第一个没有下载的任务，当任务超过最大缓冲容量时不执行下载

GetWaitCurrent()方法：如果当前任务已经完成则直接返回，如果当前任务未完成则需要等待可执行播放数量Capacity设置的数量都下载完成时才取消阻塞返回要执行的任务；

GetBufferSize（）方法：获取当前已经缓冲好的数量，用于更新缓冲区域进度条

    /// <summary> 缓冲播放引擎 </summary>
    public class BufferPlayEngine
    {
        /// <summary> 可播放容器量 </summary>
        public int Capacity { get; set; } = 10;

        /// <summary> 总缓冲容器量 </summary>
        public int CapacityTotal { get; set; } = 10;

        /// <summary> 同时下载的任务数量 </summary>
        public int TaskCount { get; set; } = 5;

        //  Message：所有的文件列表
        List<IBufferPlayEntity> _entitys = new List<IBufferPlayEntity>();

        //  Message：当前播放的节点
        IBufferPlayEntity _current;

        public BufferPlayEngine(List<IBufferPlayEntity> entitys)
        {
            _entitys = entitys;

            _current = entitys.First();
        }

        /// <summary> 刷新缓冲数量 </summary>
        public void RefreshCapacity(int count)
        {
            //  Do：可播放队列设置15s
            this.Capacity = count * 5;

            ////Do：后台缓存最多队列设置成5分钟
            this.CapacityTotal = count * 2 * 10;
        }

        CancellationTokenSource cts = new CancellationTokenSource();

        Semaphore _semaphore1 = new Semaphore(1, 1);
        /// <summary> 开始播放 </summary>
        public void Start()
        {
            if (cts != null)
            {
                cts.Cancel();
                _semaphore1.WaitOne();
            }

            cts = new CancellationTokenSource();

            //  Message：启动当前位置的顺序下载任务
            Task.Run(() =>
            {
                //  Message：并行运行
                ParallelLoopResult result = Parallel.For(0, this.TaskCount, k =>
                {
                    while (true)
                    {

                        if (cts.IsCancellationRequested) break;

                        int index = this._entitys.FindIndex(l => l == _current);

                        var downs = _entitys.Skip(index).Take(this.CapacityTotal).Where(l => l.IsLoaded == 0);

                        //  Message：超出最大下载缓存数量则等待
                        if (downs == null || downs.Count() == 0)
                        {
                            Thread.Sleep(1000);
                            continue;
                        }

                        downs.FirstOrDefault()?.Start();

                    }
                }
                );

                _semaphore1.Release();

            }, cts.Token);
        }

        /// <summary> 停止引擎 </summary>
        public void Stop()
        {
            if (cts != null)
            {
                cts.Cancel();
            }

            flag = false;
        }

        bool flag = true;


        Semaphore _semaphore = new Semaphore(1, 1);

        /// <summary> 获取下好的文件 返回null则需要等待 </summary>
        public IBufferPlayEntity GetWaitCurrent(Predicate<IBufferPlayEntity> match, Action<bool, int, int> action)
        {
            var result = this._entitys.Find(match);

            int now = this._entitys.FindIndex(match);

            _current = result;

            if (result.IsLoaded == 2)
            {
                return result;
            }
            else
            {
                //  Message：停止上一个获取任务
                flag = false;

                _semaphore.WaitOne();

                flag = true;

                var waitCache = _entitys.Skip(now).Take(this.Capacity).ToList();

                while (!waitCache.TrueForAll(l => l.IsLoaded == 2))
                {
                    if (!flag)
                    {
                        _semaphore.Release();
                        return null;
                    }

                    Thread.Sleep(500);

                    action(false, waitCache.FindAll(l => l.IsLoaded == 2).Count, waitCache.Count);
                }

                action(true, waitCache.FindAll(l => l.IsLoaded == 2).Count, waitCache.Count);

                _semaphore.Release();
                return result;
            }
        }

        /// <summary> 获取下好的文件 返回null则需要等待 </summary>
        public IBufferPlayEntity GetWaitCurrent(int index, Action<bool, int, int> action)
        {
            var result = this._entitys[index];

            return this.GetWaitCurrent(l => l == result, action);
        }

        /// <summary> 获取当前缓存完的位置 </summary>
        public int GetBufferSize(Predicate<IBufferPlayEntity> match)
        {
            int index = this._entitys.FindIndex(l => l == _current);

            return this.GetBufferSize(index);
        }

        /// <summary> 获取当前缓存完的位置 </summary>
        public int GetBufferSize(int index)
        {
            var isdown = _entitys.Skip(index).LastOrDefault(l => l.IsLoaded == 2);

            if (isdown == null) return 0;

            return this._entitys.FindIndex(l => l == isdown);
        }

        /// <summary> 清理缓存数据 </summary>
        public void Clear()
        {

        }

        //  Message：是否是向前播放
        bool _isForward = true;

        /// <summary> 反向播放 </summary>
        public void RefreshPlayMode(bool forward)
        {
            if (_isForward = forward) return;

            _isForward = forward;

            _entitys.Reverse();
        }
    }

缓冲引擎任务执行接口和抽象基类

IBufferPlayEntity：

    /// <summary> 缓冲任务接口 </summary>
    public interface IBufferPlayEntity
    {
        /// <summary> 是否执行完成 </summary>
        int IsLoaded
        {
            get;
            set;
        }

        /// <summary> 开始任务 </summary>
        void Start();
    }

BufferPlayEntityBase： 

    /// <summary> 缓冲任务抽象基类 </summary>
    public abstract class BufferPlayEntityBase : IBufferPlayEntity
    {
        /// <summary> 执行状态 1=正在执行 2=执行完成  0=未执行 -1=执行错误 </summary>
        public int IsLoaded { get; set; }

        public void Start()
        {
            this.IsLoaded = 1;

            try
            {
                this.DoStart();
            }
            catch (Exception ex)
            {

                Debug.WriteLine(ex);

                this.IsLoaded = -1;
            }

            this.IsLoaded = 2;
        }

        public abstract void DoStart();
    }

GitHub: