Windows Phone 7 開發 31 日談——第5日：系統主題

l_serein發表於2012-10-31
Windows

By Jeff Blankenburg

本文是“Windows Phone 7 開發 31 日談” 系列的第5日。

昨天,我講解了裝置方向,以及在使用者改變他們的裝置方向時如何適應這些改變。今天，我們來看看在他們更改了電話的主題和顏色後我們該做些什麼。

 

深色與淺色主題

如果你還沒看到，可以將你電話的主題由深改為淺，並設定一個強調色。來看一下相同的應用程式使用了兩個不同主題：

clip_image001 clip_image002

 

強調色

你的使用者可以設定一個系統級的強調色。作業系統提供了10種大方明快的顏色供選擇。這些顏色不僅會在電話的起始螢幕中得到充分利用，還可以供你的應用程式來使用。來看一下這些顏色：

clip_image004

 

考慮預設值

當建立應用程式時，經常會去改變某些東西的顏色。我很支援這種做法。這隨你。不過你改的越多，你就越想將所有內容 都改掉。我不建議你在白色背景下使用深色文字（或者相反）。我是說如果你想有意讓某些東西變為白色，你要仔細考慮如果電話的主題變為白色時它將會變為什麼樣子（可能會看不到哦）。幸好，有一種簡單的方法可以處理它，叫做Expression Blend 4。

 

Expression Blend 4 中的裝置標籤

首先，在Expression Blend中開啟專案。最簡單的方法是在Visual Studio中右擊此專案，選擇“Open In Expression Blend…”

clip_image005

開啟後，在Blend的UI中有一個標籤叫“Device”，看起來像這樣：

clip_image006

這個標籤允許你預覽右側設計層中不同的主題和強調色。這我們開始在程式中使用這些顏色時非常重要。例如，我想在我的程式中使用一個帶顏色的背景，顏色讓使用者指定。為了做到這一點，我用了Expression Blend 4的另一個出色的特性：顏色資源標籤。

顏色資源

在你對這批文章寫“為什麼我非得用Expression Blend的呢？我是開發人員！”這樣的評論之前讓我告訴你：所有的這一切都可以用Visual Studio 2010完成。 但那非常非常困難。在採用複雜方法並不會帶來更多裨益時我更傾向於用簡單方法實現。

在你沒有覆蓋它們時Windows Phone 7會使用一套預設顏色集，在很多情況下，認識這些顏色對你很有益。在下面的圖片中，可以看到PhoneAccentColor和PhoneBackgroundColor根據我在裝置標籤中選擇的主題和強調色進行改變。第一個是深/藍，第二個是淺/橙。

clip_image007

clip_image008

在程式中選擇這些顏色後，它允許我們繫結到特定的系統值，當使用者改變主意時，程式可以迅速的反映出改變。在下面的程式碼中，你會看到我在程式中新增了一個使用了漸進色的矩形，從PhoneBackgroundColor過渡到PhoneAccentColor。我還設定了應用程式的標題，同樣利用了電話的強調色。

[xhtml] view plaincopy
  1. <Grid x:Name="LayoutRoot" Background="Transparent">  
  2.      <Grid.RowDefinitions>  
  3.          <RowDefinition Height="Auto"/>  
  4.          <RowDefinition Height="*"/>  
  5.      </Grid.RowDefinitions>  
  6.      <!--TitlePanel contains the name of the application and page title-->  
  7.      <Rectangle Stroke="Black" Grid.RowSpan="2">  
  8.          <Rectangle.Fill>  
  9.              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
  10.                  <GradientStop Color="{StaticResource PhoneBackgroundColor}" Offset="0"/>  
  11.                  <GradientStop Color="{StaticResource PhoneAccentColor}" Offset="1"/>  
  12.              </LinearGradientBrush>  
  13.          </Rectangle.Fill>  
  14.      </Rectangle>  
  15.      <!--TitlePanel contains the name of the application and page title-->  
  16.      <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">  
  17.          <TextBlock x:Name="ApplicationTitle" Text="BLANKENSOFT" Style="{StaticResource PhoneTextNormalStyle}" mce_Style="{StaticResource PhoneTextNormalStyle}"/>  
  18.          <TextBlock x:Name="PageTitle" Text="system theming" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" mce_Style="{StaticResource PhoneTextTitle1Style}">  
  19.         <TextBlock.Foreground>  
  20.             <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>  
  21.         </TextBlock.Foreground>  
  22.          </TextBlock>  
  23.      </StackPanel>  
  24.      <!--ContentPanel - place additional content here-->  
  25.      <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
  26.          <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" />  
  27.      </Grid>  
  28.  </Grid>  

這是上面兩個程式的介面（這兩個截圖除了主題和顏色之外沒有任何區別）：

clip_image009 clip_image010

示例程式碼下載

下載這個示例，用Expression Blend開啟它。用顏色資源調整。通過裝置標籤預覽變化。這一定會使你的生活更輕鬆。

clip_image011

原文地址: http://www.jeffblankenburg.com/post/31-Days-of-Silverlight-7c-Day-5-System-Theming.aspx

相關文章