10.1 本打算寫完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, MouseEventArgs e)
{
((System.Windows.Media.Visual)sender).CaptureMouse();//捕獲滑鼠
this.timelinePointStart = e.GetPosition(Parent as UIElement).X;//擷取滑鼠的x座標軸
TimeLinedrag = true;//標識拖放操作開始
}
//移動滑鼠
void TimeThumb_MouseMove(object sender, MouseEventArgs e)
{
if (TimeLinedrag)
{
timelinePoinxEnd = e.GetPosition(Parent as UIElement).X;
Double delta = timelinePoinxEnd - timelinePointStart;
double left = (double)TimeThumb.GetValue(Canvas.LeftProperty);
timelinePointStart = timelinePoinxEnd;//我就是掉了這段代碼
this.TimeThumb.SetValue( Canvas.LeftProperty, left+delta);
}
}
//放開滑鼠左鍵
void TimeThumb_MouseLeftButtonUp(object sender, MouseEventArgs e)
{
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();
}
原始碼下載:/Files/wangergo/MediaPlayControlDrag.rar
