原文:示例：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: