技术开发 频道

Windows phone 7之样式与模板

  【IT168技术】就像网页配合CSS一样,XAML元素结合Style可以使Silverlight页面变得绚丽多彩。Silverlight的最大吸引力就是无论你想做什么格式的,什么效果的页面你都可以实现,绝对没有不可能。想使页面变得绚丽,简单Style就可以,想使页面变得特性十足或是千变万化,那就学好模板,想要使页面动起来,Storyboard可以帮助你。

  样式(Style)、模板(Template)很少直接定义在控件或者页面元素内部,一般都定义在外部资源文件中,这样不但便于维护,更便于重用。什么叫资源,凡是放在页面或控件Resource节点下,或是放在独立资源文件中的ResourceDictionary节点下的全是资源,Style和Template都属于资源。

  将Style定义在App.xaml文件中,看下面的代码

<Application
    x:Class
="StyleAndTemplate.App"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone
="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell
="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">

    
<!--Application Resources-->
    
<Application.Resources>
        
<Style x:Key="MyTextBlock" TargetType="TextBlock">
            
<Setter Property="FontSize" Value="50"/>
            
<Setter Property="Foreground" Value="Blue"/>
        
</Style>
    
</Application.Resources>

    
<Application.ApplicationLifetimeObjects>
        
<!--Required object that handles lifetime events for the application-->
        
<shell:PhoneApplicationService
            Launching
="Application_Launching" Closing="Application_Closing"
            Activated
="Application_Activated" Deactivated="Application_Deactivated"/>
    
</Application.ApplicationLifetimeObjects>

</Application>

  如上面的代码,只要将Style写在Application.Resources节点下

  将Style定义在单独的资源文件中,首先需要在项目中添加一个xaml后缀的文件(MyResource.xaml),在文件中写入如下代码

<ResourceDictionary
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone
="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell
="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
    
    
<Style x:Key="MyTextBlock" TargetType="TextBlock">
        
<Setter Property="FontSize" Value="50"/>
        
<Setter Property="Foreground" Value="Blue"/>
    
</Style>
</ResourceDictionary>

  看上面的文件,ResourceDictionary节点写添加i几个命名空间,前三个是必须的,第一个字默认命名空间,资源的象征,第二个用来定义唯一标示,没有他,无法定义和引用资源,第三个是引入控件,用于填入TargetType属性(下面说明他的重要性)。定义好了资源文件还需要在App.xaml文件中注册该资源文件,在App.xaml中写入如下代码

<Application.Resources>
        
<ResourceDictionary>
            
<ResourceDictionary.MergedDictionaries>
                
<ResourceDictionary Source="MyResource.xaml"/>
            
</ResourceDictionary.MergedDictionaries>
        
</ResourceDictionary>
    
</Application.Resources>

  这样在页面中,就可以使用该Style了,MainPage.xaml中添加一个TextBlock,并给他添加样式,写法:,StaticResource是静态资源的标示,所有定义在页面级、App.xaml中或者定义在外部资源中的都是静态资源,还有一个RelativeSource,是定义在某元素内部时,父子控件之间相互使用的资源,没人使用,不用研究。

  上述两种方式运行效果是一样的,如下图所示

  样式(Sytle)

  Style主要包含两种属性和一个子节点

  x:Key属性是Style的唯一标示,必须有且不能重复,为控件设置Style时使用,格式Style="{StaticResource Key}"

  TargetType属性,该属性标示Style应用于何种控件,所有Style只用应用于一种控件,并不是所有的资源都是这样,比如SolidColorBrush,可以用于任何控件的颜色属性。这个属性也是必须有的,加入上面说的第三个命名空间,就可使在文件中使用WP7的基础弓箭了,这样输入TargetType时就会自动提示,如果那个命名空间,就不能使用WP7基础控件,所以填入内容使也会报错,这就是他必要的原因,如果使用Toolkit,只要将应用添加项目中,并在资源文件中加以命名空间就行了。

  子节点,有人说这也是Style的一个属性,我不反对,但是他的确是只能以子节点的方式使用。

  Setter可是设置控件个任何属性,也就是一个控件可是完全由Style定制。Setter有两个属性,Property,用来填入属性名,Value,用来填入属性值,也就是说一个Setter设置一个属性。

  上述说的三个属性时Style的必须属性,缺一不可,x:Key是所有资源的必须属性。

  不但可以使用Style为控件定义样式,一些任何控件都具有的属性可以放在Resource根节点下,而不必放在Style的Setter中,比如SolidColorBrush可以设置颜色、FontFamily可以设置字体,他们不放在Style中。

  样式是具有优先级的,如果设置使用Style和属性设置重复后,只有一个起作用,那么谁起作用呢,一般分三个等级,1、默认样式,没有为控件设置任何样式,则使用默认样式,2、Style设置的样式,设置Style后将覆盖默认样式,3、属性中直接设置,这种方式优先级最高,他优先起作用。

  至于Style都可以设置哪些属性,在TargetType之后,在你写Setter时,会有自动提示,只有找到自己想要的就行了。

  简单说一下模板(Template)

  模板有很多种,我只说两种功能较多模板,其他的,童鞋们自己体会吧,都是一样的。什么是功能较多模板,就是可以应用到任何可以使用模板的控件上

  DataTemplate

  这个模板可以说是功能较多的,可以用来设置控件的内容(ContentTemplate),也可以设置布局(ItemTemplate),下面以Button为例说一下他的用法

  在资源中定义一个DataTemplate

<DataTemplate x:Key="DataKey">
        
<StackPanel>
            
<TextBlock Text="Templage"/>
            
<TextBlock Text="I'm a Template"/>
        
</StackPanel>
    
</DataTemplate>

  在页面中放置一个Button:

<Button Margin="10,120,0,0" VerticalAlignment="Top" Width="259" ContentTemplate="{StaticResource DataKey}">

  运行效果如下:

  看到模板的作用了吗,这就是我之前说的为什么silverlight是变化无穷的,因为你可以用一个模板将空间做成任何你想要的样子

  ControlTemplate

  ControlTemplate一般用Gid开定义控件的布局,用VisualState控制状态,一般是动画,ContentControl用来显示Content

  我们为了简单,从Blend复制一个Button的完整Style

<Style x:Key="MyButtonStyle" TargetType="Button">
        
<Setter Property="Background" Value="Transparent"/>
        
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        
<Setter Property="Padding" Value="10,3,10,5"/>
        
<Setter Property="Template">
            
<Setter.Value>
                
<ControlTemplate TargetType="Button">
                    
<Grid Background="Transparent">
                        
<VisualStateManager.VisualStateGroups>
                            
<VisualStateGroup x:Name="CommonStates">
                                
<VisualState x:Name="Normal"/>
                                
<VisualState x:Name="MouseOver"/>
                                
<VisualState x:Name="Pressed">
                                    
<Storyboard>
                                        
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                        
</ObjectAnimationUsingKeyFrames>
                                        
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        
</ObjectAnimationUsingKeyFrames>
                                        
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        
</ObjectAnimationUsingKeyFrames>
                                    
</Storyboard>
                                
</VisualState>
                                
<VisualState x:Name="Disabled">
                                    
<Storyboard>
                                        
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        
</ObjectAnimationUsingKeyFrames>
                                        
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        
</ObjectAnimationUsingKeyFrames>
                                        
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        
</ObjectAnimationUsingKeyFrames>
                                    
</Storyboard>
                                
</VisualState>
                            
</VisualStateGroup>
                        
</VisualStateManager.VisualStateGroups>
                        
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        
</Border>
                    
</Grid>
                
</ControlTemplate>
            
</Setter.Value>
        
</Setter>
    
</Style>

  这是系统默认的Button样式,我没设置控件的样式时,可以修改系统默认的样式,这样效率更高些。

  我们看到Style中包含一个ControlTemplate,VisualState设置了点击时的样式和禁用时的样式,加上默认的样式,默认Button按钮有三种形态,现在我改变Pressed的状态动画,改变背景色为Red,将这个Style设置给一个Button

<VisualState x:Name="Pressed">
                                    
<Storyboard>
                                        
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                        
</ObjectAnimationUsingKeyFrames>
                                        
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                        
</ObjectAnimationUsingKeyFrames>
                                        
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        
</ObjectAnimationUsingKeyFrames>
                                    
</Storyboard>
                                
</VisualState>

  运行程序,点击Content为button的按钮,效果如下

  上面我简单的改变了一下Pressed状态的动画,如果你想得到更加丰富的效果,可以自己定制。

  ContentControl是用来显示内用的控件,所有继承自ContentControl的控件模板中都有这个属性,没有就无法显示内容了,只剩个空模板了。

  在给初学者说一下TemplateBinding,他是用来绑定属性的,如ContentControl中的Content="{TemplateBinding Content}",意思是ContentControl的Content属性显示的是控件的Content属性的值,也就是Button的值"button"。他跟Binding不一样,Binding是绑定的数据,如一个对象中的属性。Person.Name,后面章节马上介绍Binding,童鞋们别急。

0
相关文章