Blend_技巧篇_导入PSD文件制作ToggleButton (Z)

简介: 原文:Blend_技巧篇_导入PSD文件制作ToggleButton (Z) 系统: Win7sp1 32位 IDE: Microsoft VisualStudio 2013 Ultimate Blend 2013 工程: .
原文: Blend_技巧篇_导入PSD文件制作ToggleButton (Z)

系统: Win7sp1 32位

IDE: Microsoft VisualStudio 2013 Ultimate

Blend 2013

工程: .Net Framework4.5.1

工具: Photoshop CS6

================================

首先明确一点,ToggleButton实际上是CheckBox的变形,分为了三种状态Checked、Unchecked、Indeterminate

 

1、制作PSD模板文件,如下图,背景删除有利于后续控件制作。

  

                     

 

2、启动Blend2013,其他版本亦可。新建一个WPF Application工程,然后如图所示导入PSD文件

导入PSD文件后如图所示

图中我进行了标记:

① PSD模板中ToggleButton的Checked状态

② PSD模板中ToggleButton的Unchecked状态

③ PSD文件中对应图层保存的格式:Editable content--这个是我们需要的格式,这样导入后的图形可以编辑,例如填充颜色,改变描边等等;Flattened bitmap -- 这个就是保存成为一张普通的图片,如果是做个按钮的贴图还可以,在此例中我们不需要

④ 可能你也会看到这样的提示,提示表明Photoshop中使用的一些特效在Blend中不支持,不要紧只管导入,有什么问题我们后面可以处理。

至于需要导入的模板,我只勾选了OFF组里面的3个(就是②对应的那个图),当然你也可以选择ON组里面的,个人喜好了,那个bg就不要勾选了,就是个白色背景,我们需要的是透明背景。选择好了后点OK。

Blend导入完成后的状态如图所示,应该只有红框中的一个按钮

注:btn_07为ToggleButton在Checked状态下显示的绿色对勾。这个是我用PS中切片切出来的,因为我勾选的白色OFF状态下的模板,所以我需要通过代码做出Checked状态下(ON模板)的模样。可能你导入后的图形颜色会有丢失情况,那是因为Photoshop中使用的一些特效Blend中不支持,不要紧,我们可以在PS中做切片把图片切出来。例如我的off icon.png这个文件导入后就变成了黑色的,在PSD模板中应该是红色的。

 

3、导入PSD模板完成后,应如图所示。应该只有OFF_Copy这一个画布(Canvas)

  

然后我们做如图中黄色的那部分操作,把这个画布(Canvas)转成一个UserControl,点击后会弹出一个让你起名字的对话框,
输入自定义的名称后会在工程中生成一个UserControl控件。如图所示:

  

接下来,我们需要做一个控件的模板(Template),把控件相关的Path、Image等等的控件都包含进去。

这样做是因为我们需要把这个自定义的控件转换成ToggleButton,

如果不做这步,直接把节点UserControl改成ToggleButton会有问题滴,至于什么问题可以自己进行尝试,反正我是试过了。步骤如图所示:

  

点击创建空模板后会弹出一个给模板起名字的窗口,如图所示:

 

① 模板的名称

② 和③其实这两个是一起的,如果选择② ,那么自定义的这个模板就会放置在App.xaml中,可以将来做为其他控件的模板,本例中我们只有这一个控件,那么就选择③了。

点击OK后,你会发现Design区域的控件不见了,只有一个蓝色的空白框在那里。此时我们来看代码,如图所示:

我们需要把包括Grid节点在内的代码替换UserContro.Resources节点下的Grid,替换完成后又看到了我们自定义的控件了,不再是一个空白的蓝色框了。

因为我们做的这个控件需要Checked、Unchecked事件,并且最好还是个按钮,所以ToggleButton正好符合我们的条件,那么我们就把节点UserControl改成ToggleButton,这样这个控件就继承了ToggleButton的属性。

目录
相关文章
|
4月前
|
资源调度 前端开发 JavaScript
安利一款基于canvas/svg的富文本编辑器-支持在线导出PDF、DOCX
高性能:利用Canvas和SVG进行图形和矢量图形的渲染,提供高性能的绘图能力。 可扩展性:Canvas-Editor是一个开源项目,支持通过插件机制扩展编辑器的功能,如DOCX、PDF导出、表格分页等。 丰富的文本编辑功能:支持多种文本编辑操作,如插入表格、分页、性能优化等。
511 0
|
编解码 iOS开发 MacOS
Alien Skin Exposure2023调色滤镜插件RAW后期处理工具
Exposure2023是一款专为摄影艺术设计的图像编辑器。新的 Exposure2023结合了专业级的照片调整、庞大的华丽照片库和令人愉悦的高效设计。可以提供最大,最准确的电影外观选择。Exposure的创意外观不仅限于电影模拟,从干净优雅的现代风格到引人注目的色彩变化。您可以自定义Exposure的每个内置外观,然后将其另存为能够表达自己风格的独特外观。只需单击一下,即可重复使用自定义的预设,以在所有工作中获得一致的外观。
177 0
PSD 转 Sketch, 你可以用这 3 种方法 | 一日一技
PSD 转 Sketch, 你可以用这 3 种方法 | 一日一技
1950 0
|
图形学 异构计算
Unity Visual Effect Graph 制作Fireworks烟花特效
Unity Visual Effect Graph 制作Fireworks烟花特效
589 1
|
Web App开发 前端开发 JavaScript
用SVG 制作 Sprites的图标系统(一)
我一直是图标字体的大力支持者。很多网站真的需要一个图标系统,图标字体提供了一个该死的精细系统。但是,我认为假设你对 IE 9+ 很好,使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。
260 0
用SVG 制作 Sprites的图标系统(一)
sketch 如何规范的设置自己的字体样式库( Text styles )
sketch 如何规范的设置自己的字体样式库( Text styles )
sketch 如何规范的设置自己的字体样式库( Text styles )
超简单!Qt Designer插入图片,styleSheet加入图片,Qt加入背景图片
超简单!Qt Designer插入图片,styleSheet加入图片,Qt加入背景图片
674 0
超简单!Qt Designer插入图片,styleSheet加入图片,Qt加入背景图片
|
Web App开发 缓存 前端开发
用SVG 制作 Sprites的图标系统(二)
我一直是图标字体的大力支持者。很多网站真的需要一个图标系统,图标字体提供了一个该死的精细系统。但是,我认为假设你对 IE 9+ 很好,使用内联 SVG 并且 <use> 引用图标的元素是一个优秀的系统。
236 0
|
容器 iOS开发
Expression Blend4经验分享:制作一个简单的图片按钮样式
原文:Expression Blend4经验分享:制作一个简单的图片按钮样式 这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.
997 0