zoukankan      html  css  js  c++  java
  • 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的属性。

  • 相关阅读:
    数据结构——第二章 线性结构
    数据结构——第一章 绪论
    2018年
    Node笔记(2)
    Node笔记(1)
    公务员考试
    cf-789A (思维)
    cf188C(最大子段和&&思维)
    zzuli1731 矩阵(容斥)
    九余数定理(同余定理)
  • 原文地址:https://www.cnblogs.com/tranw/p/6418343.html
Copyright © 2011-2022 走看看