Embed Size (px)
DESCRIPTION
Windows Store App 開發研習 (Windows 8 & Windows 8.1)，Windows 8.1 新功能: PDF rendering, 3D Printing, Text-to-Speech, 學校，課程，學生，DreamSpark, BizSpark, ImagineCup, 潛能創意盃，App 爭霸戰,
Citation preview
Windows 8.1 developer training
Windows 8.1 App 開發研習
蔡孟儒 (Raymond)台灣微軟資深技術推廣協理http://blogs.msdn.com/mengtsai
Enables the latest generation of hardware
Significant platform and UX improvements
Enhancements for the next wave of App innovation
Continuation of Windows 8/RT
Rich, integrated search
driven by Bing
Personalized start
and lock screens
New live tile sizes,
including large
Live tile on install
Apps share the screen Deep SkyDrive
integration
http://www.netmarketshare.com/operating-system-market-share.aspx?qprid=10&qpcustomd=0
http://www.netmarketshare.com/operating-system-market-share.aspx?qprid=10&qpcustomd=0
但是…有 66% 是「僵屍」Apps:
Windows Store Apps 的下載率則超過9成 (聚光燈效應 & 新藍海市場)
iOS 及 Android 平台上皆已超過 100 個萬個 Apps
HTML/JS enables you to use your web development knowledge and great open source and commercial libraries to create native Windows Store apps.
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.
Windows Store
XAML app
Windows Phone
app
WPF app
Your
PCL
DLL
Many core Windows 8.1 experiences built on the same technologyNew search, contact card, device companion apps, lock screen camera, and more
Geo-location
Proximity
Direct3D Direct2DDirect Write
PlayTo
Contracts
Bing
Azure Mobile
HTML5/CSS XAMLInput Controls
Authentication
Portable
Sensors Playback Capture
Printing
SVGCanvas
Local storage
SMS
StreamsBackground transfer
SyndicationNetworkin
g
XML and JSON
Skydrive
Live tiles and toast
Accessibility Data binding
Application services
Threading/timers
Memory management
Globalization Cryptography
Xbox Live
8.1 更新既有 API
Geo-location
Proximity
Direct3D Direct2DDirect Write
PlayTo
Contracts
Bing
Azure Mobile
HTML5/CSS XAMLInput Controls
Authentication
Bluetooth
USB
HID WiFi direct
Point of service
3Dprinting
Scanning
WebGL
HTTP
Contacts
Appoint-ments
Speech synthesis
Diagnostics
Portable
Sensors Playback Capture
Printing
SVGCanvas
Local storage
SMS
StreamsBackground transfer
SyndicationNetworkin
g
XML and JSON
Skydrive
Live tiles and toast
Accessibility Data binding
Application services
Threading/timers
Memory management
Globalization Cryptography
Xbox Live
8.1 更新 8.1 新增既有 API
demo
demo
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
一統江湖，借力使力
Contoso Travel
Featured destinations Last minute deals My Trips
7 night Alaska Cruise
Last Minute Deals
Featured destinations
Barcelona, Spain
Last Minute Deals
7 Night Alaska Cruise
Ocean View Cabins
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
Suites
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
My Trips Weather7 days
Chicago (3/11 – 3/19)
Today54/43
Mostly Sunny
Today54/43
Mostly Sunny
Today54/43
Mostly Sunny
Today54/43
Mostly Sunny
Today54/43
Mostly Sunny
Attractions
My Trips Featured Destinations Top Destinations for 2012
Barcelona, Spain
我的第一個Windows Store App- Template
demo
demo
App在進入suspend狀態前有5秒的時間準備
要被系統”終結”前，App 不會被通知
回到執行狀態後，Apps會被通知
使用者啟動App
啟動畫面Splash screen
demo
AreTransportControlsEnabled="True"
IsFullWindow="True"
8.1 更新
FrameworkElement
TextBlock
RichTextBlock
Control
ContentControl
Border
ButtonBase
Button
ToggleButton
CheckBox
RadioButton
ProgressRing
RangeBase ProgressBar
TextBox,
PasswordBox
RichEditBox
Image
Shape Rectangle, Ellipse
DatePicker and TimePicker 8.1 新增
DatePicker and TimePicker
• <DatePicker Header="Select a date:"
CalendarIdentifier="JapaneseCalendar"
DayFormat="{}{day.integer} {dayofweek.abbreviated}" />
• <TimePicker ClockIdentifier="24HourClock" />
CalendarIdentifier
Orientation
ComboBox
Slider
DatePicker
TimePicker
TextBox
PasswordBox
RichEditBox
8.1 新增
• <RichTextBlock>
<Paragraph>
<Run> </Run>
<Hyperlink
NavigateUri="http://dev.windows.com"> </Hyperlink>
<Run> </Run>
</Paragraph>
• </RichTextBlock>
8.1 新增讓使用者自然的選擇:
Flyout, MenuFlyout & SettingsFlyout
Flyout 是一種輕量型 UI (或稱「飛出視窗」)。飛出視窗與對話方塊不同，您只要按一下或點選視窗外的地方，就可以輕鬆地將它關閉。
您可以使用飛出視窗收集使用者輸入、顯示項目的詳細資料，或是要求使用者確認動作。
飛出視窗應該只在回應使用者點選或按一下的動作時顯示，而且只要使用者在視窗外點選就會關閉。
• <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>
• <Button Content="Show">
<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>
設定出現在 Button 的右方；但會依螢幕大小或位置動態調整。
• <Button Content="Show">
<Button.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="Option 2"/>
<MenuFlyoutSeparator />
<ToggleMenuFlyoutItem Text="Option 3"/>
</MenuFlyout>
</Button.Flyout>
• </Button>
<Page.BottomAppBar>
<CommandBar>
<CommandBar.PrimaryCommands>
<!-- app bar buttons here -->
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<!-- app bar buttons here -->
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
AppBarButton AppBarToggleButton AppBarSeparatorCommandBar
AppBar
8.1 新增
TOP!
TOP!
RenderTargetBitmap (Windows.UI.Xaml.Media.Imaging)
適用於所有 UIElement 控制項
RenderTargetBitmap render = new RenderTargetBitmap();
await render.RenderAsync(grid1);
var pixelBuffer = await render.GetPixelsAsync();
8.1 新增
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();
}
8.1 新增
• <Hub Header="My App Name">
• <HubSection Header="Section 1">
• <DataTemplate>
• <!-- your content here -->
Windows Store App Asia Developers
• 中文部落格:• .Net 海角點部落:
• Meng-Ru Tsai's Blog:
• 開發者之魂:
• BIGeek x 程式筆記: http://www.dotblogs.com.tw/hungys/Default.aspx
Desktop
http://msdn.microsoft.com/library/gg597391(v=vs.110).aspx
var
var
以往處理非同步運算的方法
http://blogs.msdn.com/b/windowsappdev/arch
ive/2012/04/24/diving-deep-with-winrt-and-
await.aspx
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
}
Windows Store App 可以「分享」出去的內容格式包括以下七種:• 純文字 (Plain Text)
• 格式化文字
• 統一資源識別元 (URI)
• HTML
• 點陣圖 (Bitmap)
• 檔案
• 開發人員定義的資料
你可以任意組合以上的幾種內容來作分享，比如你想分享一段純文字加上一個URI連結、或是想分享一張圖片；那麼可以接受這個組合的 Targeted Apps 就會出現在右方，讓使用者作選擇。
只需要處理一個事件 + 設定一個物件…
• DataTransferManager.DataRequested 事件
• DataPackage 物件– 許多的 Set 方法!
實作 Share Contract• 在你想要提供分享功能的某個頁面(.xaml)，其中的LoadState()方法，加入
OnDataRequested 事件 event handler:
• 再實作這個 OnDataRequested() 方法- 把資料塞進DataPackaget 物件
Search Contract 實作 (一)
• 在專案中新增一個「搜尋合約」的新項目，預設會產生一個新頁面 (SearchResultsPage1.xaml)，拉入你想呈現的UI控制項:
Search Contract 實作 (一)
• 實作新頁面Filter_SelectionChanged() 方法:
Search Contract 實作 (二)
• 更常見的搜尋，是讓使用者能直接搜尋此 App 的內容 (context)1. 在欲提供搜尋功能的頁面中加入QuerySubmitted() event hander
2. 再實作此 QuerySubmitted() 方法即可
Search Contract 實作 (二)
• 以 Blog Reader App 為例，我想在二個不同的頁面實作搜尋:
最常見的退件原因- 隱私權宣告
• 4.1.1 如果您的應用程式具備網路通訊功能，則必須包含隱私權聲明
– 簡單來說，只要您的App內有宣告使用網際網路(Internet)、網路攝影機 (WebCam)或個人文件庫(Documents Library)，就必預提供隱私權聲明
– 而您若是以Visual Studio 2012的範本來開發的話，請注意使用網際網路的宣告預設是打開的喔!
實作: 在Charms Bar 「設定」中加入隱私權條款的連結• 在App.xaml.cs 中加入SettingsPane.OnCommandsRequested() event handler，並實作此方法即可
var localSettings =
Windows.Storage.ApplicationData.Current.LocalSettings;
localSettings.Values["currentPage"] = MyBook.CurrentPage;
var roamingSettings =
Windows.Storage.ApplicationData.Current.RoamingSettings;
roamingSettings.Values["currentPage"] = MyBook.CurrentPage;
如何取得所在位置經緯度?
• 只需要 GetGeopositionAsync() 取得位置，再以Coordinate.Latitude/Longtitude 取得緯度及經度。
• 由於這個方法是一個 Async call，所以你需要在呼叫這個方法的函式之前加上 async 的宣告，否則會發生編譯錯誤
咦? Compile error?
WinRT 資訊: The required device capability has not been declared in the manifest.
其他資訊: 存取被拒。 (發生例外狀況於 HRESULT: 0x80070005 (E_ACCESSDENIED))
Manifest 宣告
• 請記得於.manifest中勾選位置(Location)的設定
請記得處理無GPS服務或未開啟的情形
• 否則會被退件…
以台北市政府公開資料平台為例
取得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號\",\"poi_addr\":\"台北市洲美街271號\",\"X\":\"121.49910262885395\",\"Y\":\"25.108741884078757\"}
Parsing JSON –使用Windows.Data.Json
http://msdn.microsoft.com/zh-tw/library/windows/apps/xaml/hh770289.aspx
年費:
- 公司帳戶：NT$2,840
- 個人帳戶：NT$568
12個月免費:
- DreamSpark 計劃: 老師、學生
- BizSpark 計劃: 新創資訊公司
- MSDN 訂戶
而是創意
再加上永遠可以更好的使用者經驗 (UX)
他們有何共通之處?
3
?
微軟潛能創意盃 (Imagine Cup)
• 微軟潛能創意盃 (Imagine Cup)從2003年開始，每年皆吸引超過100個國家，總計超過35萬學生精英組隊參加。
重要軌跡
年份 紀錄簡介
2003年 首屆潛能創意盃亞太地區亞軍，並獲邀參加世界總決賽。
2006年 數位創作組台灣代表隊獲世界前 6強頭銜。
2007年 台灣代表隊「Circle」打敗全世界兩百多隊參賽者，獲得數位創作組全球亞軍。
2008年 台灣取得軟體設計組、數位創作組、嵌入式系統開發組全球總決賽資格，創下新紀錄。
2009年 台灣參賽人數成長近 3倍。晉級全球競賽第二輪隊伍將近 100組，成長
將近 4 倍。
2009年 打敗眾多強隊取得台灣代表權的兩支隊伍。最後於全球競賽中寫下嵌入式系統組世界前 12 強，以及軟體開
發組世界前6強的佳績。
2010年 與教育部合作推出國際競賽台灣代表隊培育計畫，由產官學精英組成教練團，提供學生訓練與建議。
2010年 台灣學生從113個國家、32萬5千名全球學生精英脫穎而出，首次勇奪包含嵌入式系統組、數位創作組、
展望未來 2020組等三項世界冠軍。
2011年 台灣學生從165個國家、35萬2千名全球學生精英脫穎而出，蟬連嵌入式系統組世界第一、數位創作組世
界第三。
2013/07 曾志朗院士率團遠赴俄羅斯聖彼得堡
台灣「全方位聽力解決方案(Omni-Hearing Solution)」團隊榮獲軟體設計組「世界公民」(World
Citizenship)及「全球婦女賦權獎」(Women‘s Empowerment Award-UN Women)兩競賽項目亞軍!
DreamSpark
學生夢想火花計畫
免費為學生提供 Microsoft 開發工具及軟體:
追求自己的夢想，開創新世代的重大技術突破，或藉此踏出職場生涯的第一步。
現在上架 App 至Windows Store 或Windows Phone 市集，即可免費參加「App 怪獸爭霸戰」，創造屬於你專屬的app怪獸士兵來參戰，高達66萬總獎金等你來拿! 詳情請至http://aka.ms/battleapp
Windows Store App Asia Developers
• 中文部落格:• .Net 海角點部落:
• Meng-Ru Tsai's Blog:
• 開發者之魂:
• BIGeek x 程式筆記: http://www.dotblogs.com.tw/hungys/Default.aspx
