(译)创建自定义WP7主题-简单的主题实现

原文出处:http://www.windowsphonegeek.com/articles/Creating-WP7-Custom-Theme-ndash-Basic-Theme-Implementation

我将要开始一个长度为3篇文章的系列-“创建WP7自定义主题“,在这个系列中我将会解释关于Silvelight for windows phone 7 主题你所需要知道的一切。首先我会从一个简单的基于颜色改变的例子开始,然后我会验证如何实现包含一些自定义控件模板和其他自定义逻辑的复杂的主题,最后我会和你分享当考虑到自定义主题的时候你需要考虑到什么。

这是第一篇文章,因此我在这里说一下如何在 SL FOR WP7中实现简单的自定义程序主题。

当你创建一个复杂的带有许多控件的WP7程序,在所有主题中整个UI保持一致是必要的。这也是WP7程序验证需求的一个重要部分。

你有如下几个选择:

1.创建自定义程序主题

当你想让你的程序在不同的主题下看起来相同(即主题无关),创建一个自定义程序主题就成了一个好的解决方案。另一个好处就是在这种情况下,不管系统主题如何你的控件会看起来一致并且颜色不变。

注:添加一个自定义主题到你的程序会覆盖默认的主题。

2.使用默认的主题资源:这样的程序就会根据当前的手机主题而有不同的效果

在这种情况下,如果你使用一些SDK提供的默认的控件,比如:Button, listbox, panorama,Pivot 等等,你不必做任何事情你的程序就会保持一致,除了根据当前手机的主题而有不同的外观。默认的情况下,windows phone 使用resource dictionary 作为主题资源-一个带有键的可以用在XAML 和CODE2个里的Objects.

你可以在这里看到更多。

http://www.windowsphonegeek.com/tips/-wp7-theme-resources-tips

让我们开始吧

现在让我们开始创建一个自定义主题。首先要提到的就是所有的wp7 主题资源都在如下的文件夹中(X64)

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design

如下是Design这个文件夹的组成。75-0

一般来说,你需要修改的最终要的文件如下:

1)ThemeResource.xaml

这个文件包含了所有的SolidColorBrushes, Colors 和 TextBlock资源。

在这里你可以找到一个可用的资源列表 Theme Resources for Windows Phone

2)System.Windows.xaml

这是一个更为复杂的文件,他包含了所有默认的SDK控件的TextBox, ListBox, Button等等的Styles/ControlTemplates。

注:无论你对控件的样式做了怎样的修改,一定要保持最终的结果适合Metro设计风格。比如更改ToggleButton 或者 ScrollViewer的外观可能就是一个不太好的主意,因为你的用户还期待着这些控件是WP7 Metro的风格。然而你可以随意的改变颜色,等等。

3)PortableUserInterface.Metro.CompositeFont

这个文件包含了设计到Metro界面的FontFamily, FontSize等等的重要信息。我建议你最好认真的对待这个文件。尽可能不要去修改它。

创建一个简单的自定义程序主题

遵循如下步骤就可以创建一个简单的自定义主题:

1)创建一个例子Windows phone Application 并且添加一个新的自定义主题到里面。

2)将ThemeResource.xaml拷贝到你的WP7程序并且将资源改变成你喜欢的样子。你是否创建一个独立的主题文件夹倒不是那么重要,或者你也可以将文件拷贝到根目录。但是我们还是建议你把主题文件放到一个独立的文件夹中。在这个例子中,我们将要创建 CustomTheme文件夹并且将要把文件拷贝到这里。

注1:文件的名字不重要,重要是不要忘记拷贝这个文件的所有内容。如果你喜欢的话,可以随意更改文件的名字。

注2:你仅仅可以修改他们中的一些。

注3:不要修改x:key 和x:name的值。

3)改变资源:改变一些颜色,画刷等等来形成一个自定义的外表。在我们的例子中,我们将会改变如下的颜色:

PhoneBackgroundColor-PhoneBackgroundBrush的基本颜色

PhoneForegroundColor-PhoneForegroundBrush的基本颜色

PhoneAccenetColor-PhoneAccentBrush的基本颜色

75-10 

注:你可以在这里找到可用的资源的清单:Theme Resources for Windows Phone

使用 Visual Studio

你也可以使用VS自己写下如下的例子:

<!-- Pink -->
<Color x:Key="PhoneAccentColor">#FFF50C98</Color>   
<!-- Modified Color -->
<Color x:Key="PhoneForegroundColor">#FF84F4F9</Color>   
<!-- Modified Color -->
<Color x:Key="PhoneBackgroundColor">#FF39264E</Color> 

 使用Expression Blend

另外一个选择是使用Expression Blend 的Visual Designer来使你可以轻松地自定义每一个控件的外表,你也可以以一种简单的方式修改所有资源的类别并且编辑ControlTemplate。在创建主题的时候Blend是要更好的,因为你可以立刻地在设计器中看到效果。

3.1 在Visual Studio 中右击,并选择 "Open in Expression Blend"

75-1

3.2 你将会看到一个安全信息的提示,按下 Yes.

75-2

3.3 打开 ExpressionBlend中的Resources 标签,并且选择Resources.xmal(这个是你自定义的资源文件的名字)

75-3

3.4 通过恰当的颜色选择器修改期望的颜色。

75-4

最终生成的代码应该如下:

<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"> 
<!-- Another resourced here!-->
  <!-- Pink -->
  <Color x:Key="PhoneAccentColor">#FFF50C98</Color>   
  <!-- Modified Color -->
  <Color x:Key="PhoneForegroundColor">#FF84F4F9</Color>   
  </ResourceDictionary>   
  <!-- Modified Color -->
  <Color x:Key="PhoneBackgroundColor">#FF39264E</Color>   
</ResourceDictionary> 

3.5保存改变,并且返回到Visual Studio。你将要另外看到一个消息框,询问你是否要保存你在Blend中所作的改变,点击Yes to All.

75-5

4.打开app.xaml并且添加如下的代码

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

注1:这段代码将会覆盖默认的样式!

注2:确保资源文件路径正确,并且编译通过。更多的关于ResourceDictionary的请查看:

All about ResourceDictionary in WP7

5)现在你已经成功的重写了样式。

下面是默认的 SDK控件和SL FOR WP7 toolkit 控件现在看起来的效果。

75-11  75-7

以上就是创建一个简单的自定义程序主题的全部内容了。

你可以在这里找到全部代码:

posted @ 2011-07-24 12:39  jeekun  阅读(4205)  评论(3编辑  收藏  举报