有关mango前版本的主题设置可见我前一篇文章:(译)创建自定义WP7主题-简单的主题实现
最近开始做mango下的开发,发现以前的自定义主题方法在这里行不通了(感谢@阿甘.Net),主要的问题就是在于是否覆盖系统默认样式的问题上。
做两个项目加以比较,首先新建一个7.0的项目。
MainPage.xaml代码如下:
<Grid x:Name= "LayoutRoot" Background= "Transparent" > |
<RowDefinition Height= "Auto" /> |
<RowDefinition Height= "*" /> |
<!--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}" /> |
<!--ContentPanel - place additional content here--> |
<Grid x:Name= "ContentPanel" Grid.Row= "1" Margin= "12,0,12,0" ></Grid> |
什么都不修改,直接运行程序,效果图如下:
为了实现修改主题,我将C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design 里的ThemeResource.xaml拷贝到项目中,然后在在App.xaml中添加
<ResourceDictionary.MergedDictionaries> |
<ResourceDictionary Source= "CustomTheme/ThemeResources.xaml" /> |
</ResourceDictionary.MergedDictionaries> |
我们打开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}" /> |
<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" /> |
并且修改,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" /> |
这时候重新运行程序,效果如下:
另外,如果觉得xaml指定主题太过死板,想通过后台代码,动态改变的话,可以用如下方法:
var dictionaries = Resources.MergedDictionaries; |
var themeStyles = new ResourceDictionary |
Source = new Uri(customTheme, UriKind.Relative) |
dictionaries.Add(themeStyles); |