Windows Phone开发 自定义控件ImageButton的实现

在Windows Phone中,默认的按钮Button控件并没有设置成图片样式的功能,如果在Background属性设置一张图片,再隐藏边框,虽然在外观上看就是一图片按钮,但是如果点击的话,会发现图片看不到了,只有一个前景色的距形,与真正的ImageButton还有有区别的。如果直接用图片,不用Button的话,会发现Image控件没有Click属性。
我们今天的目标:定制一个控件,有Button的功能,Image的外观。
简单说一下实现步骤,先是定义一个继承自Button的ImageButton控件,增加ImageSource属性,用于设置图片,然后用Expression Blend给这个控件定义外观。
ImageButton.cs:


using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace PhoneApp2
{
    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.cs后,编译一下,会发现ToolBox下面多出了ImageButton。拖动一个ImageButton到页面上,会发现,它的外观其实跟Button一模一样,因为我们是直接继承自Button,没有给它定义自己的样式。
添加ImageButton后,在Solution Explorer中选中包含ImageButton的xaml文件,右键,点”Open in Expression Blend”,用Expression Blend打开。
打开后,单击选中ImageButton,点右键,选择Edit Template,Edit a copy,选择Apply to all,Application,再点OK,如下图:

查看Objects and Timeline窗口(默认在左侧),把ButtonBackground删掉,如下图:

删除后,添加一个Image控件(点击最左侧的>>图标,输入Image,当然你也可以一个一个慢慢找),选中刚刚添加的Image控件,在右侧属性中找到Source属性,点击右边的小方块(不是浏览按钮),Template Binding—ImageSource

这样,就把图片的Source属性跟ImageButton的ImageSource属性绑定了,我们在外部只需要设置ImageSource属性就可以同步修改Image的Source属性。
到此为止,已经基本实现了我们需要的功能,但是为了按钮更美观,可以定义按钮在不同状态下显示效果以及一些简单的动画。
在States选项卡中,点击Common States下的Pressed,定义在按钮被按下时的显示效果。比如,实现被按下时,图片变大,可以找到Image的Scale属性,把x,y值设为大于1的浮点值,如果是缩小,小于1.默认情况下,设置完以后,在点击时会有一个过渡的动画效果,即图片逐渐变大或变小。
也可以通过Timeline来自定义动画效果,点击Show TimeLine按钮,出现窗口如下图:

可以添加时间点,每个点显示的样式自己定义。

© 2012, 冰冻鱼. 请尊重作者劳动成果,复制转载保留本站链接! 应用开发笔记