silverlight播放器:Silverlight专题(15) - 你自己的视频播放器的自定义MoveToPointSlider

on 2009-1-23 in Flash教程 | 0 Comment
　　本文举例源代码或素材下载

　　前言:

　　这几天在网络上看到不少人在问如何创建个Video Player(Silverlight版本)

　　而我在微软和这方面打了不少交道

　　所以计划用两篇文章解答下大家问题

　　本篇文章先介绍下如何创建个自定义滚动条

　　下篇文章创建完整个Video Player

　　问题:

　　大家可能要问你为什么要自定义滚动条(Slider)呢？

　　微软SliverlightControl控件中不是已经默认有个Slider了吗？

　　如下所示:我们使用微软默认SliderControl控件如下

　　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可以帮你忙(我取名为MoveToPoSlider)

　　原理图如下:

　　Silverlight专题(15) - 你自己<img src='/icons/15334de.gif' />视频播放器的自定义MoveToPo<img src='/icons/15334int.gif' />Slider

　　(本图来自MSDN)

　　如图所示Slider主要由3 3部分组成左边和右边RepeatButton中间Track

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

　　其中左边RepeatButton和中间Track分别属于第12列其宽度为Auto

　　而右边RepeatButton在第3列占据了剩下空间其宽度设置为*

　　(有关Grid布局介绍请参见Silverlight专题(8)-布局介绍)

　　现在我们需要在第以及第 3列上各覆盖上个Rectangle来响应鼠标点击

　　使其能实现我们预期效果

　　具体实现步骤如下:

　　1.给添加个类如下图所示

　　Silverlight专题(15) - 你自己<img src='/icons/15334de.gif' />视频播放器的自定义MoveToPo<img src='/icons/15334int.gif' />Slider

　　2.让这个类继承Slider类

　　Silverlight专题(15) - 你自己<img src='/icons/15334de.gif' />视频播放器的自定义MoveToPo<img src='/icons/15334int.gif' />Slider

　　3.实现功能如下

　　MoveToPoSlider

1public MoveToPoSlider : Slider
2{
3　　 private Thumb m_horizontalThumb;
4　　 private FrameworkElement m_leftTrack;
5　　 private FrameworkElement m_rightTrack;
6　
7　　 publicoverridevoid _disibledevent="http://tech.ddvip.com/2009-01/1231835350105734.html">Silverlight专题(15) - 你自己视频播放器的自定义MoveToPoSlider



Tags:  silverlight.2.0 silverlight是什么 silverlight silverlight播放器

延伸阅读

最新评论

发表评论