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做成更为漂亮和满足用户需要的按钮,此例子只是给大家

一个思路,教大家如何制作自己需要的按钮。此文还有很多不足之处,希望大家能指出。

本文来自east520的博客,原文地址:http://www.cnblogs.com/east520/archive/2011/05/31/windowsphone7.html


分享给朋友:
您可能感兴趣的文章:
随机阅读: