com camp2014 - 實用windows phone apps設計開發技巧解密
DESCRIPTION
2014/03/18 Com camp2014 - 實用windows phone apps設計開發技巧解密TRANSCRIPT
![Page 1: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/1.jpg)
ComCamp2014 @ 2014/03/18
實用 Windows Phone Apps設計開發技巧解密
劉耀群 ( Ouch Liu )Client App Dev MVP / PMP
![Page 2: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/2.jpg)
關於我
劉耀群 ( Ouch Liu )
Client App Dev MVP / PMP
Ouch@點部落 http://www.dotblogs.com.tw/ouch1978
臉書 設計 x程式社團 http://ppt.cc/17y1
![Page 3: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/3.jpg)
課程大綱
透過 ThemeManager 無痛切換主題顏色
取得手機輔色 & 更改系統列 /工具鈕列配色
自訂系統列文字
「非」滿版的 Pivot 控制項運用
客製化的 SplashScreen
利用 Multilingual App Toolkit 無痛實作多語系 App
![Page 4: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/4.jpg)
ComCamp2014
深色淺色,你說的算
透過 ThemeManager 無痛切換主題顏色
![Page 5: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/5.jpg)
Windows Phone Theme Manager 可透過 NuGet 取得 (關鍵字: ThemeManager)
![Page 6: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/6.jpg)
Windows Phone Theme Manager 使用方法:
ThemeManager.ToLightTheme();
ThemeManager.ToDarkTheme();
ThemeManager.InvertTheme();
![Page 7: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/7.jpg)
Windows Phone Theme Manager 整個 APP 套用:
ThemeManager.ToLightTheme();
![Page 8: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/8.jpg)
ComCamp2014
“偽”內建 APP,這樣做就對了!!
取得手機輔色
![Page 9: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/9.jpg)
取得手機輔色
垂手可得的手機輔色:
![Page 10: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/10.jpg)
取得手機輔色
也可以透過 Code-Behind 使用:
注意事項: 若使用者在開啟 APP 後才改變手機輔色, APP 中使用手機輔色的部 份並不會立即被更新,需等到重新開啟 APP 才會重新套用。
private void btnApplyColor_Click( object sender , RoutedEventArgs e ) { rectTest.Fill = new SolidColorBrush( ( Color ) Application.Current.Resources[ "PhoneAccentColor" ] ); }
![Page 11: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/11.jpg)
ComCamp2014
誰說系統列 /工具列的配色只能一成不變?
更改系統列 / 工具鈕列配色
![Page 12: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/12.jpg)
更改系統列 / 工具鈕列配色
除了可以透過 XAML 改, Code-Behind 嘛可以喔 !!
Color backgroundColor = Colors.Green;Color foregroundColor = Colors.White;
SystemTray.BackgroundColor = backgroundColor;SystemTray.ForegroundColor = foregroundColor;
if( ApplicationBar != null ){ ApplicationBar.BackgroundColor = backgroundColor; ApplicationBar.ForegroundColor = foregroundColor;}
![Page 13: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/13.jpg)
ComCamp2014
系統列也可以拿來...
自訂系統列文字
![Page 14: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/14.jpg)
自訂系統列文字
顯示 APP 名稱又不佔空間的好方法。
Bing 相關 APP (如 Bing 新聞、 Bing 天氣、 Bing 體育等等 APP 皆採用此作法 )。
![Page 15: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/15.jpg)
自訂系統列文字
實作方法:
<phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" shell:SystemTray.BackgroundColor="#ff2e75b6" shell:SystemTray.ForegroundColor="White" shell:SystemTray.IsVisible="True" mc:Ignorable="d"> <shell:SystemTray.ProgressIndicator> <shell:ProgressIndicator IsVisible="True" Text="COMCAMP 2014 SAMPLE APP" /> </shell:SystemTray.ProgressIndicator>
![Page 16: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/16.jpg)
自訂系統列文字
Code-Behind也可以喔~
SystemTray.ProgressIndicator.Text = txtSysTrayLabel.Text;
![Page 17: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/17.jpg)
ComCamp2014
Pivot一定得要滿版嗎?
「非」滿版的 Pivot 控制項運用
![Page 18: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/18.jpg)
「非」滿版的 Pivot 控制項運用
使用時機及注意事項: Pivot 中的元素需要共用 外部的同一元件時可以 考慮採用這種設計。
Pivot 外部的元件 並不會隨著 PivotItem 滑 動。
Pivot
共用區域
![Page 19: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/19.jpg)
ComCamp2014
練習XAML動畫的好機會
客製化的 SplashScreen
![Page 20: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/20.jpg)
客製化的 SplashScreen
使用時機與訣竅: 當 APP 開啟時需要戴入大量資料或想強化 APP 的形象時,可以考慮 使用 SplashScreen 撥放動畫,吸引使用者的注意力。
可善用內建的 ControlStoryboardAction 來撥放動畫。
可透過 NavigateToPageAction 搭配 StoryboardCompleted 事件在動 畫撥放完畢後切換到主頁面。
主頁面需覆寫退回鍵 EventHandler,以正確關閉 APP。
![Page 21: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/21.jpg)
ComCamp2014
讓外國人用你的App嘛ㄟ通
利用 Multilingual App Toolkit 無痛實作多語系 App
![Page 22: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/22.jpg)
Multilingual App Toolkit
Multilingual App Toolkit 2.0 官方下載頁: http://msdn.microsoft.com/en-US/windows/apps/bg127574
Windows Phone 8 Tile Localizer 1.1.0.0: http://patrickgetzmann.wordpress.com/wp8-localize/
![Page 23: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/23.jpg)
Multilingual App Toolkit
APP列表顯示名稱以及動態磚顯示名稱的多語實作:
@AppResLib.dll,-100
@AppResLib.dll,-200
![Page 24: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/24.jpg)
ComCamp2014
針對今天分享的內容有什麼問題呢?
Q & A
![Page 25: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/25.jpg)
廣告時間
好APP,不裝嗎!?
我愛看新聞+ 金金計較 身體指數 心有千籤解
![Page 26: Com camp2014 - 實用windows phone apps設計開發技巧解密](https://reader034.vdocuments.net/reader034/viewer/2022042518/55878e89d8b42a505d8b4670/html5/thumbnails/26.jpg)
Source Code
關於本課程的原始碼,將會放在我的部落格:
http://www.dotblogs.com.tw/ouch1978