Silverlight制作scrollbar.
最近要用silverlight开发一个小程序.做了一个scrollbar.其实sl自己带了这个控件,但是如果要样式和自己的程序的风格完全一致的话也是有些难度的.索性自己就简单的做了一个.这里记录一下开发的步骤.
效果图:
功能:
- 适应浏览器高度.
- 在拖动时返回移动的百分数
- 可设置滚动按钮的位置
好了明确了要的功能那就正式开始吧~
要和自己程序的样式一致那就先把设计师做的设计放进来.这里我用了两个元素.一个背景条和一个拖动按钮"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 结束
- 【图解】Web前端实现类似Excel的电子表格
- 一个简单而强大的深度学习库—PyTorch
- CSS实现水平|垂直居中漫谈
- 深度学习开源框架PaddlePaddle发布新版API,简化深度学习编程
- HTML5游戏引擎深度测评
- 使用NumPy介绍期望值,方差和协方差
- Cleaver快速制作网页PPT
- 【学术】马尔可夫链的详细介绍及其工作原理
- 想把自拍背景改成马尔代夫?手把手教你用深度学习分分钟做到
- 还记得谷歌之前发现的两颗行星吗?今天谷歌对此披露了重要技术细节
- Golang调用动态库so
- 30多条mysql数据库优化方法,千万级数据库记录查询轻松解决
- 【学术】谷歌AI课程附带的机器学习术语整理(超详细!)
- 真疯了!Java 9 还没会用,Java 10 就要来了!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java的I/O类库的基本架构一句话介绍
- 树莓派综合项目1:智能温度测量系统实验
- 一句话ListenableFuture简介
- Google Guava Cache 使用
- Linux下安装maven3.6.2遇到的问题
- Unity3D网络通讯(五)--Socket通讯之Udp通讯
- IP不能作为rocketmq 的topic
- Unity3D网络通讯(六)-- UnityWebRequest实现WebService通讯
- Java Maven编译时没问题,运行时报java.lang.NoSuchMethodError
- 树莓派基础实验34:L298N模块驱动直流电机实验
- The consumer group[PushConsumer] has been created before, specify another name please
- 虚拟机系列 | JVM特点,基础结构与执行周期
- 报错 解决-bash: fork: retry: Resource temporarily unavailable
- 结构与算法(04):排序规则与查找算法
- 手把手教你在 TKE 集群中实现简单的蓝绿发布和灰度发布