上一篇，我們介紹了設(shè)備方向，以及在用戶改變他們的設(shè)備方向時(shí)如何適應(yīng)這些改變。本文，我們來看看在他們更改了電話的主題和顏色后我們?cè)撟鲂┦裁础?/p>

深色與淺色主題

如果你還沒看到，可以將你電話的主題由深改為淺，并設(shè)置一個(gè)強(qiáng)調(diào)色。來看一下相同的應(yīng)用程序使用了兩個(gè)不同主題：

強(qiáng)調(diào)色 

你的用戶可以設(shè)置一個(gè)系統(tǒng)級(jí)的強(qiáng)調(diào)色。操作系統(tǒng)提供了10種大方明快的顏色供選擇。這些顏色不僅會(huì)在電話的起始屏幕中得到充分利用，還可以供你的應(yīng)用程序來使用。來看一下這些顏色：

考慮默認(rèn)值

當(dāng)創(chuàng)建應(yīng)用程序時(shí)，經(jīng)常會(huì)去改變某些東西的顏色。我很支持這種做法。這隨你。不過你改的越多，你就越想將所有內(nèi)容都改掉。我不建議你在白色背景下使用深色文字（或者相反）。我是說如果你想有意讓某些東西變?yōu)榘咨?，你要仔?xì)考慮如果電話的主題變?yōu)榘咨珪r(shí)它將會(huì)變?yōu)槭裁礃幼樱赡軙?huì)看不到哦）。幸好，有一種簡(jiǎn)單的方法可以處理它，叫做Expression Blend 4。

Expression Blend 4中的設(shè)備標(biāo)簽

首先，在Expression Blend中打開項(xiàng)目。最簡(jiǎn)單的方法是在Visual Studio中右擊此項(xiàng)目，選擇“Open In Expression Blend…”

打開后，在Blend的UI中有一個(gè)標(biāo)簽叫“Device”，看起來像這樣：

這個(gè)標(biāo)簽允許你預(yù)覽右側(cè)設(shè)計(jì)層中不同的主題和強(qiáng)調(diào)色。這我們開始在程序中使用這些顏色時(shí)非常重要。例如，我想在我的程序中使用一個(gè)帶顏色的背景，顏色讓用戶指定。為了做到這一點(diǎn)，我用了Expression Blend 4的另一個(gè)出色的特性：顏色資源標(biāo)簽。

顏色資源

在你對(duì)這批文章寫“為什么我非得用Expression Blend的呢？我是開發(fā)人員！”這樣的評(píng)論之前讓我告訴你：所有的這一切都可以用Visual Studio 2010完成。但那非常非常困難。在采用復(fù)雜方法并不會(huì)帶來更多裨益時(shí)我更傾向于用簡(jiǎn)單方法實(shí)現(xiàn)。

在你沒有覆蓋它們時(shí)Windows Phone 7會(huì)使用一套默認(rèn)顏色集，在很多情況下，認(rèn)識(shí)這些顏色對(duì)你很有益。在下面的圖片中，可以看到PhoneAccentColor和PhoneBackgroundColor根據(jù)我在設(shè)備標(biāo)簽中選擇的主題和強(qiáng)調(diào)色進(jìn)行改變。第一個(gè)是深/藍(lán)，第二個(gè)是淺/橙。

在程序中選擇這些顏色后，它允許我們綁定到特定的系統(tǒng)值，當(dāng)用戶改變主意時(shí)，程序可以迅速的反映出改變。在下面的代碼中，你會(huì)看到我在程序中添加了一個(gè)使用了漸進(jìn)色的矩形，從PhoneBackgroundColor過渡到PhoneAccentColor。我還設(shè)置了應(yīng)用程序的標(biāo)題，同樣利用了電話的強(qiáng)調(diào)色。

代碼：

<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--> 
        <Rectangle Stroke="Black" Grid.RowSpan="2"> 
         <Rectangle.Fill> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <GradientStop Color="{StaticResource PhoneBackgroundColor}" Offset="0"/> 
           <GradientStop Color="{StaticResource PhoneAccentColor}" Offset="1"/> 
          </LinearGradientBrush> 
         </Rectangle.Fill> 
        </Rectangle> 
 
        <!--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="BLANKENSOFT" Style="{StaticResource PhoneTextNormalStyle}"/> 
            <TextBlock x:Name="PageTitle" Text="system theming" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"> 
             <TextBlock.Foreground> 
              <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/> 
             </TextBlock.Foreground> 
            </TextBlock> 
        </StackPanel> 
 
        <!--ContentPanel - place additional content here--> 
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
   <TextBlock Height="601" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="0,6,0,0" x:Name="textBlock1" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis turpis sit amet diam elementum molestie. Cras quis massa ante. Morbi sit amet arcu quam, non dignissim nibh. Nunc lectus leo, ornare quis imperdiet id, fringilla vel diam. Proin vitae augue non sem sollicitudin imperdiet ut quis diam. Nulla vitae nulla eros. Curabitur mauris justo, eleifend eu sodales ac, blandit vitae mauris. Pellentesque erat lorem, euismod at sodales eget, sollicitudin sed velit. Praesent est sapien, hendrerit tempor tincidunt quis, posuere ac nunc. Nam odio nisl, feugiat eget blandit sit amet, dapibus id tellus. Sed blandit nisi nunc. Aliquam fermentum justo tristique risus porta sollicitudin. Aenean aliquam congue ornare. Curabitur blandit mi quis odio convallis adipiscing." VerticalAlignment="Top" Width="468" /> 
  </Grid> 
    </Grid> 

這是上面兩個(gè)程序的界面（這兩個(gè)截圖除了主題和顏色之外沒有任何區(qū)別）：

下載示例代碼

原作者：Jeff Blankenburg    譯者：金山崟霸

中文來源：http://www.cnblogs.com/porscheyin/archive/2010/11/23/1885060.html

英文來源：http://www.jeffblankenburg.com/2010/10/05/31-days-of-windows-phone-day-5-system-theming/

【編輯推薦】

1. 31天學(xué)會(huì)Windows Phone 7開發(fā)：項(xiàng)目模板
2. 31天學(xué)會(huì)Windows Phone 7開發(fā)：頁(yè)面間導(dǎo)航
3. 31天學(xué)會(huì)Windows Phone 7開發(fā)：返回鍵
4. 31天學(xué)會(huì)Windows Phone 7開發(fā)：設(shè)備方向