03，構建WP8應用程序

內容預告：

• Application Bar
• 頁面導航
• 處理頁面的橫豎向改變
• 處理不同的屏幕分辨率
• 本地化
• Toolkit
• 頁面過渡

---

Frame 和 Page：

Frame是最外層的窗器，是PhoneApplicationFrame類，包括Page和系統元素（像系統托盤，ApplicationBar）。
Page填充整個Frame的內容區域，從PhoneApplicationPage類派生，包括一個Title，可選擇是否加入ApplicationBar。

頁面導航：Silverlight在WindowsPhone上用基於頁面的導航模式，類似Web頁面導航，每個頁面有一個URI，每個頁面本質上是無狀態的。

private void HyperlinkButton_Click_1(                  object sender, RoutedEventArgs e)
 {
   NavigationService.Navigate(    new Uri("/SecondPage.xaml", UriKind.Relative));
 }

導航--后退：程序提供了向前導航的接口：

private void HyperlinkButton_Click_1(  object sender, RoutedEventArgs e)
 {
   NavigationService.Navigate(    new Uri("/SecondPage.xaml", UriKind.Relative));
 }

物理后退鍵也會引起后退到前頁，而不用寫任何代碼

重寫后退按鍵的事件：也許需要在用戶按了后退鍵時做一些程序上的判斷，比如彈出一個提示窗問用戶是否真的想后退，因為可能是誤操作。

<phone:PhoneApplicationPage
    x:Class="PhoneApp1.MainPage"
    …
    shell:SystemTray.IsVisible="True"
    BackKeyPress="PhoneApplicationPage_BackKeyPress">


In code:
 private void PhoneApplicationPage_BackKeyPress(object sender,System.ComponentModel.CancelEventArgs e)
 {
     e.Cancel = true;    // Tell system we've handled it

     // Hide the popup...
     ...
 }

在頁面間傳數據：

1，在頁面間傳字符串：

private void passParam_Click(object sender, RoutedEventArgs e) {    
NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + textBox1.Text, UriKind.Relative)); 
}

在目標頁面接收：

 protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
 {
     base.OnNavigatedTo(e);

     string querystringvalue = "";
    if (NavigationContext.QueryString.TryGetValue("msg", out querystringvalue))
        textBlock1.Text = querystringvalue;
 }

 

　　2，在頁面間傳遞對象：

• • 一種方式是將對象存在App類里（也就是全局對象）
  • 另一種還是用導航函數傳：

// Navigate to the new page
 NavigationService.Navigate(new Uri("/DetailsPage.xaml?selectedItem=" + 
(MainLongListSelector.SelectedItem as ItemViewModel).ID, UriKind.Relative));

處理非線性導航：要細心設計程序的導航策略。
如果從“第三頁”跳轉到“首頁”，然后再點擊物理后退按鈕，會發生什么？
用戶想退出程序，可是程序卻回到了“第三頁”。其實可以用NavigationService.RemoveBackEntry()來清除后退棧。

當“第三頁”跳轉到“首頁”，在導航的參數中加一個傳遞參數：

NavigationService.Navigate(new Uri("/MainPage.xaml?homeFromThird=true", UriKind.Relative));

在“首頁”的OnNavigatedTo事件中，檢測是否有這個傳遞參數，如果有的話，移除"第三頁"和"第二頁"的導航棧位置。

 protected override void OnNavigatedTo(NavigationEventArgs e) 
{     
if (e.NavigationMode == System.Windows.Navigation.NavigationMode.New && 
NavigationContext.QueryString.ContainsKey("homeFromThird"))            
 {                     
NavigationService.RemoveBackEntry(); // Remove ThirdPage                     
NavigationService.RemoveBackEntry(); // Remove SecondPage                      
NavigationService.RemoveBackEntry(); // Remove original MainPage            
}     
base.OnNavigatedTo(e); 
}

 

---

 

系統托盤和Application Bar：系統托盤包括一些系統自帶的指示符顯示系統狀態（如信號，聲音，日期），可以通過Microsoft.Phone.Shell.SystemTray.IsVisible = false; 顯示或隱藏。Application Bar可以顯示一些按鈕或常用的菜單。

 Application Bar：

• 用Application Bar替代一些自定義右鍵菜單。
• 最多4個按鈕。除非必須，別放滿4個。
• 上滑Application Bar帶出更多菜單。
• 圖標應該用白色的前景色放在透明的背景上。

在XAML中設置Application Bar：

<phone:PhoneApplicationPage 
    x:Class="CRMapp.MainPage“
   …>   <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar x:Name="AppBar" Opacity="1.0" IsMenuEnabled="True">
            <shell:ApplicationBar.Buttons>
                <shell:ApplicationBarIconButton x:Name="NewContactButton" IconUri="Images/appbar.new.rest.png"                                                 Text="New" Click="NewContactButton_Click"/>
                <shell:ApplicationBarIconButton x:Name="SearchButton" IconUri="Images/appbar.feature.search.rest.png"                                                 Text="Find" Click="SearchButton_Click"/>
            </shell:ApplicationBar.Buttons>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="GenerateMenuItem" Text="Generate Data"                                               Click="GenerateMenuItem_Click" />
                <shell:ApplicationBarMenuItem x:Name="ClearMenuItem" Text="Clear Data"                                               Click="ClearMenuItem_Click" />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>        
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

