Embed Size (px)
DESCRIPTION
2014/03/18 Com camp2014 - 實用windows phone apps設計開發技巧解密
Citation preview
ComCamp2014 @ 2014/03/18
實用 Windows Phone Apps設計開發技巧解密
劉耀群 ( Ouch Liu )Client App Dev MVP / PMP
關於我
劉耀群 ( Ouch Liu )
Client App Dev MVP / PMP
Ouch@點部落 http://www.dotblogs.com.tw/ouch1978
臉書 設計 x程式社團 http://ppt.cc/17y1
課程大綱
透過 ThemeManager 無痛切換主題顏色
取得手機輔色 & 更改系統列 /工具鈕列配色
自訂系統列文字
「非」滿版的 Pivot 控制項運用
客製化的 SplashScreen
利用 Multilingual App Toolkit 無痛實作多語系 App
ComCamp2014
深色淺色，你說的算
透過 ThemeManager 無痛切換主題顏色
Windows Phone Theme Manager 可透過 NuGet 取得 (關鍵字： ThemeManager)
Windows Phone Theme Manager 使用方法：
ThemeManager.ToLightTheme();
ThemeManager.ToDarkTheme();
ThemeManager.InvertTheme();
Windows Phone Theme Manager 整個 APP 套用：
ThemeManager.ToLightTheme();
ComCamp2014
“偽”內建 APP，這樣做就對了！！
取得手機輔色
取得手機輔色
垂手可得的手機輔色：
取得手機輔色
也可以透過 Code-Behind 使用：
注意事項： 若使用者在開啟 APP 後才改變手機輔色， APP 中使用手機輔色的部 份並不會立即被更新，需等到重新開啟 APP 才會重新套用。
private void btnApplyColor_Click( object sender , RoutedEventArgs e ) { rectTest.Fill = new SolidColorBrush( ( Color ) Application.Current.Resources[ "PhoneAccentColor" ] ); }
ComCamp2014
誰說系統列 /工具列的配色只能一成不變？
更改系統列 / 工具鈕列配色
更改系統列 / 工具鈕列配色
除了可以透過 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;}
ComCamp2014
系統列也可以拿來．．．
自訂系統列文字
自訂系統列文字
顯示 APP 名稱又不佔空間的好方法。
Bing 相關 APP (如 Bing 新聞、 Bing 天氣、 Bing 體育等等 APP 皆採用此作法 )。
自訂系統列文字
實作方法：
<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>
自訂系統列文字
Code-Behind也可以喔~
SystemTray.ProgressIndicator.Text = txtSysTrayLabel.Text;
ComCamp2014
Pivot一定得要滿版嗎？
「非」滿版的 Pivot 控制項運用
「非」滿版的 Pivot 控制項運用
使用時機及注意事項： Pivot 中的元素需要共用 外部的同一元件時可以 考慮採用這種設計。
Pivot 外部的元件 並不會隨著 PivotItem 滑 動。
Pivot
共用區域
ComCamp2014
練習ＸＡＭＬ動畫的好機會
客製化的 SplashScreen
客製化的 SplashScreen
使用時機與訣竅： 當 APP 開啟時需要戴入大量資料或想強化 APP 的形象時，可以考慮 使用 SplashScreen 撥放動畫，吸引使用者的注意力。
可善用內建的 ControlStoryboardAction 來撥放動畫。
可透過 NavigateToPageAction 搭配 StoryboardCompleted 事件在動 畫撥放完畢後切換到主頁面。
主頁面需覆寫退回鍵 EventHandler，以正確關閉 APP。
ComCamp2014
讓外國人用你的Ａｐｐ嘛ㄟ通
利用 Multilingual App Toolkit 無痛實作多語系 App
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/
Multilingual App Toolkit
APP列表顯示名稱以及動態磚顯示名稱的多語實作：
@AppResLib.dll,-100
@AppResLib.dll,-200
ComCamp2014
針對今天分享的內容有什麼問題呢？
Q & A
廣告時間
好ＡＰＰ，不裝嗎！？
我愛看新聞＋ 金金計較 身體指數 心有千籤解
Source Code
關於本課程的原始碼，將會放在我的部落格：
http://www.dotblogs.com.tw/ouch1978
