转载于
对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做成更为漂亮和满足用户需要的按钮,此例子只是给大家
一个思路,教大家如何制作自己需要的按钮。此文还有很多不足之处,希望大家能指出。