Application Bar屏幕橫豎向：橫向時Application Bar在側邊，系統自帶動畫處理過渡。

Application Bar的透明度：如果透明度小於1，頁面大小會撐滿屏幕，Application Bar會覆蓋頁面，如果透明度等於1，頁面大小會撐到Application Bar,Application Bar則不會覆蓋頁面。

在Blend中設計Application Bar：

---

手機的橫豎向：不是所有的應用需要橫向，可以通過配置讓應用支持橫向或倒向：

在Visual Studio 2012中設計橫向UI：

選擇方向：

SupportedOrientations="Portrait"

SupportedOrientations="PortraitOrLandscape"

相應的布局也許需要調整：

用Grid做橫向布局：第二列是在豎向時沒有用到的

<phone:PivotItem Header="recipe">
   <Grid>
     <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="240"/>
       <RowDefinition Height="*"/>
       <RowDefinition Height="Auto"/>
     </Grid.RowDefinitions>
...
   </Grid>

橫向時：將菜譜的描述移動到第二行第二列，現在第三行沒有用到了。因為行高是*，其自動收縮為0.

<phone:PivotItem Header="recipe">
   <Grid>
     <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="240"/>
       <RowDefinition Height="*"/>
       <RowDefinition Height="Auto"/>
     </Grid.RowDefinitions>
...
   </Grid>

移動元素：

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)        
{    
if (this.Orientation == PageOrientation.LandscapeLeft || this.Orientation ==                                                                  PageOrientation.LandscapeRight)    
{         
DirectionsScrollViewer.SetValue(Grid.RowProperty, 1);         
DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 1);    
}    
else    
{        
 DirectionsScrollViewer.SetValue(Grid.RowProperty, 2);         
DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 0);    
}
}

---

適應不同的分辨率：

在Grid中用"Auto"和"*"來表示高寬來保證好的布局：Auto表示自適應控件的尺寸，如果多行設置成*，剛平分剩下的空間。

<Grid>
   <Grid.RowDefinitions>
     <RowDefinition Height="240"/>
     <RowDefinition Height="*"/>
     <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>
...
 </Grid>

用Grid做自適應布局：

圖片：大多數情況下，應該提供適應WXGA(1280*768)大小的圖片，在WVGA時會自動縮小，在1280*720時也很不錯。當然也可以提供3種分辨率的圖片，在運行時，通過Application.Current.Host.Content.ScaleFactor取得分辨率，WVGA則返回100，WXGA返回150，720P返回160。

啟動畫面：添加一個1280*720的SpalshScreenImage.jpg到工程中即可。如果想提供精通到象素的圖片的話，還需要提供SplashScreenImage.Screen-WVGA.jpg，SplashScreenImage.Screen-WXGA.jpg，SplashScreenImage.Screen-720p.jpg除了這三張圖片，原來的SpalshScreenImage.jpg也還不能刪。

程序圖標和磁貼：必須提供適應WXGA的圖片，系統會自動縮放至合適的大小。

---

Windows Phone 8 語言支持：支持顯示50種語言，包括從右向左的語言。

內置本地化項目模板：在Visual Studio 2012建的每個項目中，會自帶一個LocalizedStrings類，簡單地提供了存取資源的代碼，並在App.XAML里添加了一個程序級的資源，每個項目都包括一個資源文件，即Resources\AppResources.resx，並且在MainPage.xaml.cs里也包括一塊注釋了的代碼，這塊代碼是用來幫助本地化ApplicationBar的。

在XAML中存取字符串資源：在數據綁定到控件時，將Text屬性綁定到StaticResource外加LoczlizeString的key。

定義中立語言：設置默認的文化以匹配默認資源文件中的字符串：右鍵項目名稱，選擇屬性，在Application選項卡上，選擇Assembly Information，在中立語言列里，選擇默認文化，這里讓資源文件和語言和文化匹配。

定義所有支持的語言：雙擊WMApplication.XML文件，在Packaging選項卡中，設置默認語言，然后選中所有支持的語言。

---

Windows Phone Toolkit：原來叫Silverlight Toolkit，主要是擴充官方控件集里沒有的功能，開源，每3個月更新一次。

• http://silverlight.codeplex.com

 

Nuget: .NET下的依賴庫整理系統，開源，可以在Visual Studio 2012中通過Nuget獲得Windows Phone Toolkit。

 

右鍵菜單：

時間和日期選擇器：

狀態切換器：

WrapPanel：

ListPicker：

---

頁面過渡效果：包括Roll, Swivel, Rotate, Slide and Turnstile等方式。可以用toolkit中的TransitionFrame替代自帶的PhoneApplicationFrame開始，在App.xaml.cs里設置InitializePhoneApplication()函數。

效果如下：

 在Page上允許過渡效果：

聲明toolkit的引用：

在<Phone:PhoneApplicationPage>的根元素下，添加效果：

傾斜效果：

1，為控件的交互添加附加的視覺回饋。

2，替換原始自帶的簡單的Pressed, UnPressed狀態。

3，在頁面上為所有控件“開啟”傾斜效果：

4，也可以只應用到單個控件：