自定义按钮控件外观

转自http://www.silverlightchina.net/html/zhuantixilie/winphone7/2010/1011/2528.html

如果你发现Windows Phone 7的平凡的控件外观与你的应用程序界面格格不入，可以使用Microsoft Expression Blend for Windows Phone Beta重新设计控件的外观。在Visual Studio的解决方案资源管理器中找到MainPage.xaml，鼠标右键点击在菜单里选择Open in Expression Blend。自定义控件外观要先创建一个控件模板。在Objects and Timeline面板中找到button1，右键点击，在弹出菜单中选择Edit Template | select Create Empty，为模板命名为ButtonControlTemplate。可以看到Objects and Timeline下的Template下有一个Grid布局控件，对于按钮来说Border控件更适合用来绘制边框和背景。右键点击Grid，在弹出菜单中选择Change Layout Type|Border。

空白的Border不能显示任何内容，在Properties面板下的Appearance面板上设置Border的边框宽度为2像素，圆角10像素。

    在Brushes面板上设置背景颜色，选择Gradient brush来实现渐变效果。分别设置两端为白色和紫色。

接下来设置BorderBrush，使用Solid color brush实现一个灰色的边框。

到此，按钮的外观已经设计完成了，但是按钮还没有文字。保证Border在Objects and Timeline面板是选中状态因为需要从Assets面板中添加一个TextBlock控件到Border。

设置一下TextBlock在Border的布局。

设置HorizontalAlignment和VerticalAlignment为Center让TextBlock在Border里居中。接下来需要把TextBlock的Text属性绑定到Button的Content属性。这样，改变Text属性，Button的Content属性也会一同更改，在Common Properties目录下找到Advanced property options，弹出菜单中选择Template Binding|Content即可完成绑定。

目前这个按钮在点击或者获得焦点的时候还不会有任何变化。下面将以点击时为例，制作一个响应点击的动画效果。

确认Objects and Timeline上已经选择了Border控件。切换到States面板，在CommonStates下点击Pressed，会自动开始录制。在时间线1秒的位置处，更改一次Border的背景，在2秒的位置处复原到初始状态。在点击按钮时触发的动态效果就制作完成了。

总结：在Windows Phone 7中，选用合适的布局和控件有助于设计和开发出更优秀的用户界面。利用xaml和cs文件可以是界面和逻辑的分离，控件开发中要着重于xaml的描述，配合Expression Blend，还可以创造出更华丽生动的用户体验。