Blend ---- 自定义ImageButton（图片按钮）

Admin

这几天看了一些Blend的使用blog，碰巧有人问我做过ImageButton没，一时兴起就尝试着做了一个。效果如下：

不喜勿喷。  源码下载：http://files.cnblogs.com/qq278360339/ImageButtonPro.zip

接下来，我们就开始动手制作这样一个 ImageButton 控件。
第一步：编写自定义控件类
由于我们要制作一个按钮控件，所以我们自定义的这个控件类要继承Button，从而获得了Button已实现的所有功能.
首先创建一个Silverlight for Windows Phone应用程序.添加一个类代码如下：
View Code

上面的类声明了3个依赖属性，作为我们的按钮的图片资源。

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

在Visual Studio中先编译下我们的程序，目的是在我们打开Blend后能在找到我们自定义的控件。接下来就是打开Blend，在Blend界面的左上角Assets中找到我们的控件，双击把控件添加到视图区域。

然后选中视图里的ImageButton控件，右键选择 Edit Template| Edit a Copy。

会弹出下面对话框：

选择其中的Apply to all 和 Application，为什么选择这2个前面几篇Blend中有提到，这里不做赘述。点击OK看到如下界面

接下来我们把图中圈中的ButtonBackground和ContentContainer删除掉。接下来在Button里添加3个Image控件。添加方法，在Assets里选择Image拖到Button里。

下面对3个Image依次做处理，注意顺序是不能改的，因为越是在上面的Image控件，显示的时候越在最底层。

首先，对第一个Image做处理，其命名为ImageBack，Opacity设置为0%（因为它是ImageButton的选中背景），然后点击 Margin 属性右侧的白色方块（Advanced options），然后选择重置（Reset），将所有 Margin 值清零。VerticalAlignment 和 HorizontalAlignment设置为居中，点击 Source属性右侧的浏览按钮，为其指定图片资源ImageButtonBack。加载图片后，如果 Image 控件的大小发生明显的变化，则适当调整预览区下方的 [查看百分比] 来调整视野，但千万不要直接调整 Image 控件本身的 Width 及 Height。整个模板定义的过程中，这两个 Image 控件的 Width 及 Height 都应该显示 Auto (某数字) 。

然后，处理第二个Image，命名为ImagePrev，Opacity设置为100%（因为它是ImageButton的正常状态下背景），点击 Source属性右侧的浏览按钮，为其指定图片资源ImageButtonPrev，其他操作同上。

最后，处理第三个Image，命名为ImageCurrent，Opacity设置为100%（因为它是ImageButton的正常状态下背景），Margin属性全部设置为17，为什么这么设置，是因为它是被背景包裹其中的，要适当的缩进，点击 Source属性右侧的浏览按钮，为其指定图片资源ImageButton，其他操作同上。

设置完效果如下，其中要设置的地方被圈住：

在界面左上区域的 States 分页中，选择 CommonStates 下的 Pressed 状态（Visual State）。然后点击 Show Timeline 按钮，显示故事板（StoryBoard）编辑栏。

选中ImageBack，在故事版中，我们建立三个关键帧，时间间隔大约在0.3秒。在前一个关键帧里，设置 ImageBack 控件的透明度（Opacity）为 0%，并且将其大小（Scale）的 X 和 Y 值设置为 1。在第二个关键帧，设置 ImageBack 控件的透明度为 0%，并且将其大小（Scale）的 X 和 Y 值设置为 0.8。在第三个关键帧，设置 ImageBack 控件的透明度为 100%，并且将其大小（Scale）的 X 和 Y 值设置为 1。

选中ImagePrev，在故事版中，我们建立三个关键帧，时间间隔大约在0.3秒。在前一个关键帧里，设置 ImagePrev控件的透明度（Opacity）为 100%，并且将其大小（Scale）的 X 和 Y 值设置为 1。在第二个关键帧，设置 ImagePrev控件的透明度为 0%，并且将其大小（Scale）的 X 和 Y 值设置为 0.8。在第三个关键帧，设置 ImagePrev控件的透明度为 0%，并且将其大小（Scale）的 X 和 Y 值设置为 1。

选中ImageCurrent，在故事版中，我们建立三个关键帧，时间间隔大约在0.3秒。在前一个关键帧里，设置 ImageCurrent控件的透明度（Opacity）为 100%，并且将其大小（Scale）的 X 和 Y 值设置为 1。在第二个关键帧，设置 ImageBack 控件的透明度为 100%，并且将其大小（Scale）的 X 和 Y 值设置为 0.8。在第三个关键帧，设置 ImageCurrent控件的透明度为 100%，并且将其大小（Scale）的 X 和 Y 值设置为 1。

效果如下，要设置的被圈住：

点击播放按钮就能够预览效果了。

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

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

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

调整 ImageButton 控件的大小及位置，然后运行程序，在模拟器中查看效果。当点击该按钮时，会呈现如下效果。

最后的样式代码：

View Code

源码下载：http://files.cnblogs.com/qq278360339/ImageButtonPro.zip