Blend_技巧篇_导入PSD文件制作ToggleButton （Z）

Posted 2020-08-31

 =============开发环境=============

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