windows phone (12) 小试自定义样式

原文:windows phone (12) 小试自定义样式

样式在BS开发中经常用到，在wp中系统也提供了解决办法，就是对设置的样式的一种资源共享，首先是共享资源的位置，它是在App类中，之前我们已经有介绍到设置公共属性存放临时数据，可参考windows phone 三种数据共享的方式(8)，同样共享的样式我们也在app类中实现，系统在App.xaml文件中已经给我们提供了Resources集合：

<!--应用程序资源-->
    <Application.Resources>
        
    </Application.Resources>

 我们只需要在上面标签中加入我们自定义的样式即可，适用于此资源的对象是有FrameworkElement派生的类，此类派生类的列表如下：

 

Microsoft.Internal.Pivot.Controls.VisualTreeGraft
        System.Windows.Controls.Border
        System.Windows.Controls.ContentPresenter
        System.Windows.Controls.Control
        System.Windows.Controls.DrawingSurface
        System.Windows.Controls.Image
        System.Windows.Controls.ItemsPresenter
        System.Windows.Controls.MediaElement
        System.Windows.Controls.MultiScaleImage
        System.Windows.Controls.Panel
        System.Windows.Controls.Primitives.Popup
        System.Windows.Controls.RichTextBlock
        System.Windows.Controls.RichTextBlockOverflow
        System.Windows.Controls.TextBlock
        System.Windows.Controls.Viewbox
        System.Windows.Controls.WebBrowser
        System.Windows.Documents.Glyphs
        System.Windows.Shapes.Shape

 

 以上类或者以上类中派生的类都可以使用此共享资源，这里是指自定义样式，接下来按照上一篇内容的做法，我们给内容区域的Textblock设置前景色，所以在App.xaml 自定义样式可以这样：

<!--应用程序资源-->
    <Application.Resources>
        <LinearGradientBrush x:Key="lgBrush">
            <GradientStop Offset="0" Color="AliceBlue"></GradientStop>
            <GradientStop Offset="1" Color="BurlyWood"></GradientStop>
        </LinearGradientBrush>
    </Application.Resources>

 x:Key特性是唯一标示该资源的一个键名，在共享资源中必须唯一；自定义样式定义好了，怎么使用那，比较繁琐的做法是这样，不提倡：

<TextBlock x:Name="tbContent" Text="显示样式" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Foreground>
                <StaticResource ResourceKey="lgBrush"></StaticResource>
            </TextBlock.Foreground>
        </TextBlock>

 比较常用的书写是这样：

<TextBlock x:Name="tbContent" Text="显示样式" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{StaticResource lgBrush}">
            </TextBlock>

 可以看到这里有个大括号，它就是xaml标记扩展，在xaml标记扩展中是不能使用引号的，比如这里的lgBrush不能使用引号；上面两种方法实现的效果一样：即

此外我们还可以看到MainPage类在xaml文件中已经定义了Foreground,但是在tbContent中我们依然看到了我们自定义的颜色，这说明样式设置的优先级高于继承来的样式的优先级；以上两种方法是实现在xaml文件中对样式的使用，我们也可以在隐藏文件（.cs）进行访问，但是必须是在构造函数完成之后，例如我们可以这样访问刚刚定义的样式：

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace ShareStyle
{
    public partial class MainPage : PhoneApplicationPage
    {
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
            LinearGradientBrush lgBrush = (LinearGradientBrush)this.Resources["lgBrush"];
            TextBlock tb = new TextBlock();
            tb.Name = "tbName";
            tb.VerticalAlignment = VerticalAlignment.Center;
            tb.HorizontalAlignment = HorizontalAlignment.Center;
            tb.Text = "隐藏代码实例化的";
            tb.Foreground = lgBrush;
            this.ContentPanel.Children.Add(tb);
           
        }
    }
}

如果想使用该样式的话，就像上面的代码实例化样式，并设置Textblock的前景色为lgBrush，还有另一种写法是将自定义样式中的x:Key改为x:Name，隐藏文件中设置前景色就可以是这样：（此处有疑问：根据教材中的说法，我怎么也获取不到设置的颜色）

tb.Foreground = lgBrush;

 不需要实例化该自定义颜色，需要注意的是如果使用x:Name资源，该名称必须是在xaml文件中保持唯一性；

---

 上面的案例是说明怎么自定义某个属性（Foreground ）的样式，下面是为特定的元素定义样式集合

<phone:PhoneApplicationPage>
<phone:PhoneApplicationPage.Resources>
        <Style x:Key="tbStyle" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center"></Setter>        </Style>
    </phone:PhoneApplicationPage.Resources>
</phone:PhoneApplicationPage>

 上面实例代码中x:Key表示键名，在使用该样式的时候会用到，TargetType是指此样式的使用对象元素，Style标签中Setter标签是设置适用此样式的元素属性；

实例代码：

<phone:PhoneApplicationPage>
    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="tbStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="Foreground">
                <Setter.Value>
                    <LinearGradientBrush>
                        <GradientStop Offset="0.2" Color="Brown"></GradientStop>
                        <GradientStop Offset="0.7" Color="DarkBlue"></GradientStop>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>
</phone:PhoneApplicationPage>

 在TextBlock元素中的使用xaml标记扩展得到该样式：

<TextBlock x:Name="tbContent" Text="显示样式" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource tbStyle}"  />

 得到的效果是这样子的：