WP7开发学习（4）：Style样式的四种使用

Posted on 2012-03-23 11:21 祥叔阅读(4610) 评论(6) 编辑收藏举报

在Web开发中，我们通过CSS来控制页面元素的样式，一般常用三种方式：

1. 内联样式表：即直接设置元素的style属性

2. 嵌入样式表：即在html页面上写一个<style>……..</style> 代码段，然后设置元素的class 属性

3. 外部样式表：即写一个独立的.css 文件，然后再html页面上引入该文件，然后设置元素的class属性

具体如何操作，这里就不说了。不懂的去百度一把，绝对会出现一大坨。

同样的，在WP7开发中，也有类似以上几种方式设置控件的样式——开发平台可以千差万别，编程思想都是大同小异的。

一，内联样式：

直接设置控件的 Height 、Width、Foreground、HorizontalAlignment、VerticalAlignment 等属性。以设置一个Botton控件的样式为例，如：

这种方式比较简单，但是代码不能复用。

二，嵌入样式：

在页面<phone:PhoneApplicationPage.Resources> 节点下添加样式，然后在需要的控件上设置Style 属性。还是以上面那个Botton控件为例。

1，在页面<phone:PhoneApplicationPage.Resources>节点下添加一个Key值叫“BtnStyle”的样式

  <phone:PhoneApplicationPage.Resources>
        <Style x:Key="BtnStyle"  TargetType="Button">
            <Setter Property="Height" Value="72" />
            <Setter Property="Width" Value="150" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Background" Value="Blue" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Top" />
        </Style>
    </phone:PhoneApplicationPage.Resources>

2，设置Botton 控件的Style 属性为 "{StaticResource BtnStyle}"

解释一下，TargetType="Button" 指定了该样式适用于Botton类型的控件，Key="BtnStyle" 如果不设置该值，则该样式将适用于所有的Botton 控件，而设置了其值为“BtnStyle”，则只用于设置了 Style="{StaticResource BtnStyle}" 的Botton控件。这就好比CSS中的元素选择器和类选择器。

这种方式可以使得单个页面上的控件能够复用一个样式，比第一种方式面向对象了一步。

三，外联样式：

1,新建一个.xaml资源文件,如/Resources/BtnStyle.xaml

2, 在BtnStyle.xaml文件里编写样式代码

BtnStyle.xaml:
<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:System="clr-namespace:System;assembly=mscorlib">
    <Style x:Key="BtnStyle" TargetType="Button">
        <Setter Property="Height" Value="72" />
        <Setter Property="Width" Value="150" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Background" Value="Blue" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Top" />
    </Style>
</ResourceDictionary>

3，在App.xaml文件的<Application.Resources>

或者普通页面的<phone:PhoneApplicationPage.Resources>

或者用户控件的 <UserControl.Resources> 节点下

添加相应的ResourceDictionary，配置引用BtnStyle.xaml：

app.xaml:
    <Application.Resources>

         <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/BtnStyle.xaml"/>
            
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

    </Application.Resources>
或者MainPage.xaml：
<phone:PhoneApplicationPage.Resources>

        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/BtnStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

</phone:PhoneApplicationPage.Resources>

<ResourceDictionary.MergedDictionaries>节点下可以添加多个资源文件

这种方式相比前面两种使得样式和结构又更进一步分离了。

在App.xam引用，是全局的，可以使得一个样式可以在整个应用程序中能够复用。在普通页面中引用只能在当前页面上得到复用。

4，设置Botton 控件的Style 属性为"{StaticResource BtnStyle}" 和上面的一样。

四，用C#代码动态加载资源文件并设置样式

1，新建资源文件：同上面的1，2两步。

2，在后台编写代码

ResourceDictionary resourceDictionary = new ResourceDictionary();

Application.LoadComponent(resourceDictionary, new Uri("/PhoneApp1;component/Resources/BtnStyle.xaml", UriKind.Relative));
Application.Current.Resources.MergedDictionaries.Add(resourceDictionary);
//以上几行代码表示将我们自定义的样式加载到应用程序的资源字典中。
this.btnDemo.SetValue(Button.StyleProperty, Application.Current.Resources["BtnStyle"]);