Silverlight制作scrollbar.

最近要用silverlight开发一个小程序.做了一个scrollbar.其实sl自己带了这个控件,但是如果要样式和自己的程序的风格完全一致的话也是有些难度的.索性自己就简单的做了一个.这里记录一下开发的步骤.

效果图:

功能:

  1. 适应浏览器高度.
  2. 在拖动时返回移动的百分数
  3. 可设置滚动按钮的位置

好了明确了要的功能那就正式开始吧~

要和自己程序的样式一致那就先把设计师做的设计放进来.这里我用了两个元素.一个背景条和一个拖动按钮"Bar".

Bar我单独做成了一个控件.没什么代码就是Xaml.

这里要注意一下.在Bar这里控件中我在"UserControl"节点下加入了RenderTransform.并且让光标变成手型.又给RenderTransform下的TranslateTransform起了名字"xTranslateTransform".这样就可以直接对X和Y偏移进行设置.这样子做和对Canvas.LeftProperty Canvas.TopProperty进行设置达到的效果是一样的. 如果不习惯Canvas.LeftProperty Canvas.TopProperty.那就这样来吧.

好了Bar做完了那就可以用Bar来做ScrollBar了. 这里我用的布局是Canvas.默认建立的是Gread.

制作一个高300px的背景条.起名字为"xBg".并把刚才做好的Bar放到上边.使Bar在最上方.

好了到这里界面就做好了.该去实现功能了.

  • 定义onDrag事件.传递出参数为移动的百分数.
  • 定义高度属性
  • 定义移动百分数属性
  • 在初始化时设置高度为300.移动百分数为0.
  • 在设置移动百分数属性的同时对Bar的Y位移也进行设置.
  • 在设置高度属性的同时对xBg的高度进行设置.

下来对Bar做拖动的实现. 其实也就是一个drag.只是对Y属性设置而已.

用xBar.xTranslateTransform.Y=88.就可以了.

这里在Move时触发上边定义的onDrag事件.计算移动百分数并返回.

好了一个简单的scrollbar控件制作完成. ;)

简单的看一下如何使用.

说明一下"panelTranslateTransform.Y" 是目标元素的Y位移.

代码下载:(代码里的内容比较多.我这里只是介绍了scrollbar的制作 ^_^)

http://www.brsbox.com/filebox/down/fc/5a7301255667bfae7928bbbae540e5db

ok  结束

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏天天

H5(drag,百度地图使用,requestFullscreen,H5应用缓存)

24010
来自专栏大数据钻研

能用HTML/CSS解决的问题就不要使用JS

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例...

44840
来自专栏郭霖

Android新特性介绍,ConstraintLayout完全解析

今天给大家带来2017年的第一篇文章,这里先祝大家新年好。 本篇文章的主题是ConstraintLayout。其实ConstraintLayout是Androi...

26470
来自专栏施炯的IoT开发专栏

Windows Mobile上的HTML解析器

Matjaž Prtenjak提出这个移动设备上HTML解析器、并表现在HTML Label上的最初目的,就是为了能够在界面上实时地改变一些控件上的文字内容和...

22650
来自专栏小白课代表

必备!OCR文字识别、截图、贴图、取色、翻译、检查错误...这绝不仅仅是一款OCR识别工具!

手机端的OCR文字识别工具给大家推荐过白描和白描取字,PC端以前推荐过天若OCR,当时的感觉时这是一款ABBYY FineReader不错的替代品,但是经过几个...

1.7K20
来自专栏前端侠2.0

转:为什么 $("a").click()无效

我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久。前段时间的一次发呆,冒出了新的想法,于是就动手进行了测试。

57530
来自专栏前端杂谈

性能优化之reflow和repaint

35080
来自专栏happyJared

IDEA快捷键拆解系列(十三):Window篇

  以下是关于Window导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

34610
来自专栏韦弦的偶尔分享

微信小程序textarea层级问题

写了一个页面,其中包含textarea和自定义的一个蒙版视图,发现在真机中textarea的placeholder文字和value文字都会显示在蒙版视图之上。。...

1.9K10
来自专栏十月梦想

bootsrap栅格系统

在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏

17040

扫码关注云+社区

领取腾讯云代金券