立即啟動免費開發人員帳戶!! Windows Store / Windows Azure / Windows Phone 擁有 MSDN 訂閱取得代碼後進行註冊優惠內容 : Windows Store / Windows Phone 啟用後 1

Size: px

Start display at page:

Download "立即啟動免費開發人員帳戶!! Windows Store / Windows Azure / Windows Phone 擁有 MSDN 訂閱取得代碼後進行註冊優惠內容 : Windows Store / Windows Phone 啟用後 1"

伸捷朱
5 years ago
Views:

立即啟動免費開發人員帳戶!! Windows Store / Windows Azure / Windows Phone 擁有 MSDN 訂閱取得代碼後進行註冊 http://aka.

1 立即啟動免費開發人員帳戶!! Windows Store / Windows Azure / Windows Phone 擁有 MSDN 訂閱取得代碼後進行註冊優惠內容 : Windows Store / Windows Phone 啟用後 12 個月, 完全免費 Windows Azure 訂閱期間, 每月固定的免費使用量

2 WPH203 Windows Phone 設計 : 最佳實踐王森

3 警告您還有換場次的機會

4 講在前頭. 今天你不會聽到 Windows Phone 8 的開發介紹 Windows Phone 8 企業部屬與管理功能或任何 Windows Phone 8 流言的確認

5 Windows Phone 8 已公開的事實 Windows Phone 7 應用程式可繼續執行共享驅動程式安全性網路層影像與多媒體與 Windows 8 共享核心支援 NFC 分享電子錢包 In-App-Purchases(IAP) 可透過 C#/VB Native C/C++ HTML5 browser control 開發公司專屬應用程式

6 以及提供語音辨識 API App to App Communication 支援 Micros SD Card 使用 IE 10 瀏覽器提供相機及 Lenses API 可下載離線地圖內建整合 Skype

7 Windows Phone 開發抉擇除非你的要開發的 App 有用到上述功能, 我們仍建議採用 Windows Phone OS 7.x 架構開發. 可以服務既有 Windows Phone 7.5 使用者可以服務接下來 Windows Phone 8 使用者 Windows Phone 7.5/7.8 與 Windows Phone 8 採用一樣的介面設計邏輯與操作方式

8 今日重點溫習老知識迎向新版本

9 平台的相似與差異

10 單一解析度的時代過去了 WVGA 800x480 5:3 WXGA 1280x768 5:3 720p 1280x720 16:9

11 現況 Metro Design 的崛起

13 Evernote Hello

14 字型的樣式標準字型與字型大小

內建的 Style Reference <StackPanel> <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Phon <TextBlock Style="{StaticResource PhoneTextSubtleStyle}">Phone <TextBlock Style="{StaticResource

15 內建的 Style Reference <StackPanel> <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Phon <TextBlock Style="{StaticResource PhoneTextSubtleStyle}">Phone <TextBlock Style="{StaticResource PhoneTextTitle1Style}">PhoneT <TextBlock Style="{StaticResource PhoneTextTitle2Style}">PhoneT <TextBlock Style="{StaticResource PhoneTextTitle3Style}">PhoneT <TextBlock Style="{StaticResource PhoneTextSmallStyle}">PhoneT <TextBlock Style="{StaticResource PhoneTextLargeStyle}">PhoneT <TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}">Ph <TextBlock Style="{StaticResource PhoneTextGroupHeaderStyle}"> <TextBlock Style="{StaticResource PhoneTextContrastStyle}">Phon <TextBlock Style="{StaticResource PhoneTextAccentStyle}">Phone <TextBlock Style="{StaticResource PhoneTextHugeStyle}">PhoneT </StackPanel>

16 優秀的開發人員選字型嗎?

17 顏色的選擇系統標準色

18 錯誤的 Theme Reference <StackPanel> <Button Foreground="White" Background="Black"> 按鈕 1</Button> <Button Foreground="Black" Background="White"> 按鈕 1</Button> </StackPanel> D a r k T h e L i g h t T h

<Button Foreground="{StaticResource PhoneForegroundBrush}"

