Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Windows Phone 7 開發指南
Search
Eric Shangkuan
May 06, 2011
Programming
0
43
Windows Phone 7 開發指南
學習如何開始開發 Windows Phone 7 App
Eric Shangkuan
May 06, 2011
Tweet
Share
More Decks by Eric Shangkuan
See All by Eric Shangkuan
Python on Windows Azure @ PyHUG
ericsk
0
200
Internet Explorer 10: 重新想像網站設計
ericsk
4
410
Windows App 開發嘉年華 Keynote
ericsk
0
84
Windows Store App 開發概論
ericsk
0
81
Developing Python Apps on Windows Azure
ericsk
0
70
PyKinect: Body Iteration Application Development Using Python
ericsk
0
780
Windows Phone Mango 應用程式開發面面觀
ericsk
0
62
Wha's New in HTML5
ericsk
0
160
Microsoft and jQuery
ericsk
0
64
Other Decks in Programming
See All in Programming
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
Jakarta EE Meets AI
ivargrimstad
0
290
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
210
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
300
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
440
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
130
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
Understanding Kotlin Multiplatform
l2hyunwoo
0
160
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
170
GPUを計算資源として使おう!
primenumber
1
290
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
100
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Navigating Team Friction
lara
187
15k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Optimizing for Happiness
mojombo
379
70k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Facilitating Awesome Meetings
lara
54
6.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Balancing Empowerment & Direction
lara
1
500
Transcript
投影片下載 •http://bit.ly/wp7-guide
WINDOWS PHONE 7 開發指南 Eric ShangKuan Associate Developer Evangelist, Microsoft
[email protected]
May, 2011
大綱 • 簡介 Windows Phone 7 • 開發環境介紹 • 如何撰寫WP7
應用程式 • 發佈應用程式至 App Hub • 學習資源
Windows Phone 7 硬體規格 • ARMv7 CPU, GPU • RAM
(256MB+) • Flash (8GB+) • 相機 (500M+ pixels) • 螢幕解析度:800x480 • 主要按鍵:Back、Home、Search • Sensors: • 電子羅盤 (compass) • 衛星定位 (GPS) • 加速度感測 (G-sensor) • 光源感測 • 距離感測 (Proximity sensor)
Windows Phone 7 系統架構
免費安裝開發工具 • 連線至 http://msdn.microsoft.com/zh-tw/ 網站,選擇「行 動電話開發」。 • 點擊「取得工具」中的 Install 按鈕即可下載開發工具。
• 安裝程式會從網路下載必要的開發工具,請務必連線至網際網路
開發應用程式之前 • Windows Phone 7 應用程式的開發工具會以 Microsoft® Visual Studio® 2010
為主。 • 若原本系統中就已安裝 VS2010 (英文版),則開發工具會進行整合。 • 否則安裝程式會另外安裝 Visual Studio 2010 Express,兩者都可以 完整開發應用程式。 • 可以選擇 Silverlight 或是 XNA 作為 Windows Phone 7 應 用程式的開發框架(framework) • 使用 C# 程式語言 • Silverlight: 適用於一般應用程式,提供多種版面佈局元件、視覺界 面元件等。 • XNA: 適用於多媒體或遊戲應用程式開發。
開啟新專案 1. 建立 new project 2. 選擇專案類別 • Windows Phone
Application 3. 填寫專案屬性 • Name 4. 按下 OK 按鈕開始開 發專案
開發環境 所見即所得區 XAML編輯區 專案視窗
應用程式組成 檔案 用途 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
設計介面 (xaml檔按右鍵) 使用 Visual Studio 2010 的編輯器, 有工具盒或編輯 XAML 利用
Expression Blend 軟體編輯
控制項工具盒 點開Toolbox
使用 Expression Blend 編輯介面檔
第一個應用程式
開始之前 應用程式功能 • 利用 twitter search api 搜 尋關鍵字相關的推文 應用程式目標
• 瞭解如何利用程式控制使 用介面 • 瞭解事件處理的方式 • 網路存取與執行緒
拖拉元件來設計介面
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> ...
設定按鈕事件處理 (property window) 2. 設定事件 1. 選取按鈕 3. 定義處理函式
對應的程式碼 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)); } }
這不夠 Responsive • 按鈕按下搜尋後,畫面沒有任何提示 • 使用者不知道現在發生什麼事 • 網路操作何時結束? • 注意操作上的合理性
• 按下搜尋鈕後,畫面是否還能操作?
加入進度列元件 <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> ...
修改按下搜尋按鈕後的動作 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; } } 放在這裡復原是不對的!為什麼?
那改成這樣呢? 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; }
其它操作
畫面換頁 // 前往某一頁 NavigationService.Navigate( new Uri("/PageToRedirect.xaml", UriKind.Relative) ); // 前往上一頁
NavigationService.GoBack();
換頁時傳遞參數 [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; } }
取得照相機的照片 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(); }
取得相機的照片 // 擷取相片完成時的處理函式 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; } }
使用地理位置 • 在 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 }); };
佈景主題
佈景主題 (Theme) dark light
使用 color resource
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>
其它元件
儲存設定或檔案 • 使用 IsolatedStorage • 不同的應用程式是個別獨立 • A應用程式無法存取B應用程式的 IsolatedStorage •
File or Settings (key-value pair)
使用 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();
國際化 (I18N) 建立多語系應用程式
系統中的語系設定 • SETTINGS region & language • Display language
介面語系 • Region format 日期格式、貨幣等等 • System locale 使用者語系 • Browser & search language 瀏覽器以及搜尋引擎語系
改變系統語系 手動改變 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; ...
使用資源檔作多語系支援(字典) • 作為字典,將詞句根據不同語系顯示不同語言文字。 • Project (右鍵) Add New
Item… Resources File • Access Modifiers 要改成 Public • 專案.csproj 檔案中的 <SupportedCultures> 要加入支援的語系
使用資源檔作多語系支援(程式) 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");
使用者介面/體驗設計
Prototyping 工具 • http://microsoftfeed.com/2011/20-free-prototyping- mockup-and-wireframing-resources-for-windows-phone-7/
圖片檔案規格 用途 大小 Application Bar Icon 48px x 48px Application
Icon 62px x 62px Marketplace App Icon 99px x 99px Application Tile Icon 173px x 173px
介面設計指引 • http://create.msdn.com/en-US/education/basics/ux_ui
註冊 APP HUB 開發者帳號
上傳程式前,請注意 • 是否註冊 AppHub 開發者帳號? • 是否符合操作規範? • 詳細流程請參閱: http://msdn.microsoft.com/zh-tw/windowsphone/gg180751.aspx
建立測試版程式 using Microsoft.Phone.Marketplace; ... private LicenseInformation licenseInfo = new LicenseInformation();
... if (licenseInfo.IsTrial()) { // 測試版 } else { // 完整版 } ... // 開啟 Marketplace 請使用者評分或購買完整版 MarketplaceReviewTask task = new MarketplaceReviewTask(); task.Show();
BizSpark 方案 • http://www.microsoft.com/taiwan/bizspark/ • 提供新創公司軟體、技術及行銷上的支援與協助 • 免費的 Windows Phone
7 應用程式上架帳號
學習資源 • 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