Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(上)
2019独角兽企业重金招聘Python工程师标准>>>
本篇文章,最终效果图:
当然,不只是一个UI而已,如果只是一张图片,那专业的设计师能做出更出色的效果。在这里,它是具有许多事件和属性的一个控件,其实,它是一个checkBox控件,接下来就让我们一起来对checkBox进行大变身吧~话说,之前我们已经给Listbox变身过了,有兴趣的话查看:http://www.cnblogs.com/vimsk/archive/2011/03/09/1978326.html Blend确实是个好工具,通过它,可以尽情发挥你的想象力,而且用起来是那么的方便(怎么有打广告的嫌疑,嘿嘿)。好了,废话不多说了,开始吧~~
通过本文章可以了解到的知识
1.通过blend使用template创建自定义的模板.
2.如何进行template Binding.
3.Grid布局
4.通过States创建 状态过渡.
5.Fluid Layout 的应用.
内容有点多,所以,文章打算分成两篇,不然看起来有点累:)
以下内容努力创建中...
1.打开blend,新建一个Silverlight项目:
2.从资产面板中拖一个checkBox到工作区:
3.接下来,创建一个模板:
于是乎,我们就能进入模板编辑区啦,如果看过我之前的文章的话,这些对你来说应该很熟悉了。
上图所示,你可以通过它方便进行模板编辑和普通编辑的切换工作。如果此时查看时间线和对象区,你也将看到模板的组织情况(如下图所示)。
上图所示红色圈出地方,都可以从模板编辑切换出去。
接下来,我们切换到States选项卡,来查看下checkBox的相关状态:
哇塞。。。一大堆。。。。。@!%¥%#¥@%
这里我们主要关注的是Checked状态。 因为这个也算是checkBox的主要作用。暂且不去管它,我们接下去先看看checkBox模板的组成,看了后,发现有一个Grid,里面放了一个Grid和一个Contentprestener。展开里面的Grid,我们可以看到又有一大堆的东西,有点下,我们放大看:
上面的Background用到了模板绑定,这样的好处是当你完成模板编辑后,以后控件修改相关属性,例如默认checkBox模板的Background就是绑定到控件的BorderBrush属性,这样,当控件的BoerderBursh颜色改变了,反应到模板中就是上图中的Background属性改变,视觉上就是红色箭头所指的颜色。
接下来,我们看下Contentprestener的属性,我们发现,它有个Content的属性,点击的话,同样发现它也是绑定的。
它绑定到了控件的Content属性,默认拖一个checkBox,它的Content是一个text文本。
了解了这些东西后,开始正式动手了,首先,把Grid中的Grid给删除掉,Contentprestener也删除掉:
全部删除只身下最外层的Grid,然后,自己放一个空的Grid进去看上去就变这样了:
我们的目的是要让最后的样子是类似于iphone屏幕锁的样子,所以,就按照这个目标,最后的结构是这样的:
展开grid:
上图中,Rectangle是一个矩形,代表背景。在内嵌的grid中放置了一个thumb的矩形和一个Path路径,在画布上将看到如下的样子:
其中的thumb就是按钮,Rectangle是蓝色背景,path是中间的箭头,现在很清楚了吧。。。。
接下来注意观察上图。看到顶部有两把锁了吗?中间还有一个斜向双箭头的图案,这里说明,把Grid分成了三个列。第一个列是开着的锁,说明是按照百分比来设定的,中间的是自动宽度,最后的是固定长度,这里我们设置为0. 为什么要这样设定,当然是有道理的,因为最终,我们的按钮是会从第一列滑动到第二列,而第二列长度和控件本身长度有关,当设定为自动,并且第三列固定为零,这样,当控件长度变化时,按钮将不会滑出grid的外部,具体动手试试就清楚了。
接下来,我们要对背景色和按钮的前景色进行绑定,分别绑定到控件的BorderBrush和Foreground:
这样,当我们切换会控件编辑区后,设定下BorderBrush和Foreground,就会发现模板中相应部分的颜色就会跟着改变。我们把颜色调好,接着再拖一个checkBox,引用上面我们编辑的模板
最后,分别调正两个checkBox的BorderBrush和Foreground:
到目前位置,只是有了外观,我们发现按钮不会滑动,接下去就来完成当checked的时候,按钮从左边滑动到右边,本篇就先不写了,太长了,见下篇了吧。。:)
转载于:https://my.oschina.net/u/1446855/blog/643500
Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(上)相关推荐
- [Expression Blend 4] [SketchFlow系列] Chapter 1 瞭解SketchFlow Map (上)
接下來,我們模擬一下,有可能是接到了一個專案或是你腦中剛好迸出一個不錯的Idea 你迫不急待的想要把的想法告訴你的工作夥伴 想要完整的告訴對方,這個主意或想法有多完美!! 而且希望不要有觀念上的落差, ...
- [演练]使用Expression Blend或代码创建Silverlight时钟
本演练分步讲述如何使用 Microsoft Silverlight 创建一个简单时钟.下图所示为您将创建的时钟. 运行此示例. 下载此示例. 组成此时钟外观的向量图形是使用可扩展应用程序标记语言 (X ...
- Windows Phone 7 不温不火学习之《Expression Blend 创建渐变效果和创建Storyboard动画》...
说起Expression Blend ,开发过Silverlight 或者WPF的同学肯定会暗爽一把.微软把这一神器免费提供给我们开发者使用,特别是自从WP7 发布就立刻免费,可以看出微软对WP7的重 ...
- Expression Blend学习动画基础
原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化.最常见的是flash的动画,还有GIF动态图片. 动画的主要元素 时 ...
- Hello,Expression Blend 4 (含Demo教程和源码)
前言 这段时间的开发不会用到Blend,到年底才会大量用到,本来打算到时候在写Blend相关的笔记,不过看到一些朋友还比较感兴趣,所以这里提前整理了一下. 首先,我希望你记住下面几点: Blend并不 ...
- Expression Blend实例中文教程(2) - 界面快速入门
上一篇主要介绍Expression系列产品,另外概述了Blend的强大功能,本篇将用Blend 3创建一个新Silverlight项目,通过创建的过程,对Blend进行快速入门学习. 在开始使用Ble ...
- Expression Blend实例中文教程(9) - 行为快速入门Behaviors
在Blend强大的设计功能支持下,设计人员和开发人员可以无代码实现Silverlight/WPF动画效果,例如上文介绍的StoryBoard,就是一个典型例子,设计人员和开发人员仅需提供必要元素,即可 ...
- 零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)...
零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上) 原文:零元学Expression Blend 4 - ...
- 一起谈.NET技术,Expression Blend中文教程 - 开篇
随着计算机软件开发分工细节化,微软对已有的产品线进行了调整,在保持原有经典开发工具Visual Studio基础上,又推出了一套新的设计开发工具系列,Expression Studio. Expres ...
最新文章
- 从数组中取出m个数相加的结果(组合)
- (time.h) 自己用
- 10个你必须知道的Python内置函数
- 不混淆某个方法_英文和拼音会混淆吗?这些事越早知道越好
- HarmonyOS之基础环境和应用开发流程
- java中GUI的awt和Swing的知识点
- [CocoaPods]常见问题
- C#构造函数、操作符重载以及自定义类型转换
- 第十篇:Spring Boot整合mybatis+逆向工程(Mysql+Oracle) 入门试炼01
- [转载] Visual Studio 2017 VC项目设置 printf 输出到 Console 窗口调试
- Android 高级面试-2:IPC 相关
- 图像读取函数cv::imread()的几种使用方式
- HENXU-SOA的业务规划和建模方法之七——SOA的方法融合
- android开发骰子动画,Android实现微信摇骰子游戏
- 软件工程师具体的工作内容是什么?
- 是时候好好审视下自己了
- 【元宇宙系列】游戏与元宇宙(下)——拉动上游产业发展并引领传统产业数字化转型
- Vue 开发的组件库
- 【mac】如何取消桌面麦克风
- DL4J解决Score NaN
热门文章
- 1657 棋盘上的距离
- 前端console log之坑。。。
- python exec
- Linux底层函数库“glibc”再现重大安全漏洞
- Bzoj2555 SubString
- 三种字符编码:ASCII、Unicode和UTF-8
- 5.对象和面向对象3——类的定义
- 使用动态解析设置***
- python的class的__str__()和__repr__()函数
- mysql半同步复制问题排查