创建自定义Windows phone 样式（二）-mango下的实现

有关mango前版本的主题设置可见我前一篇文章：（译）创建自定义WP7主题-简单的主题实现

最近开始做mango下的开发，发现以前的自定义主题方法在这里行不通了（感谢@阿甘.Net），主要的问题就是在于是否覆盖系统默认样式的问题上。

做两个项目加以比较，首先新建一个7.0的项目。

MainPage.xaml代码如下：

<Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>



        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        </StackPanel>



        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>

    </Grid>

什么都不修改，直接运行程序，效果图如下：

为了实现修改主题，我将C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design 里的ThemeResource.xaml拷贝到项目中，然后在在App.xaml中添加

<Application.Resources>       

　　<ResourceDictionary>           

　　<ResourceDictionary.MergedDictionaries>               

　　　　<ResourceDictionary Source="CustomTheme/ThemeResources.xaml"/> 

　　</ResourceDictionary.MergedDictionaries>       

　　</ResourceDictionary>   

</Application.Resources> 

我们打开ThemeResource.xaml中，查找默认的TextBlock的样式定义。

<Style x:Key="PhoneTextNormalStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}" />



<Style x:Key="PhoneTextBlockBase" TargetType="TextBlock">

  <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>

  <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>

  <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>

  <Setter Property="Margin" Value="{StaticResource PhoneHorizontalMargin}"/>

</Style>



<SolidColorBrush x:Key="PhoneForegroundBrush" Color="{StaticResource PhoneForegroundColor}"/>



<Color x:Key="PhoneForegroundColor">#FF000000</Color>

 然后修改字体的颜色，

改为：

<!-- 100 percent White -->

<Color x:Key="PhoneForegroundColor">#FF2FCC2F</Color>

其他不变，再次运行程序

可以看到改变后的效果。注意这里我没有自己添加新的样式，而是直接修改了系统已经定义好KEY的样式，结果就会实现了自定义样式。

但是在芒果版本中，这种方法被微软认定是一个BUG，因此在7.1的版本对他进行了修复。

我更改一下项目的属性，Taget Windows Phone Version改为7.1，这时候打开MainPage.xaml发现在设计视图并没有变化，但是运行之后发现字体又恢复白色了。

以上就是发现的一处变化，除此之外，你仍然可以创建自己的样式。

而且因为7.1 的silverlight for windows phone是基于SL4的，因此加入了隐式样式，即声明样式的时候不指定key，只有一个targetType。

还是刚才那个例子，我们重新定义一个样式；

<Style TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}" >

        <Setter Property="Foreground" Value="#FF2FCC2F"/>

</Style>

并且修改，MainPage.xaml中TextBlock，取消显示指定样式；

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" />

            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" />

</StackPanel>

这时候重新运行程序，效果如下：

另外，如果觉得xaml指定主题太过死板，想通过后台代码，动态改变的话，可以用如下方法：

var dictionaries = Resources.MergedDictionaries;

            dictionaries.Clear();

            var themeStyles = new ResourceDictionary

            {

                Source = new Uri(customTheme, UriKind.Relative)

            };

dictionaries.Add(themeStyles);