建立自訂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);