Silverlight：拖动滚动条控制媒体播放

本打算写完MediaPlay控件的拖动滚动条来控制媒体播放的功能，可惜在这里卡壳了。我的拖放进度条的效果总是不理想，至到今晚上看到一段视频 --DRAG AND DROP FUNCTIONALITY IN SILVERLIGHT 1.1才发现自己只不过少写了一行代码。

　　不过Mediaplay控件我不打算再写下去了，因为微软公司在ASPNETFutures组件包里提供了asp:media组件，这个组件可以用在silverlight页面里，功能比我写的要强大，还支持换肤。

　　好了，如何通过拖动进度条来控制媒体播放呢?要用到silverlight里MediaElement的一个属性Position,它是一个timespan,设定它的值后就可以定位到你想要播放的时间点上。

　　如果找进度条和 MediaElement 的Position之间的关系呢。我们看下面的图：

　　| <-- left --> | currentPosition: x |

　　|<------------------------------------totalLength------------------------->|

　　中间滚动条的位置left和滚动槽的总长度totalLength就对应着媒体播放当前时间点Position和媒体播放完所要的总时间NaturalDuration.

　　再讲一个知识点：获取所播放的媒体的总播放时间用MediaElement的NaturalDuration属性。

　　所以我们可以用这样的公式来表示：

Position=(left/totalLength)*NaturalDuration

好了，解决了一个技术点，那么更重要的一个技术点是如何拖动滚动条呢?这涉及到三个鼠标事件：

　　MouseLeftButtonDown,MouseMove,MouseLeftButtonUp.也就是说当你用鼠标拖放一个东西的时候，首先要按下鼠标左键，然后拖放，拖放到指定的位置后就放开鼠标左键，从程序角度上讲这三个事件就先后发生了。

　　拖放的时候还要注意的一点是：为了捕获鼠标，我们要用到CaptureMouse()方法，放开鼠标左键的时候我们要释放鼠标ReleaseMouseCapture();

　　核心代码如下:

　　 // 点下鼠标左键

void TimeThumb_MouseLeftButtonDown( object sender,MouseEventArgse)

{

　

((System.Windows.Media.Visual)sender).CaptureMouse(); // 捕获鼠标

　　

this .timelinePointStart　= e.GetPosition(Parent　as UIElement).X; // 获取鼠标的x坐标轴

　　　　　　

　　

TimeLinedrag　= 　true ; // 标识拖放操作开始　

　　　　　　　　

}

// 移动鼠标

　　

void TimeThumb_MouseMove( object sender,MouseEventArgse)

　

{

　　　

if (TimeLinedrag)

　　　

{

　　　　

timelinePoinxEnd　= e.GetPosition(Parent　as UIElement).X;

　　　　

Doubledelta　= timelinePoinxEnd　- timelinePointStart;

　　　　　　　　　　　

　　　　

double left　= ( double )TimeThumb.GetValue(Canvas.LeftProperty);

　　　

timelinePointStart　= timelinePoinxEnd; // 我就是掉了这段代码

　　　　　　　　　　　

　　　　

this .TimeThumb.SetValue(Canvas.LeftProperty,left + delta);

　　　　　　　　　　　

　　　

}

　　　　

　

}

// 放开鼠标左键

　void TimeThumb_MouseLeftButtonUp( object sender,MouseEventArgse)

　　　　 {

　　

　　　　　　TimeLinedrag　= 　false ;

　　　　　　

　　　　　　this .videoWindow.Pause(); // 暂停播放

　　　　　　

　　　　　　 double left　= ( double )TimeThumb.GetValue(Canvas.LeftProperty);

　　　　　　

　　　　　　 double rate　= left / ( this .TimeSlider.Width　- this .TimeThumb.Width);　// 视频拖放到新位置在整个播放进度的比率

　　　　　　 long 　ticks　= Convert.ToInt64(rate　* 　this .videoWindow.NaturalDuration.TimeSpan.Ticks);

　　　　　　

　　　　　　 this .videoWindow.Position = new TimeSpan(ticks);

　　　　　

　　　　　　 this .videoWindow.Play();

　　　　　　

　　　　　　((System.Windows.Media.Visual)sender).ReleaseMouseCapture();

　　　　}