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的属性。

时间: 2024-08-24 14:03:38

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

Cocos Studio 2.3.2不再支持直接导入PSD文件

以前的Cocos Studio(例如我以前的游戏版本使用CocoStudio 1.4)支持直接导入PhotoShop的PSD图像文件,但是当前的Cocos Studio 2.3.2(相应于cocos2d-x 3.8.1)已经不再提供支持.

移动前端工作的那些事---前端制作之微信小技巧篇

移动前端工作的那些事---前端制作之微信小技巧篇_WebApp赵海洋_新浪博客 移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20:47) 转载▼移动前端工作的那些事---前端制作之微信小技巧篇,布布扣,bubuko.com

.Net常用技巧_目录与文件操作

using System; using System.Collections.Generic; using System.Text; using System.IO; namespace MyTool { public class FileOperator { /// <summary> /// 返回指定目录下所有文件信息 /// </summary> /// <param name="strDirectory">目录字符串</param>

.Net常用技巧_操作xml文件教程(插入节点、修改、删除)

已知有一个XML文件(bookstore.xml)如下:     <?xml   version="1.0"   encoding="gb2312"?>     <bookstore>         <book   genre="fantasy"   ISBN="2-3631-4">             <title>Oberon's   Legacy</title&

iOS静态库.a文件制作和导入使用

iOS静态库.a文件制作: 1.新建Cocoa Touch Static Library工程 新建工程 - 选择iOS-FrameWork&Libary,选择 Cocoa Touch Static Library工程. 2.Xcode的参数设置 "Build Active Architecture Only" 设置为"NO" "IOS Deployment Target" 设置为 "IOS 7.0" ,表示支持IOS7

小技巧--解决eclipse导入的jar文件后,无法使用默认包中的方法问题

问题:我已经导入了stdlib的jar文件,但是由于包是(default package)所以无法使用包中的方法 解决方法: 1.新建一个项目 2.新建一个文件夹 3.打开项目,新建一个包,然后导入jar文件中的class文件 右键新建的包(file)选择import,在General中选择现成的文件(Archive File)Archive--档案 选择jar包中所有的文件 最后一步就是要把这些文件导入到一个新的jar文件中 这样eclipse导入我们自己打的包时,就不会出现包名为defaul

红茶一杯话Binder(传输机制篇_上)

红茶一杯话Binder (传输机制篇_上) 侯 亮 1 Binder是如何做到精确打击的? 我们先问一个问题,binder机制到底是如何从代理对象找到其对应的binder实体呢?难道它有某种制导装置吗?要回答这个问题,我们只能静下心来研究binder驱动的代码.在本系列文档的初始篇中,我们曾经介绍过ProcessState,这个结构是属于应用层次的东西,仅靠它当然无法完成精确打击.其实,在binder驱动层,还有个与之相对的结构,叫做binder_proc.为了说明问题,我修改了初始篇中的示意图

iOS 库文件制作

一 制作使用静态库 IOS静态库a文件制作流程 字数345 阅读5120 评论7 喜欢23 1.新建Cocoa Touch Static Library工程 新建工程 2.Xcode的参数设置 "Build Active Architecture Only" 设置为"NO" "IOS Deployment Target" 设置为 "IOS 7.0" ,表示支持IOS7.0以上系统版本的编译 Build Active Archi

FastReport 使用技巧篇

FastReport 使用技巧篇 使用技巧篇 1.FastReport中如果访问报表中的对象? 可以使用FindObject方法. TfrxMemoView(frxReport1.FindObject('memo1')).Text:='FastReport'; 2.FastReport中如何使用上下标? 设置frxmemoview.AllowHTMLTags:= True;在Text输入如下 上标:mm<sup>2</sup> 下表:k<sub>6</sub>