windowsphone开发定制控件.docx
- 文档编号:5191394
- 上传时间:2022-12-13
- 格式:DOCX
- 页数:11
- 大小:648.32KB
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控件的全过程。
下载代码
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- windowsphone 开发 定制 控件