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控件的基础上自定义控件

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

转载于:https://www.cnblogs.com/ibillguo/archive/2008/11/21/1338462.html