Windows 8.1 app 研習營三小時
2 likes•1,750 views
本文件提供Windows 8.1應用程式開發的詳細培訓資料，涵蓋新的功能和API，包括個性化界面、深度SkyDrive整合和HTML/JS開發。它強調應用程式設計原則及各種控制項的使用，並介紹如何實作分享和搜尋功能，以及潛在的開發挑戰。最後，文檔提及與微軟Imagine Cup有關的參賽歷程，顯示台灣在國際競賽中的多次成就。
![var localSettings =
Windows.Storage.ApplicationData.Current.LocalSettings;
localSettings.Values["currentPage"] = MyBook.CurrentPage;
var roamingSettings =
Windows.Storage.ApplicationData.Current.RoamingSettings;
roamingSettings.Values["currentPage"] = MyBook.CurrentPage;](https://image.slidesharecdn.com/windows8-131205022233-phpapp02/85/Windows-8-1-app-121-320.jpg)
Windows 8.1 app 研習營三小時
- 1. Windows 8.1 App 開發研習 Windows 8.1 developer training 蔡孟儒 (Raymond) 台灣微軟 資深技術推廣協理 http://blogs.msdn.com/mengtsai
- 3. Enables the latest generation of hardware Significant platform and UX improvements Enhancements for the next wave of App innovation Continuation of Windows 8/RT
- 4. Personalized start and lock screens Apps share the screen Rich, integrated search driven by Bing New live tile sizes, including large Live tile on install Deep SkyDrive integration
- 8. iOS 及 Android 平台上皆已超過 100 個萬個 Apps 但是…有 66% 是「僵屍」Apps: Windows Store Apps 的下載率則超過9成 (聚光燈效應 & 新藍海市場)
- 14. HTML/JS enables you to use your web development knowledge and great open source and commercial libraries to create native Windows Store apps.
- 16. XAML with C#, VB and C++ makes the best use of your wealth of desktop, server, and phone development knowledge to enable you to build compelling Windows Store apps.
- 18. Windows Store XAML app Your PCL DLL WPF app Windows Phone app
- 19. Many core Windows 8.1 experiences built on the same technology New search, contact card, device companion apps, lock screen camera, and more
- 20. 既有 API Accessibility Data binding Live tiles and toast Input 8.1 更新 Controls HTML5/CSS XAML Portable Geolocation Direct3D Direct2D Direct Write Local storage SMS Skydrive Sensors Proximity Playback Capture PlayTo Streams Backgroun d transfer Bing Canvas SVG Syndication Networkin g Azure Mobile XML and JSON Contracts Xbox Live Printing Application services Threading/time rs Memory management Globalization Cryptography Authentication
- 21. 既有 API Accessibility Data binding Live tiles and toast Input 8.1 更新 Controls 8.1 新增 HTML5/CSS XAML Speech synthesis Portable Geolocation Point of service Direct3D Direct2D Direct Write Local storage SMS HTTP Skydrive Sensors Proximity USB Playback Capture PlayTo Streams Backgroun d transfer Contacts Bing HID WiFi direct Bluetooth Canvas SVG WebGL Syndication Networkin g Appointments Azure Mobile Printing 3D printing Scanning XML and JSON Contracts PDF Xbox Live Application services Threading/time rs Memory management Globalization Cryptography Authentication Diagnostics
- 23. demo
- 25. demo
- 29. Windows 8 STYLE DESIGN PRINCIPLES Windows 8 style design principles Show pride in craftsmanship 以精準細膩的設計品質為傲 Be fast and fluid 流暢敏捷，活靈活現 Be authentically digital 真實的數位體驗 Do more with less 極簡專注，捨棄無謂的裝飾 Win as one 一統江湖，借力使力
- 33. Contoso Travel Last minute deals Featured destinations Featured Destinations My Trips Last Minute Deals My Trips Top Destinations for 2012 Barcelona, Spain 7 night Alaska Cruise Featured destinations Last Minute Deals My Trips Barcelona, Spain 7 Night Alaska Cruise Chicago (3/11 – 3/19) Weather Attractions 7 days Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Ocean View Cabins Suites Upgrade from an inside cabin and save $43/night/person! Picture windows with ocean and port views From $2,099 — only $150/night/person based on double occupancy Upgrade from an inside cabin and save $43/night/person! Picture windows with ocean and port view From $2,099 — only $150/night/person do Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny
- 38. 我的第一個Windows Store App- Template
- 45. demo
- 47. demo
- 50. demo
- 59. • <DatePicker Header="Select a date:" CalendarIdentifier="JapaneseCalendar" DayFormat="{}{day.integer} {dayofweek.abbreviated}" /> • <TimePicker ClockIdentifier="24HourClock" />
- 64. 讓使用者自然的選擇: Flyout, MenuFlyout & SettingsFlyout 8.1 新增 Flyout 是一種輕量型 UI (或稱「飛出視窗」)。飛出視窗與 對話方塊不同，您只要按一下或點選視窗外的地方，就可 以輕鬆地將它關閉。 您可以使用飛出視窗收集使用者輸入、顯示項目的詳細資 料，或是要求使用者確認動作。 飛出視窗應該只在回應使用者點選或按一下的動作時顯示， 而且只要使用者在視窗外點選就會關閉。
- 66. • <Button Content="Show"> <Button.Flyout> <Flyout> <StackPanel> <TextBlock FontWeight="Light" Text="Select a name..." /> <TextBox PlaceholderText="Choose a name..." Width="300" /> <Button HorizontalAlignment="Right" Content="Rename" /> </StackPanel> </Flyout> </Button.Flyout> • </Button>
- 67. • <Button Content="Show"> 設定出現在 Button 的右方； 但會依螢幕大小或位置動態 調整。 <Button.Flyout> <Flyout Placement="Right"> <StackPanel> <TextBlock FontWeight="Light" Text="Select a name..." /> <TextBox PlaceholderText="Choose a name..." Width="300" /> <Button HorizontalAlignment="Right" Content="Rename" /> </StackPanel> </Flyout> </Button.Flyout> • </Button>
- 68. • <Button Content="Show"> <Button.Flyout> <MenuFlyout> <MenuFlyoutItem Text="Option 2"/> <MenuFlyoutSeparator /> <ToggleMenuFlyoutItem Text="Option 3"/> </MenuFlyout> </Button.Flyout> • </Button>
- 69. 8.1 新增 <Page.BottomAppBar> <CommandBar> <CommandBar.PrimaryCommands> <!-- app bar buttons here --> </CommandBar.PrimaryCommands> <CommandBar.SecondaryCommands> <!-- app bar buttons here --> </CommandBar.SecondaryCommands> </CommandBar> </Page.BottomAppBar> AppBarButton AppBarToggleButton CommandBar AppBarSeparator AppBar
- 72. TOP!
- 73. TOP!
- 75. RenderTargetBitmap (Windows.UI.Xaml.Media.Imaging) 適用於所有 UIElement 控制項 RenderTargetBitmap render = new RenderTargetBitmap(); await render.RenderAsync(grid1); var pixelBuffer = await render.GetPixelsAsync(); 8.1 新增
- 76. RenderTargetBitmap (續: 存成檔案) // Encode the image to the selected file on disk var savePicker = new FileSavePicker(); savePicker.SettingsIdentifier = "Save File"; savePicker.DefaultFileExtension = ".jpg"; savePicker.SuggestedFileName = "insta大元"; savePicker.SuggestedStartLocation = PickerLocationId.Desktop; savePicker.FileTypeChoices.Add("JPG", new List<string> { ".jpg" }); var saveFile = await savePicker.PickSaveFileAsync(); using (var fileStream = await saveFile.OpenAsync(FileAccessMode.ReadWrite)) { var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, fileStream); encoder.SetPixelData( BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint)render.PixelWidth, (uint)render.PixelHeight, DisplayInformation.GetForCurrentView().LogicalDpi, DisplayInformation.GetForCurrentView().LogicalDpi, pixelBuffer.ToArray()); await encoder.FlushAsync();
- 77. 8.1 新增
- 80. • • • • <Hub Header="My App Name"> <HubSection Header="Section 1"> <DataTemplate> <!-- your content here -->
- 82. Windows Store App Asia Developers
- 83. • 中文部落格: • • • • .Net 海角點部落: Meng-Ru Tsai's Blog: 開發者之魂: BIGeek x 程式筆記: http://www.dotblogs.com.tw/hungys/Default.aspx
- 86. Desktop
- 90. var var
- 92. 以往處理非同步運算的方法
- 98. To handle the exception in C# or Visual Basic, you use a try/catch block just as you do with synchronous code today: var title; var feedUri = new Uri("http://www.devhawk.com/rss.xml"); var client = new Windows.Web.Syndication.SyndicationClient(); try { var feed = await client.RetrieveFeedAsync(feedUri); title = feed.Title.Text; } catch (Exception ex) { // An exception occurred from the async operation }
- 100. Windows Store App 可以「分享」出去的內容格 式包括以下七種: • • • • • • • 純文字 (Plain Text) 格式化文字 統一資源識別元 (URI) HTML 點陣圖 (Bitmap) 檔案 開發人員定義的資料 你可以任意組合以上的幾種內容來作分享，比如你想分享一段 純文字加上一個URI連結、或是想分享一張圖片；那麼可以接 受這個組合的 Targeted Apps 就會出現在右方，讓使用者作選 擇。
- 101. 只需要處理一個事件 + 設定一個物件… • DataTransferManager.DataRequested 事件 • DataPackage 物件 – 許多的 Set 方法!
- 102. 實作 Share Contract • 在你想要提供分享功能的某個頁面(.xaml)，其中的LoadState()方法，加入 OnDataRequested 事件 event handler: • 再實作這個 OnDataRequested() 方法- 把資料塞進DataPackaget 物件
- 107. Search Contract 實作 (一) • 在專案中新增一個「搜尋合約」的新項目，預設會產生一個新頁面 (SearchResultsPage1.xaml)， 拉入你想呈現的UI控制項:
- 108. Search Contract 實作 (一) • 實作新頁面Filter_SelectionChanged() 方法:
- 110. Search Contract 實作 (二) • 更常見的搜尋，是讓使用者能直接搜尋此 App 的內容 (context) 1. 2. 在欲提供搜尋功能的頁面中加入QuerySubmitted() event hander 再實作此 QuerySubmitted() 方法即可
- 111. Search Contract 實作 (二) • 以 Blog Reader App 為例，我想在二個不同的頁面實作搜尋:
- 115. 最常見的退件原因- 隱私權宣告 • 4.1.1 如果您的應用程式具備網路通訊功能，則必須包含隱私權聲明 – 簡單來說，只要您的App內有宣告使用網際網路(Internet)、網路攝影機 (WebCam)或個人文件庫 (Documents Library)，就必預提供隱私權聲明 – 而您若是以Visual Studio 2012的範本來開發的話，請注意使用網際網路的宣告預設是打開的喔!
- 116. 實作: 在Charms Bar 「設定」中加入隱私權條款 的連結 • 在App.xaml.cs 中加入SettingsPane.OnCommandsRequested() event handler，並實作此方法即可
- 121. var localSettings = Windows.Storage.ApplicationData.Current.LocalSettings; localSettings.Values["currentPage"] = MyBook.CurrentPage; var roamingSettings = Windows.Storage.ApplicationData.Current.RoamingSettings; roamingSettings.Values["currentPage"] = MyBook.CurrentPage;
- 124. 如何取得所在位置經緯度? • • 只需要 GetGeopositionAsync() 取得位置，再以Coordinate.Latitude/Longtitude 取得緯度及經度。 由於這個方法是一個 Async call，所以你需要在呼叫這個方法的函式之前加上 async 的宣告，否則會發生 編譯錯誤
- 125. 咦? Compile error? WinRT 資訊: The required device capability has not been declared in the manifest. 其他資訊: 存取被拒。 (發生例外狀況於 HRESULT: 0x80070005 (E_ACCESSDENIED))
- 130. 以台北市政府公開資料平台為例
- 131. 取得JSON資料 • 同時發現此JSON為一含多個物件 (objects) 之陣列 (arrays) "[{"name":"?陽百貨事業股份有限公司松山運動中心分公司","certification_category":"游泳場所業 ","tel":"66176789","traffic_info":null,"display_addr":"敦化北路1號","poi_addr":"台北市敦化北路1號 ","X":"121.55009632378471","Y":"25.04896725734926"},{"name":"臺北市大同運動中心 游泳館 ","certification_category":"游泳場所業","tel":"25920055","traffic_info":null,"display_addr":"大龍街51號","poi_addr":" 台北市大龍街51號","X":"121.5160557692793","Y":"25.064827690815896"},{"name":"博嘉運動公園 ","certification_category":"游泳場所業","tel":"22395494","traffic_info":null,"display_addr":"木柵路4段159巷16號 ","poi_addr":"台北市木柵路四段159巷16號","X":"121.5755454950648","Y":"25.001056913828617"},{"name":"洲美運 動公園游泳館","certification_category":"游泳場所業","tel":"28340998","traffic_info":null,"display_addr":"洲美街271號
- 134. http://json2csharp.com - 將JSON obejcts 轉為C# objects 的小工具
- 140. 年費: - 公司帳戶：NT$2,840 - 個人帳戶：NT$568 12個月免費: - DreamSpark 計劃: 老師、學生 - BizSpark 計劃: 新創資訊公司 - MSDN 訂戶
- 142. 他們有何共通之處? ? 3
- 143. 微軟潛能創意盃 (Imagine Cup) • 微軟潛能創意盃 (Imagine Cup)從2003年開始，每年皆吸引超過100個國家，總計超過35萬學 生精英組隊參加。 重要軌跡 年份 紀錄簡介 2003年 首屆潛能創意盃亞太地區亞軍，並獲邀參加世界總決賽。 2006年 數位創作組台灣代表隊獲世界前 6強頭銜。 2007年 台灣代表隊「 Circle」打敗全世界兩百多隊參賽者，獲得數位創作組全球亞軍。 2008年 台灣取得軟體設計組、數位創作組、嵌入式系統開發組全球總決賽資格，創下新紀錄。 2009年 台灣參賽人數成長近 3倍。晉級全球競賽第二輪隊伍將近 100組，成長 將近 4 倍。 2009年 打敗眾多強隊取得台灣代表權的兩支隊伍。最後於全球競賽中寫下嵌入式系統組世界前 發組世界前 6強的佳績。 2010年 與教育部合作推出國際競賽台灣代表隊培育計畫，由產官學精英組成教練團，提供學生訓練與建議。 2010年 台灣學生從 113個國家、 32萬5千名全球學生精英脫穎而出，首次勇奪包含嵌入式系統組、數位創作組、 展望未來 2020組等三項世界冠軍。 2011年 台灣學生從 165個國家、 35萬2千名全球學生精英脫穎而出，蟬連嵌入式系統組世界第一、數位創作組世 界第三。 12 強，以及軟體開
- 144. 2013/07 曾志朗院士率團遠赴俄羅斯聖彼得堡 台灣「全方位聽力解決方案(Omni-Hearing Solution)」團隊榮獲軟體設計組「世界公民」(World Citizenship)及「全球婦女賦權獎」(Women‘s Empowerment Award-UN Women)兩競賽項目亞軍!
- 146. 現在上架 App 至Windows Store 或 Windows Phone 市集， 即可免費參加「App 怪獸爭霸戰」，創造屬於你專屬的app怪 獸士兵來參戰，高達66萬總獎金等你來拿! 詳情請至 http://aka.ms/battleapp
- 147. Windows Store App Asia Developers
- 148. • 中文部落格: • • • • .Net 海角點部落: Meng-Ru Tsai's Blog: 開發者之魂: BIGeek x 程式筆記: http://www.dotblogs.com.tw/hungys/Default.aspx