Windows Phone 7 定制控件 - ImageButton

虫虫 发布于 2012/02/21 17:41
阅读 1K+
收藏 3

【深度】AI、5G时代下,算力网络与内生安全最全解析!>>>

今天我们来探讨如何制作一个不同以往的Button控件,姑且称之为:ImageButton。

在编写 Windows Phone 7 应用程序的时候,我们经常会遇到这样的需求,就是要制作一些图片型按钮。相信有些朋友一定尝试过把Image控件当做标准Button控件的 Content,但结果如何呢?应该不尽如人意了吧。最大的问题在于,系统默认的Button的风格,会让按钮在被按下去的时候,让填充的颜色取系统的前 景色,造成按钮中的图片不可见,并且有令人不适的“闪烁”效果。既然这样的需求比较普遍,我们不如专门自定义一个控件出来。

 

在开始动手之前,我们先看一看实际运行后的效果:

 

整个按钮的效果就是:当用户点击按钮时,按钮图标略微变小、变淡,与此同时,按钮的背景处有另一个图标一边扩散、一边淡出。

 
接下来,我们就开始动手制作这样一个 ImageButton 控件。
 

第一步:编写自定义控件类

制作一个自定义的控件,首先要从编写控件的类开始。既然我们要做的是一个按钮控件,就让它继承自标准的Button控件,从而获得Button已实现的诸多功能(例如:Button 的 Click 事件)。

在Visual Studio里,创建(或打开)一个 Windows Phone 7 项目,添加一个类。代码如下:

public class ImageButton : Button
    {
        public static readonly DependencyProperty ImageSourceProperty =
            DependencyProperty.Register(
                "ImageSource",
                typeof(ImageSource),
                typeof(ImageButton),
                null);

        public ImageSource ImageSource
        {
            get { return (ImageSource)GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }
        }
    }

在上面定义的 ImageButton 类里,我们只声明了一个属性,就是 ImageSource,它是用来为我们的 ImageButton 控件指定图片资源的。至于为什么用两段代码来声明一个属性,请查看有关 DependencyProperty 的更多信息。

 

第二步:设计自定义控件的外观和行为

在Visual Studio里进行重新编译,好让刚刚声明的控件类生效。然后在 Expression Blend 中打开该项目。在 Expression Blend 界面左上角的 Assets 区域中,搜索 imagebutton 字样,可看到我们刚刚声明的 ImageButton 控件。

 

双击该控件,则在当前 page 中添加该控件。

 

至此,我们发现这个 ImageButton 控件的外观其实和标准的 Button 控件没有什么不同。这是由于我们尚未定义任何有关该控件的模板,因此系统就找到其基类的模板来进行显示。接下来,我们就生成并定义 ImageButton 的模板。

在选中 ImageButton 控件的状态下,于界面上方依次点击 [ImageButton] -> [Edit Template] -> [Edit a Copy...]。

扩展说明:

选择[Create Empty],则会生成一个空的模板。如果需要从头编写一个完全自定义的控件,可以选择此项。
选择[Edit a Copy...]意味着将当前控件的模板(如果不存在,则选择基类的模板)进行复制,并在此基础上进行修改。既然我们做的事情就是基于标准的 Button 控件进行扩展,因此该选项比较适合。

 

在弹出的对话框中,选择 [Apply to all] 和 [Application]。

扩展说明:

当定义一个控件的模板时,可以选择给该模板指定一个关键字名称(key),那么在使用这样的模板时,就需要通过显示地(Explicitly) 指定其关键字来进行引用。而如果我们选择了 [Apply to all] 的方式,就意味着不给该模板指定任何关键字(key),那么这样的模板就是默 认模板(Implicit Style)。在一个应用程序范围内,针对同一种控件,只允许存在一个默认模板。
上述对话框中,[Define in] 区域用于指定模板的存放位置。如果选择了 [Application] 则该模板会被放置在当前项目中的 App.xaml 文件中,并且全局可见。通常,默认模板都应该放置于此。选择[This document] 则模板被放置在当前 page 文件中,且仅在当前页面有效。

 

