windowsphone开发定制控件.docx
《windowsphone开发定制控件.docx》由会员分享，可在线阅读，更多相关《windowsphone开发定制控件.docx（11页珍藏版）》请在冰豆网上搜索。
windowsphone开发定制控件
今天我们来探讨如何制作一个不同以往的Button控件，姑且称之为：
ImageButton。
在编写WindowsPhone7应用程序的时候，我们经常会遇到这样的需求，就是要制作一些图片型按钮。
相信有些朋友一定尝试过把Image控件当做标准Button控件的Content，但结果如何呢？
应该不尽如人意了吧。
最大的问题在于，系统默认的Button的风格，会让按钮在被按下去的时候，让填充的颜色取系统的前景色，造成按钮中的图片不可见，并且有令人不适的“闪烁”效果。
既然这样的需求比较普遍，我们不如专门自定义一个控件出来。
在开始动手之前，我们先看一看实际运行后的效果：
整个按钮的效果就是：
当用户点击按钮时，按钮图标略微变小、变淡，与此同时，按钮的背景处有另一个图标一边扩散、一边淡出。
下载代码
接下来，我们就开始动手制作这样一个ImageButton控件。
第一步：
编写自定义控件类
制作一个自定义的控件，首先要从编写控件的类开始。
既然我们要做的是一个按钮控件，就让它继承自标准的Button控件，从而获得Button已实现的诸多功能（例如：
Button的Click事件）。
在VisualStudio里，创建（或打开）一个WindowsPhone7项目，添加一个类。
代码如下：
01
public class ImageButton:
Button
02
{
03
public static readonly DependencyPropertyImageSourceProperty=
04
DependencyProperty.Register（
05
"ImageSource",
06
typeof（ImageSource）,
07
typeof（ImageButton）,
08
null）;
09
10
public ImageSourceImageSource
11
{
12
get { return （ImageSource）GetValue（ImageSourceProperty）;}
13
set {SetValue（ImageSourceProperty,value）;}
14
}
15
}
在上面定义的ImageButton类里，我们只声明了一个属性，就是ImageSource，它是用来为我们的ImageButton控件指定图片资源的。
至于为什么用两段代码来声明一个属性，请查看有关DependencyProperty 的更多信息。
第二步：
设计自定义控件的外观和行为
在VisualStudio里进行重新编译，好让刚刚声明的控件类生效。
然后在ExpressionBlend中打开该项目。
在ExpressionBlend界面左上角的Assets区域中，搜索imagebutton字样，可看到我们刚刚声明的ImageButton控件。
双击该控件，则在当前page中添加该控件。
至此，我们发现这个ImageButton控件的外观其实和标准的Button控件没有什么不同。
这是由于我们尚未定义任何有关该控件的模板，因此系统就找到其基类的模板来进行显示。
接下来，我们就生成并定义ImageButton的模板。
在选中ImageButton控件的状态下，于界面上方依次点击[ImageButton]->[EditTemplate]->[EditaCopy...]。
扩展说明：
选择[Create Empty]，则会生成一个空的模板。
如果需要从头编写一个完全自定义的控件，可以选择此项。
选择[Edit a Copy...]意味着将当前控件的模板（如果不存在，则选择基类的模板）进行复制，并在此基础上进行修改。
既然我们做的事情就是基于标准的 Button 控件进行扩展，因此该选项比较适合。
复制代码
在弹出的对话框中，选择[Applytoall]和[Application]。
扩展说明：
当定义一个控件的模板时，可以选择给该模板指定一个关键字名称（key），那么在使用这样的模板时，就需要通过显示地（Explicitly）指定其关键字来进行引用。
而如果我们选择了 [Apply to all] 的方式，就意味着不给该模板指定任何关键字（key），那么这样的模板就是默认模板（Implicit Style）。
在一个应用程序范围内，针对同一种控件，只允许存在一个默认模板。
上述对话框中，[Definein]区域用于指定模板的存放位置。
如果选择了[Application]则该模板会被放置在当前项目中的App.xaml文件中，并且全局可见。
通常，默认模板都应该放置于此。
选择[Thisdocument]则模板被放置在当前page文件中，且仅在当前页面有效。
点击确认，进入模板的编辑页面。
扩展说明：
在界面的左上方，选择 [States] 分页，可以看到一系列有关 Button 控件的 Visual State。
（关于 Visual State 的介绍，请查看其他详细的资料）
在界面的左下方，可看到系统默认提供的 Button 控件的内部结构：
一个Grid 控件内，嵌套一个名为 [ButtonBackground] 的 Border 控件，其中又嵌套一个名为 [ContentContainer] 的 ContentControl 控件。
究其原理，这个 ContentControl 的 Content 属性（界面右下方红色圈圈）被绑定到了 Button 控件的 Content 属性上，于是我们在使用 Button 控件时，无论在其 Content 属性上填写任何文字，或者放置任意图片，都能在 Button 控件的内容区域看到它们。
接下来，我们大刀阔斧地把模板中的[ContentContainer]及[ButtonBackground]都删除掉。
在删除的过程中，ExpressionBlend会提示说“由于删除了某些界面元素而影响了VisualState正常工作”，不必理会。
最后只剩下Grid控件。
接下来我们给Grid中放置两个Image控件，这两个Image控件相互重叠。
同时选中两个Image控件，然后点击Margin属性右侧的白色方块（Advancedoptions），然后选择重置（Reset），将所有Margin值清零。
仍然是在选中两个Image控件的状态下，点击[Source]属性右侧的浏览按钮，为其指定图片资源（最好是不超过200X200像素的png图片）。
加载图片后，如果Image控件的大小发生明显的变化，则适当调整预览区下方的[查看百分比]来调整视野，但千万不要直接调整Image控件本身的Width及Height。
整个模板定义的过程中，这两个Image控件的Width及Height都应该显示Auto（某数字）。
提示：
在这一步骤中，之所以用“硬编码”的方式指定图片资源，仅仅是为了借助可视化的方式来进行模板编辑。
待模板编辑完成之后，我们会把 Image 控件的图片资源绑定到我们在 ImageButton 类里声明的 ImageSource 变量。
接下来，给两个Image控件分别起名为ImageBack和ImageFront（在XAML中，越是处在代码的上方，就意味着在运行时越在低层显示）。
然后将ImageBack的透明度（Opacity）设置为0%，让它默认不可见。
在界面左上区域的[States]分页中，选择[CommonStates]下的[Pressed]状态（VisualState）。
然后选择ImageFront控件，将其大小（Sacle）的X及Y值设置为0.8，并将其透明度设置为50%。
这一步操作，是定义按钮在被按下的时候，其外观应发生的变化。
依然是在[Pressed]状态的编辑模式下，选择ImageBack控件。
然后点击[ShowTimeline]按钮，显示故事板（StoryBoard）编辑栏。
在故事版中，我们建立两个关键帧，时间间隔大约在0.3秒。
在前一个关键帧里，设置ImageBack控件的透明度（Opacity）为50%，在第二个关键帧，设置ImageBack控件的透明度为0%，并且将其大小（Scale）的X和Y值设置为2。
提示：
整个按钮的效果就是：
当用户点击按钮时，按钮图标略微变小、变淡，与此同时，按钮的背景处有另一个图标一边扩散、一边淡出。
接下来，选择ImageFront控件， 点击[Source]属性右侧的白色方块，设置TemplateBinding为ImageSource。
然后选择ImageBack控件，对其进行同样的操作。
这一步操作，是将两个ImageButton控件的图片资源绑定到我们在一开始声明的ImageSource属性上，从而实现在实际使用ImageButton控件的地方，根据需求来指定不同的图标。
由于模板内的Image控件不再是“硬编码”到某一特定的图片上，而是通过绑定来显示实际ImageSource属性所提供的值，因此我们就能够实现一个可以重复使用的按钮控件。
保存工作成果，然后点击界面上方的导航条，回到使用ImageButton控件的page编辑页面。
在该页面中，选择ImageButton控件，在属性栏中，找到 [ImageSource]属性，为其指定任意一个图片资源。
指定完成后，可以在预览区看到图片加载后的效果。
调整ImageButton控件的大小及位置，然后运行程序，在模拟器中查看效果。
当点击该按钮时，会呈现如下效果。
（部署到手机设备上体验，效果会更加明显）
OK。
至此我们就完成定制ImageButton控件的全过程。
下载代码
升级会员 