设置按钮的Style(2)

http://www.cnblogs.com/crazystars/archive/2011/10/12/2208020.html

这次创建的是一个用图片作为背景图片和按钮,一共用了两张图片,正常状态下和按下状态下。

按照上一篇步骤2-5,创建好一个新的按钮,并创建新的ButtonStyle2。

1. 去除默认的按钮风格的边框。

选中ButtonBackground,并在右边区域将绑定的属性Background,BorderBrush,BorderThinkness以及Margin重置。

2. 为了背景图片的布局,我们在ButtonBackground和ContentContainer中间加一层Grid。如下图:

3. 添加背景图片。

在Grid里添加两个Image控件,作为按钮的背景图。由于需要在按下状态对这两个控件做处理,因而分别命名为normalImage和pressedImage,如下图: 

4.载入图片

选中Image控件,属性栏中找到Common Properties,点击...,选择一张图片,并确定,这样就为Image控件加载了一张图片,同时这张图片也被拷到工程目录下。用此方法为normalImage和pressedImage加载对应的图片,stretch方式选择None,让Image控件适应为图片大小。

5.设置pressedImage的Visibility(显示状态)为Collapsed(隐藏)。

6.切换到States栏,并选中Pressed状态,如下图

7.在Pressed状态下,将normalImage的Visibility设置为Collapsed,pressedImage的Visibility设置为Visible。

8.运行项目,查看效果。

示例代码:https://files.cnblogs.com/crazystars/ButtonStyleSample1_2.rar

原文地址:https://www.cnblogs.com/crazystars/p/2250461.html