点击确认,进入模板的编辑页面。 

 

 

扩展说明:

在界面的左上方,选择 [States] 分页,可以看到一系列有关 Button 控件的 Visual State。(关于 Visual State 的介绍,请查看其他详细的资料) 
在 界面的左下方,可看到系统默认提供的 Button 控件的内部结构:一个Grid 控件内,嵌套一个名 为 [ButtonBackground] 的 Border 控件,其中又嵌套一个名 为 [ContentContainer] 的 ContentControl 控件。
究其原理,这 个 ContentControl 的 Content 属性(界面右下方红色圈圈)被绑定到了 Button 控件的 Content 属性上,于是我 们在使用 Button 控件时,无论在其 Content 属性上填写任何文字,或者放置任意图片,都能在 Button 控件的内容区域看到它们。

 

接下来,我们大刀阔斧地把模板中的 [ContentContainer] 及 [ButtonBackground] 都删除掉。在删除的过程中,Expression Blend 会提示说“由于删除了某些界面元素而影响了Visual State正常工作”,不必理会。最后只剩下 Grid 控件。

 

接下来我们给Grid中放置两个 Image 控件,这两个 Image 控件相互重叠。同时选中两个 Image 控件,然后点击 Margin 属性右侧的白色方块(Advanced options),然后选择重置(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] 状态(Visual State)。然后选择 ImageFront 控件,将其大小(Sacle)的 X 及 Y 值设置为 0.8,并将其透明度设置为 50%。这一步操作,是定义按钮在被按下的时候,其外观应发生的变化。

 

依然是在 [Pressed] 状态的编辑模式下,选择 ImageBack 控件。 然后点击 [Show Timeline] 按钮,显示故事板(StoryBoard)编辑栏。在故事版中,我们建立两个关键帧,时间间隔大约在0.3秒。在前一个关键帧里,设置 ImageBack 控件的透明度(Opacity)为 50%,在第二个关键帧,设置 ImageBack 控件的透明度为 0%,并且将其大小(Scale)的 X 和 Y 值设置为 2。

提示:

整个按钮的效果就是:当用户点击按钮时,按钮图标略微变小、变淡,与此同时,按钮的背景处有另一个图标一边扩散、一边淡出。

 

接下来,选择 ImageFront 控件, 点击 [Source] 属性右侧的白色方块,设置 Template Binding 为 ImageSource。然后选择 ImageBack 控件,对其进行同样的操作。这一步操作,是将两个 ImageButton 控件的图片资源绑定到我们在一开始声明的 ImageSource 属性上,从而实现在实际使用 ImageButton 控件的地方,根据需求来指定不同的图标。由于模板内的 Image 控件不再是“硬编码”到某一特定的图片上,而是通过绑定来显示实际 ImageSource 属性所提供的值,因此我们就能够实现一个可以重复使用的按钮控件。

 

保存工作成果,然后点击界面上方的导航条,回到使用 ImageButton 控件的 page 编辑页面。

 

在该页面中,选择 ImageButton 控件,在属性栏中,找到 [ImageSource] 属性,为其指定任意一个图片资源。指定完成后,可以在预览区看到图片加载后的效果。

 

调整 ImageButton 控件的大小及位置,然后运行程序,在模拟器中查看效果。当点击该按钮时,会呈现如下效果。(部署到手机设备上体验,效果会更加明显)

 

OK。至此我们就完成定制 ImageButton 控件的全过程。

下载代码

加载中
0
antkingwei
antkingwei
有WP7的学习资料吗,想学学
antkingwei
antkingwei
@红薯 3Q
红薯
红薯
http://www.oschina.net/wp7
0
谭宇源

请问下~你用的是什么编译器啊~

0
xiejianxing
xiejianxing
请问我,怎么在代码里面更换图片
返回顶部
顶部