windowsphone开发定制控件文档格式.docx
《windowsphone开发定制控件文档格式.docx》由会员分享,可在线阅读,更多相关《windowsphone开发定制控件文档格式.docx(11页珍藏版)》请在冰豆网上搜索。
![windowsphone开发定制控件文档格式.docx](https://file1.bdocx.com/fileroot1/2022-12/13/f7646203-9157-4ca4-8932-d58594912583/f7646203-9157-4ca4-8932-d585949125831.gif)
制作一个自定义的控件,首先要从编写控件的类开始。
既然我们要做的是一个按钮控件,就让它继承自标准的Button控件,从而获得Button已实现的诸多功能(例如:
Button的Click事件)。
在VisualStudio里,创建(或打开)一个WindowsPhone7项目,添加一个类。
代码如下:
01
public
class
ImageButton:
Button
02
{
03
static
readonly
DependencyPropertyImageSourceProperty=
04
DependencyProperty.Register(
05
"
ImageSource"
06
typeof(ImageSource),
07
typeof(ImageButton),
08
null);
09
10
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]
分页,可以看到一系列有关
控件的
Visual
State。
(关于
State
的介绍,请查看其他详细的资料)
在界面的左下方,可看到系统默认提供的
控件的内部结构:
一个Grid
控件内,嵌套一个名为
[ButtonBackground]
的
Border
控件,其中又嵌套一个名为
[ContentContainer]
ContentControl
控件。
究其原理,这个
Content
属性(界面右下方红色圈圈)被绑定到了
属性上,于是我们在使用
控件时,无论在其
属性上填写任何文字,或者放置任意图片,都能在
控件的内容区域看到它们。
接下来,我们大刀阔斧地把模板中的[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控件的全过程。
下载代码