(原创)Windows Phone 7开发随记---自定义按钮的实现
这段时间着手公司的windows phone7的开发项目，因为项目中许多地方都要用到不同风格式样的按钮，
对phone7也大致研究了下，想要完美的制作精美的按钮，对expression blend也需要熟悉熟悉。在这里我们
用到的首先是expression blend工具。用之前，先需要了解几个概念：
自定义控件模板 - ControlTemplate。ControlTemplate可以称为控件模板，简单的理解为控件结构和行为的集合。
在项目设计中，经常会使用 ControlTemplate创建新的控件模板或者修改现成的控件模板，使用项目的UI具有独特性。
如何使用Blend创建和修改 ControlTemplate既是制作自定义按钮的关键。
首先用VS2010建立一个工程，命名为CustomButton，建好后如图所示：
在Solution Explorer下的MainPage.xaml上点击鼠标右击，这时选择Open in expression blend..
我们计划创建一个简单的按钮，现在从左边工具栏选中矩形框，在主设计窗口画一个矩形框，使用Radius修改矩形框边缘
为圆形。该矩形框是为了Button的模板控件做基础使用的。
然后在主设计窗口选中该矩形控件，点击鼠标右键，选中“Make Into Control..."选项，
这时选择可见：
保持默认的模板名字“ButtonStyle1”，点中“Control Type”中的Button选项，然后按“OK”。
这样一个简单的ControlTemplate已经创建完了。我们打开Objects and Timeline看看当前控件模板组成信息，
从下图我们可以看到，该Button模板，是由一个矩形控件和ContentPresenter组成的。
这里模板默认的按钮颜色为白色，我们可以修改Rectangle的属性Brushes，以便在程序中动态的改变按钮的背景。
在Brushes的Fill中。点击左键，选择Template Binding的Background，这样就把模板的背景绑定到按钮的Background上了。
（如果不需要自己定义的一些图片作为背景，可以不用绑定，直接修改Brushes的颜色即可）
但是这时还没完成，因为该模板没有任何的视觉效果和事件。也就是说，在这个控件模板中，缺少VSM状态信息。
这里在Blend中的States菜单栏中，可以轻松的控制控件的VSM状态，下面，我们添加一些简单的状态效果。
首先，选中新创建的Button控件，然后打开左边菜单栏States，如果没有发现该Tab，可以在Blend的Window菜单选中States就会出现了。
在States菜单下，Normal状态为按钮正常时的样式，为了实现点钟按钮后，按钮有放大的效果，首先我们需要将Pressed状态下
按钮变大，这里我们可以修改属性的Margin一栏，修改为Margin（-3，-3，-3，-3）：
其实通过修改VSM状态可以实现更为绚丽复杂的效果，但我们只选取点击按钮变大作为例子。
保存，回到VS2010工程，在MainPage.xaml页面下，可以看到
1 <phone:PhoneApplicationPage.Resources>
2 <Style x:Key="ButtonStyle1" TargetType="Button">
3 <Setter Property="Template">
4 <Setter.Value>
5 <ControlTemplate TargetType="Button">
6 <Grid>
7 <VisualStateManager.VisualStateGroups>
8 <VisualStateGroup x:Name="CommonStates">
9 <VisualState x:Name="Normal"/>
10 <VisualState x:Name="MouseOver"/>
11 <VisualState x:Name="Pressed">
12 <Storyboard>
13 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="rectangle">
14 <DiscreteObjectKeyFrame KeyTime="0">
15 <DiscreteObjectKeyFrame.Value>
16 <Thickness>-3</Thickness>
17 </DiscreteObjectKeyFrame.Value>
18 </DiscreteObjectKeyFrame>
19 </ObjectAnimationUsingKeyFrames>
20 </Storyboard>
21 </VisualState>
22 <VisualState x:Name="Disabled"/>
23 </VisualStateGroup>
24 </VisualStateManager.VisualStateGroups>
25 <Rectangle x:Name="rectangle" Fill="{TemplateBinding Background}" RadiusY="20" RadiusX="20" Stroke="White"/>
26 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
27 </Grid>
28 </ControlTemplate>
29 </Setter.Value>
30 </Setter>
31 </Style>
32 </phone:PhoneApplicationPage.Resources>
这个既是我们刚刚创建的按钮模板，在面的语句中添加Name="ButtonTest",以及背景图：
1 <!--ContentPanel - place additional content here-->
2 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
3 <Button Content="Button" Height="96" Margin="3,134,0,0" Style="{StaticResource ButtonStyle1}" VerticalAlignment="Top"/>
4 </Grid>
修改如下：
1 <!--ContentPanel - place additional content here-->
2 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
3 <Button Content="Button" Height="96" Margin="3,134,0,0" Style="{StaticResource ButtonStyle1}" VerticalAlignment="Top">
4 <Button.Background>
5 <ImageBrush ImageSource="test.jpg"/>
6 </Button.Background>
7 </Button>
8 </Grid>
添加此图片到工程，
命名为test.jpg，F5运行，效果如下：
这样一个简单的自定义按钮就做好了，我们还可以通过VSM做成更为漂亮和满足用户需要的按钮，此例子只是给大家
一个思路，教大家如何制作自己需要的按钮。此文还有很多不足之处，希望大家能指出。