Silverlight专题（15） - 你自己的视频播放器之自定义MoveToPointSlider

前言：

这几天在网络上看到不少人在问如何创建一个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控件的基础上自定义控件

为下篇文章实现合理的视频播放器做了前期准备