前言：

這幾天在網絡上看到不少人在問如何創建一個Video Player（Silverlight版本）

而我在微軟和這方面打了不少交道

所以計劃用兩篇文章解答下大家的問題

本篇文章先介紹下如何創建一個自定義的滾動條

下篇文章創建完整的一個Video Player

問題：

大家可能要問，你為什么要自定義滾動條（Slider）呢？

微軟的Sliverlight控件中不是已經默認的有個Slider了嗎？

如下所示：我們使用微軟默認的Slider控件如下

Default Slider
1?<Grid x:Name="LayoutRoot" Background="#808080">?
2???? <Slider Width="400" Maximum="100" Minimum="0" LargeChange="10" SmallChange="1"/>?
3?</Grid>

展示程序如下（大家可以試試）

大家是不是發現點什么啦？

對了，就是Slider并不是按照你點擊哪里，他就滾到哪里的方式工作的

而是以上面設置的LargeChange的幅度（也就是每點一次，只移動10*400/100）工作

解決方案：

難道我們沒有辦法了嗎？

自定義一個Slider可以幫你忙（我取名為MoveToPointSlider）

原理圖如下：

??????????????? （本圖來自MSDN）

如圖所示，Slider主要由3三部分組成，左邊和右邊的RepeatButton，中間的Track

也就是整個Slider共分成了3列

其中左邊的RepeatButton和中間的Track分別屬于第1，2列，其寬度為Auto

而右邊的RepeatButton在第3列，占據了剩下的空間，其寬度設置為*

（有關Grid的布局介紹請參見Silverlight專題（8）-布局介紹）

現在我們需要在第一以及第三列上各覆蓋上一個Rectangle來響應鼠標的點擊

使的其能實現我們的預期效果

具體實現步驟如下：

1.給程序添加一個類如下圖所示

2.讓這個類繼承Slider類

3.實現功能如下

MoveToPointSlider
1?public?class MoveToPointSlider : Slider
2?{
3???? private Thumb m_horizontalThumb;
4???? private FrameworkElement m_leftTrack;
5???? private FrameworkElement m_rightTrack;
6?
7???? public?override?void OnApplyTemplate()
8???? {
9???????? base.OnApplyTemplate();
10???????? base.OnApplyTemplate();
11???????? m_horizontalThumb = GetTemplateChild("HorizontalThumb") as Thumb;
12???????? m_leftTrack = GetTemplateChild("LeftTrack") as FrameworkElement;
13???????? if (m_leftTrack !=?null)
14???????????? this.m_leftTrack.MouseLeftButtonDown +=?new MouseButtonEventHandler(OnMoveThumbToMouse);
15?
16???????? m_rightTrack = GetTemplateChild("RightTrack") as FrameworkElement;
17???????? if (m_rightTrack !=?null)
18???????????? this.m_rightTrack.MouseLeftButtonDown +=?new MouseButtonEventHandler(OnMoveThumbToMouse);
19???? }
20?
21???? void OnMoveThumbToMouse(object sender, MouseButtonEventArgs e)
22???? {
23???????? Point p = e.GetPosition(this);
24???????? Value = (p.X - (m_horizontalThumb.ActualWidth /?2)) / (ActualWidth - m_horizontalThumb.ActualWidth) * Maximum;
25???? }
26?}

m_leftTrack就是上面說的第一列的Rectangle

m_rightTrack就是第三列的Rectangle

23~24行就是響應鼠標左鍵點擊使得你點Slider的哪里，Slider上的Thumb就滑到哪里

4.引用MoveToPointSlider并使用他

5.給MoveToPointSlider自定義Style，在Microsoft Expression Blend 2 SP1中操作如下

在默認的Slider Style的HorizontalTemplate的自底部添加兩個Rectangle控件

并分別命名為LeftTrack和RightTrack

（一定只能是這兩個名字，因為我們前面的MoveToPointSlider的底層代碼就是通過這兩個名字來獲取Slider中的控件的

也就是GetTemplateChild(“LeftTrack”)和GetTemplateChild(“RightTrack”)）

這樣我們就得到了我們需要的MoveToPointSlider了

實際效果展示：

實際的程序如下（部署在http://streaming.live.com/）：

代碼下載：

總結：

本篇大概介紹了下如何在Slider控件的基礎上自定義控件

為下篇文章實現合理的視頻播放器做了前期準備

轉載于:https://www.cnblogs.com/ibillguo/archive/2008/11/21/1338462.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Silverlight专题（15） - 你自己的视频播放器之自定义MoveToPointSlider的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。