Windows Phone 7 開發指南

學習如何開始開發 Windows Phone 7 App

Transcript

1. 投影片下載 •http://bit.ly/wp7-guide
2. WINDOWS PHONE 7 開發指南 Eric ShangKuan Associate Developer Evangelist, Microsoft ericsk@microsoft.com May, 2011
3. 大綱 • 簡介 Windows Phone 7 • 開發環境介紹 • 如何撰寫WP7 應用程式 • 發佈應用程式至 App Hub • 學習資源
4. Windows Phone 7 硬體規格 • ARMv7 CPU, GPU • RAM (256MB+) • Flash (8GB+) • 相機 (500M+ pixels) • 螢幕解析度：800x480 • 主要按鍵：Back、Home、Search • Sensors: • 電子羅盤 (compass) • 衛星定位 (GPS) • 加速度感測 (G-sensor) • 光源感測 • 距離感測 (Proximity sensor)
5. Windows Phone 7 系統架構
6. 免費安裝開發工具 • 連線至 http://msdn.microsoft.com/zh-tw/ 網站，選擇「行 動電話開發」。 • 點擊「取得工具」中的 Install 按鈕即可下載開發工具。 • 安裝程式會從網路下載必要的開發工具，請務必連線至網際網路
7. 開發應用程式之前 • Windows Phone 7 應用程式的開發工具會以 Microsoft® Visual Studio® 2010 為主。 • 若原本系統中就已安裝 VS2010 (英文版)，則開發工具會進行整合。 • 否則安裝程式會另外安裝 Visual Studio 2010 Express，兩者都可以 完整開發應用程式。 • 可以選擇 Silverlight 或是 XNA 作為 Windows Phone 7 應 用程式的開發框架（framework） • 使用 C# 程式語言 • Silverlight: 適用於一般應用程式，提供多種版面佈局元件、視覺界 面元件等。 • XNA: 適用於多媒體或遊戲應用程式開發。
8. 開啟新專案 1. 建立 new project 2. 選擇專案類別 • Windows Phone Application 3. 填寫專案屬性 • Name 4. 按下 OK 按鈕開始開 發專案
9. 開發環境 所見即所得區 XAML編輯區 專案視窗
10. 應用程式組成 檔案 用途 App.xaml • 程式啟始時的設定 • 對應的 C# 程式檔案為 App.xaml.cs SplashScreenImage.jpg • 啟動應用程式時的畫面 ApplicationIcon.png • 應用程式的圖示 • 圖示大小：62px x 62px XXXX.xaml • 定義使用者操作介面 • 對應的 C# 程式為 XXXX.xaml.cs (在專 案視窗中，對 xaml 檔案按下右鍵 -> View code…) YYYY.cs • 一般 C# 程式檔案 Properties/WMAppManifest.xml • Windows Phone manifest file Properties/AppManifest.xml • .Net application manifest file
11. 設計介面 (xaml檔按右鍵) 使用 Visual Studio 2010 的編輯器， 有工具盒或編輯 XAML 利用 Expression Blend 軟體編輯
12. 控制項工具盒 點開Toolbox
13. 使用 Expression Blend 編輯介面檔
14. 第一個應用程式
15. 開始之前 應用程式功能 • 利用 twitter search api 搜 尋關鍵字相關的推文 應用程式目標 • 瞭解如何利用程式控制使 用介面 • 瞭解事件處理的方式 • 網路存取與執行緒
16. 拖拉元件來設計介面
17. XAML 程式碼 ... <StackPanel Orientation="Horizontal" Grid.Row="1" Margin="12,0,12,28"> <TextBox x:Name="Query" Width="320" /> <Button Content="Search" x:Name="Search" /> </StackPanel> ...
18. 設定按鈕事件處理 (property window) 2. 設定事件 1. 選取按鈕 3. 定義處理函式
19. 對應的程式碼 private void OnSearchClick(object sender, RoutedEventArgs e) { // 取出搜尋文字 string queryText = Query.Text.Trim(); if (queryText.Length > 0) { // 使用 WebClient 作 HTTP 存取 WebClient client = new WebClient(); // 處理 request 完成時的事件處理 client.DownloadStringCompleted += new DownloadStringCompletedEventHandler( (eventSender, eventArgs) => { System.Diagnostics.Debug.WriteLine(eventArgs.Result); } ); // 送出非同步的呼叫 client.DownloadStringAsync(new Uri("https://api.twitter.com/search.json?q=" + queryText)); } }
20. 這不夠 Responsive • 按鈕按下搜尋後，畫面沒有任何提示 • 使用者不知道現在發生什麼事 • 網路操作何時結束？ • 注意操作上的合理性 • 按下搜尋鈕後，畫面是否還能操作？
21. 加入進度列元件 <Grid.RowDefinitions> <RowDefinition Height="8" /> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto" /> <RowDefinition Height="*"/> </Grid.RowDefinitions> <ProgressBar Grid.Row="0" Height="8" Visibility="Collapsed" IsIndeterminate="True" x:Name="ProgressBar" /> <StackPanel x:Name="TitlePanel" Grid.Row="1" Margin="12,17,0,28"> <TextBlock x:Name="ApplicationTitle" Text="HelloPhone" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="PageTitle" Text="Search Twitter" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> ...
22. 修改按下搜尋按鈕後的動作 private void OnSearchClick(object sender, RoutedEventArgs e) { // 取出搜尋文字 string queryText = Query.Text.Trim(); if (queryText.Length > 0) { // 秀出進度列控制項 ProgressBar.Visibility = Visibility.Visible; // 關閉文字框及搜尋按鈕 Query.IsEnabled = false; Search.IsEnabled = false; ... ProgressBar.Visibility = Visibility.Collapsed; Query.IsEnabled = true; Search.IsEnabled = true; } } 放在這裡復原是不對的！為什麼？
23. 那改成這樣呢？ private void OnSearchClick(object sender, RoutedEventArgs e) { // 取出搜尋文字 string queryText = Query.Text.Trim(); if (queryText.Length > 0) { ToggleUI(false); ... (eventSender, eventArgs) => { ... ToggleUI(true); } } } protected void ToggleUI(bool isEnabled) { ProgressBar.Visibility = isEnabled ? Visibility.Collapsed : Visibility.Visible; Query.IsEnabled = isEnabled; Search.IsEnabled = isEnabled; }
24. 其它操作
25. 畫面換頁 // 前往某一頁 NavigationService.Navigate( new Uri("/PageToRedirect.xaml", UriKind.Relative) ); // 前往上一頁 NavigationService.GoBack();
26. 換頁時傳遞參數 [MainPage.xaml.cs] NavigationService.Navigate( new Uri("/PageToRedirect.xaml?x=123&y=abcd" , UriKind.Relative) ); [PageToRedirect.xaml.cs] protected override void OnNavigatedTo(System.Windows.Navigation.Navig ationEventArgs e) { base.OnNavigatedTo(e); string x; if ( NavigationContext.QueryString.TryGetValue("x" , out x)) { SomeTextBlock.Text = x; } }
27. 取得照相機的照片 using Microsoft.Phone.Tasks; using Microsoft.Phone; … public partial class MainPage : PhoneApplicationPage { private CameraCaptureTask cameraCaptureTask; // Constructor public MainPage() { InitializeComponent(); // 初始化相機擷取工作 cameraCaptureTask = new CameraCaptureTask(); cameraCaptureTask.Completed += PhotoChooserTaskCompleted; } // 擷取相片完成時的處理函式 private void PhotoChooserTaskCompleted(object sender, PhotoResult result) { // TODO: 處理照片內容 } ... // 執行擷取相機工作 cameraCaptureTask.Show(); }
28. 取得相機的照片 // 擷取相片完成時的處理函式 private void PhotoChooserTaskCompleted(object sender, PhotoResult result) { if (result.ChosenPhoto != null) { byte[] imageBytes = new byte[(int)result.ChosenPhoto.Length]; result.ChosenPhoto.Read(imageBytes, 0, imageBytes.Length); result.ChosenPhoto.Seek(0, System.IO.SeekOrigin.Begin); var bitmapImage = PictureDecoder.DecodeJpeg(result.ChosenPhoto); SomePhotoControl.Source = bitmapImage; } }
29. 使用地理位置 • 在 Reference 中加入 System.Device using System.Device.Location; ... GeoCoordinateWatcher geoWatcher; geoWatcher = new GeoCoordinateWatcher(GeoPositionAccuracy.High); geoWatcher.MovementThreshold = 100; // 公尺 geoWatcher.StatusChanged += (s, e) => { // 請使用者開啟 location service 的選項 if (e.Status == GeoPositionStatus.Disabled) { MessageBox.Show("Please turn on the location service."); } }; geoWatcher.PositionChanged += (s, e) => { this.Dispatcher.BeginInvoke(() => { // e.Position.Location.latitude // e.Position.Location.longitude }); };
30. 佈景主題
31. 佈景主題 (Theme) dark light
32. 使用 color resource
33. XAML語法 <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"> <TextBlock.Foreground> <SolidColorBrush Color="{StaticResource PhoneInverseBackgroundColor}"/> </TextBlock.Foreground> </TextBlock>
34. 其它元件
35. 儲存設定或檔案 • 使用 IsolatedStorage • 不同的應用程式是個別獨立 • A應用程式無法存取B應用程式的 IsolatedStorage • File or Settings (key-value pair)
36. 使用 IsolatedStorage 儲存檔案 using System.IO.IsolatedStorage; using System.IO; ... using (IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication()) { // 確定可用空間 long availableSpace = file.AvailableFreeSpace; // 建立檔案，並且寫入內容 using (IsolatedStorageFileStream stream = new IsolatedStorageFileStream(fileName, FileMode.CREATE, IsolatedFileStorageFile.GetUserStoreForApplicatio n())) { stream.Write(bytesToWrite, 0, bytesToWrite.Length); stream.Close(); } } 設定值 using System.IO.IsolatedStorage; using System.IO; ... IsolatedStorageSettings settings = IsolatedStorageSettings.ApplicationSettings; settings[Key] = Value; settings.Save();
37. 國際化 (I18N) 建立多語系應用程式
38. 系統中的語系設定 • SETTINGS  region & language • Display language 介面語系 • Region format 日期格式、貨幣等等 • System locale 使用者語系 • Browser & search language 瀏覽器以及搜尋引擎語系
39. 改變系統語系 手動改變 using System.Globalization; using System.Threading; ... CultureInfo cul = new CultureInfo("zh-TW"); DateTime now = DateTime.Now; TextBlock.Text = now.ToString("D", cul); ... 改變整個 thread using System.Globalization; using System.Threading; ... string now = DateTime.Now.ToString("D", Thread.CurrentThread.CurrentCulture); CultureInfo cul = new CultureInfo("zh-TW"); TextBlock.Text = now; ...
40. 使用資源檔作多語系支援（字典） • 作為字典，將詞句根據不同語系顯示不同語言文字。 • Project (右鍵)  Add  New Item…  Resources File • Access Modifiers 要改成 Public • 專案.csproj 檔案中的 <SupportedCultures> 要加入支援的語系
41. 使用資源檔作多語系支援（程式） using System.Resources; using System.Reflection; ... CultureInfo cul = new CultureInfo("zh-TW"); Thread.CurrentThread.CurrentCulture = cul; Thread.CurrentThread.CurrentUICulture = cul; ResourceManager rm = new ResourceManager("PhoneLab.AppResources", Assembly.GetExecutingAssembly()); Show.Text = rm.GetString("Hello");
42. 使用者介面/體驗設計
43. Prototyping 工具 • http://microsoftfeed.com/2011/20-free-prototyping- mockup-and-wireframing-resources-for-windows-phone-7/
44. 圖片檔案規格 用途 大小 Application Bar Icon 48px x 48px Application Icon 62px x 62px Marketplace App Icon 99px x 99px Application Tile Icon 173px x 173px
45. 介面設計指引 • http://create.msdn.com/en-US/education/basics/ux_ui
46. 註冊 APP HUB 開發者帳號
47. 上傳程式前，請注意 • 是否註冊 AppHub 開發者帳號？ • 是否符合操作規範？ • 詳細流程請參閱： http://msdn.microsoft.com/zh-tw/windowsphone/gg180751.aspx
48. 建立測試版程式 using Microsoft.Phone.Marketplace; ... private LicenseInformation licenseInfo = new LicenseInformation(); ... if (licenseInfo.IsTrial()) { // 測試版 } else { // 完整版 } ... // 開啟 Marketplace 請使用者評分或購買完整版 MarketplaceReviewTask task = new MarketplaceReviewTask(); task.Show();
49. BizSpark 方案 • http://www.microsoft.com/taiwan/bizspark/ • 提供新創公司軟體、技術及行銷上的支援與協助 • 免費的 Windows Phone 7 應用程式上架帳號
50. 學習資源 • MSDN – 行動電話開發 http://msdn.microsoft.com/zh-tw/ff380145 • MSDN – Windows Phone 7 http://msdn.microsoft.com/zh-tw/windowsphone/ • MSDN 論壇 http://social.msdn.microsoft.com/Forums/zh-TW/wp7msdntaiwan/threads • App Hub http://create.msdn.com/education/catalog/ • Windows Phone Geek http://www.windowsphonegeek.com/ • Windows Phone 7 Development for Absolute Beginners http://channel9.msdn.com/Series/Windows-Phone-7-Development-for- Absolute-Beginners