19 正確的 Theme Reference <StackPanel> <Button Foreground="White" Background="Black"> 按鈕 1</Button> <Button Foreground="Black" Background="White"> 按鈕 1</Button> <Button Foreground="{StaticResource PhoneForegroundBrush}" Background="{StaticResource PhoneBackgroundBrush}"> 按鈕 1</Button> </StackPanel> D a r k T h e L i g h t T h

20 Windows Phone 7 的 10 種標準色

21 正確的 Accent Color Reference <Rectangle Height="400" Width="300"> <Rectangle.Fill> <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/> </Rectangle.Fill> </Rectangle>

22 表面工夫排版

23 運用格線系統 (Grid System) 進行畫面設計

24 格線系統 (Grid System) 可以造出隱藏的線

25 安裝 MetroGridHelper

26 啟動 MetroGridHelper App.xaml.cs // Show graphics profiling information while debugging. if (System.Diagnostics.Debugger.IsAttached) { // Display the current frame rate counters. Application.Current.Host.Settings.EnableFrameRateCounter = false; } // 打開 Metro Grid Helper 系統 MetroGridHelper.IsVisible = true;

$cs public static class MetroGridHelper { private static bool _visible; private static double$

27 調整 MetroGridHelper 顏色與透明度 MetroGridHelper.cs public static class MetroGridHelper { private static bool _visible; private static double _opacity = 0.5; private static Color _color = Colors.Blue;

28 編排修正

29 編排修正後 XAML <Grid Name="mainGrid"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <TextBlock Padding="10" Grid.Row="0" Grid.Column="0" FontSize="40"> 起站 </TextBlock> <toolkit:listpicker Grid.Row="0" Grid.Column="1" Margin="12,4,0,0"> <toolkit:listpickeritem Content=" 全部車種 " /> </toolkit:listpicker> <toolkit:listpicker Grid.Row="1" Grid.Column="0" Margin="12,4,0,0"> <toolkit:listpickeritem Content=" 台北地區 " /> </toolkit:listpicker> <toolkit:listpicker Grid.Row="1" Grid.Column="1" Margin="12,4,0,0"> <toolkit:listpickeritem Content=" 板橋 " /> </toolkit:listpicker> </Grid>

30 對齊左邊界為 24px

31 對齊與接近原則

32 元素間的間距 12px 的倍數

33 每個方向的間距一致

34 Panorama 還是 Pivot?

35 Panorama 與 Pivot 在技術上是相同的東西

36 不管用哪種請不要設計成 Master-Detail Filter-Result Wizard

37 印象 Icon 與 Live Tile 的重要性

38 別用花俏的 Tile

39 Tile 不是 Icon

40 Tile 是 App 的延伸 (Extension) 某種程度更像 Gadget/Widget

41 背景透明的 Icon 可以增加融入程度因為透明背景所以會顯示輔色

42 上架時請用背景不透明的 Icon 背景色難以控制背景色 : 黑 ( 不管 light or dark)

43 Metro Studio

44 Windows Phone Icons Maker

45 函式庫相容性

46 API Profile Port able Clas s Lib rar y

47 Immo Landwerth 說 (Program manager on the CLR s Core Framework team) We decided to start with the.net API subset for the Windows Phone, with selective additions from the full.net Framework and Silverlight. While Windows Phone apps were likely to be similar to Metro style apps, the introduction of the Windows Runtime in Windows 8 meant that the Windows Phone profile was only a starting point.

48 API 數量比較

49 使用第三方控制項

50 各種 Windows Phone Toolkit 的列表與排名

51 第三方元件市集

52 Silverlight Toolkit 同時提供 Desktop 版與 Windows Phone 版雖然 Silverlight Toolkit 是設計給 Silverlight 桌面版所使用但是裡面仍有許多 Windows Phone 可以使用的元件支援 WP 7.0 開始加入對 WP 7.1 的支援

53 People Hub 的 Recent 功能怎麼完成的?

54 使用 Silverlight Toolkit 的 HubTile 元件 xmlns:toolkit="clr-namespace:microsoft.phone.controls;assembly=microsoft.phone.controls.toolkit" <toolkit:hubtile Title=" 重要訊息 " Message=" 今夜快報 :WP7 市佔率超過 50%" Source="Image/pic.png"/>

55 使用 Panorama 之中使用 HubTile 元件 <controls:panoramaitem Header=" 立法委員 " Orientation="Horizontal"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="200"/> <ColumnDefinition Width="200"/> <ColumnDefinition Width="200"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="200"/> <RowDefinition Height="200"/> </Grid.RowDefinitions> <toolkit:hubtile Grid.Column="0" Grid.Row="0" Title=" 得票率 " Message=" 台北市 "/> <toolkit:hubtile Grid.Column="0" Grid.Row="1" Title=" 得票率 " Message=" 高雄市 "/> <toolkit:hubtile Grid.Column="1" Grid.Row="0" Title=" 得票率 " Message=" 台中市 "/> <toolkit:hubtile Grid.Column="1" Grid.Row="1" Title=" 得票率 " Message=" 花蓮縣 "/> <toolkit:hubtile Grid.Column="2" Grid.Row="0" Title=" 得票率 " Message=" 天龍國 "/> <toolkit:hubtile Grid.Column="2" Grid.Row="1" Title=" 得票率 " Message=" 阿里山 "/> </Grid> </controls:panoramaitem>

56 免費的優質電子書 Silverlight for Windows Phone Toolkit In Depth, 2nd Edition

57 Coding4Fun Tools TimeSpan 元件被獨立抽出來許多有趣的小玩意兒

58 使用 TimeSpanPicker 加入 XML NamespaceNamespace xmlns:cf4toolkit="clr-namespace:coding4fun.phone.controls.toolkit;assembly=coding4fun.phone.controls.toolkit"

59 使用 MemoryCounter 加入 XML Namespace xmlns:controls="clr-namespace:coding4fun.phone.controls;assembly=coding4fun.phone.controls" CurrentMemory PeakMemory

60 不管用甚麼元件請不要使用自製的 Dialog Box

61 相容為開發者自己打算

62 Windows Phone 8 相容性 Silverlight 或 XNA 皆不須任何修改即可相容除非你需要新的 API 功能建議使用 XNA 的專案開始嘗試轉移到 MonoGame eplex.com/

63 其他小叮嚀

64 Splash Screen 使用與否專案中的 SplashScreenImage.jpg 有哪一個內建的 Windows Phone App 用了 Splash Screen? 移除檔案並不會影響任何運作或效能

65 不要內嵌 WebBrowser 控制項

66 不用花俏的 ListBox 裝飾

67 ListBox 對 Tap 的反應

68 不要設計關閉 App 與前一頁功能的按鈕

69 總結重點回顧

70 本日重點設計是為了與系統融為一體過去的知識都可以在 Windows Ph one 8 平台重複使用 XNA 的使用者請轉移至 MonoGame 把細微的部分調整好靠的是持之以恆的耐力

Resources Connect. Share. Discusss http://www.microsoft.com/taiwan/techdays2012/ Microsoft Certification & Training Resources http://www.microsoft.com/learning/zh/tw/ Resources for IT Professionals Resources for Developers http://social.

71 Resources Connect. Share. Discusss Microsoft Certification & Training Resources Resources for IT Professionals Resources for Developers / /

73 請協助完成本課程問卷並在離開教室時交給工作人員填妥大會背包中的大會問卷可於活動第三天兌換問卷禮哦感謝您的合作

Internet Explorer 10

Internet Explorer 10 Windows Internet Explorer 10 Internet Explorer 10 Internet Explorer 10 Windows Windows 8 Internet Explorer 10 Windows Internet Explorer 10 Modern Desktop Windows 8 Internet Explorer

立即啟動 免費開發人員帳戶!! Windows Store / Windows Azure / Windows Phone 擁有 MSDN 訂閱 取得代碼 後進行註冊 優惠內容 : Windows Store / Windows Phone 啟用後 1

立即啟動免費開發人員帳戶!! Windows Store / Windows Azure / Windows Phone 擁有 MSDN 訂閱取得代碼後進行註冊優惠內容 : Windows Store / Windows Phone 啟用後 1