精通 Windows Store App / Windows Phone App 的 ListView / ListBox 控制項 (2)

在前一篇中瞭解了 ListView / ListBox 控制項的基本用法,不過如果要實際開發 app 其實是不太夠用的,所以這篇再做深入一點 (但也不會太困難) 的介紹。 處理不單純的資料結構 前一篇裡我們舉的例子都是顯示簡單的字串資料,但很多時候都要處理更複雜的資料結構,比方說像 twitter 類型的 app 那樣顯示 tweet 列表,面對這樣的狀況,我們通常會寫一個物件類別來表示資料結構,像是這樣:(我過份簡化了) 我們用這個資料結構表示一則訊息的資料結構,包括 id、顯示名稱、訊息、大頭照 URL 以及發文時間。接著就是要設計一下 ItemTemplate 的呈現方式,至少要呈現大頭照、名字、訊息還有發文時間,所以我們修改了 XAML 檔案成像是下面這樣: 跟前一篇 ListView / ListBox 裡的 ItemTemplate 有很大的不同,這裡放入了一個 <Image /> 以及三個 <TextBlock /> 控制項用來顯示訊息資料,而最大的不同是,這些控制項的內容綁定資料的方式也有稍稍不同,這裡的 Binding 語法都加了參數,先簡單地想,它就是對應到資料結構的成員,所以 {Binding Message} 就是把資料中的 Message 成員內容作綁定,所以若填入的資料如下: 那顯示的畫面會是: Windows Store App 顯示訊息資料後的 ListView (Windows Store App) Windows…

0

精通 Windows Store App / Windows Phone App 的 ListView / ListBox 控制項 (1)

在微軟的用戶端應用程式開發框架中,常會使用 XAML 技術做為介面設計語言,比方說:WPF、Silverlight、Windows Phone App、Windows Store App。許多過去未接觸過 XAML 的程式開發人員,對於 XAML 中許多控制項採用的 MVVM (Model-View-ViewModel) 設計模式感到不熟悉,一時間感覺不好上手,其實它並不會特別複雜困難,本系列文章將由淺至深,以 ListView / ListBox 控制項為例,一步步瞭解如何精通使用這個控制項,並且體會 MVVM 設計模式。 顯示資料列表 使用 ListView 顯示資料列表 在寫 Windows Store App / Windows Phone App (後面以 Windows App 簡稱之) 時,由於 Modern Design 的「Content Before Chrome」(內容優先) 的設計準則,或是基本的需要,常常需要顯示一串資料,例如訊息列表、聯絡人列表、搜尋結果列表等等,還好 XAML 提供了 <ListView /> (Windows Store App) 及 <ListBox /> (Windows Phone…

0

[Windows市集應用程式] 解構「格線應用程式」(Grid App) 範本 – 使用 C#

說明 開啟Windows市集應用程式的開發工具之後,可以看到內建的應用程式範本有一個「格線應用程式」(英文版是 Grid App) 的專案範本,這個範本是一個最基本以 modern style 設計的app範本,不過範本預設會產生不少程式碼,本文將逐一解構這個範本的結構,讓使用此範本開發的開發人員能夠更快上手。 本文以 C# 版本作介紹。JavaScript 版本在這裡 索引 範本做了什麼 範本產生的檔案 如何開始客製化 程式的進入點 客製化資料 首頁 群組頁面 資料細節頁面 補完計劃 範本做了什麼 格線應用程式是一個三層式的頁面架構,它最適合用來顯示一系列具有分類 (同一分類的資料為同一群組) 的資料,像是按照不同口味分類的菜單、食譜,或是不同類型的商品,也可以是按照隊伍區分的少女團體等等這類型的資料。 這個 app 的第一頁就是按群組分類的資料顯示,如下圖所示: 首頁 – 資料按群組排列 這頁可以看到資料按照群組 (group) 的方式排列,每一個群組有一個群組名稱,如果以滑鼠點擊 (或是觸控) 群組名稱 (如圖中的 Group Title 1 >) 之後,App 便會進入到第二頁 – 該群組的頁面: 群組頁面 – 顯示群組資料 在群組頁面裡,可以看到最前面的區域是顯示群組的內容,接著後面再擺放該群組內的資料,比起首頁來說,每個資料顯示更多的訊息。而不論是從首頁,還是群組頁面中,點擊任何一個資料都會進入資料細節頁面: 資料細節頁面 – 顯示資料完整訊息 資料細節頁面當然就是最完整呈現該資料最完整的內容囉,而在這一頁按下返回的箭頭,就會回到首頁或是群組頁面,端看是從哪裡進入的。 而此格線範本還針對「貼齊畫面」(snapped…

0

[Windows市集應用程式] 解構「格線應用程式」(Grid App) 範本 – 使用JavaScript

說明 開啟Windows市集應用程式的開發工具之後,可以看到內建的應用程式範本有一個「格線應用程式」(英文版是 Grid App) 的專案範本,這個範本是一個最基本以 modern style 設計的app範本,不過範本預設會產生不少程式碼,本文將逐一解構這個範本的結構,讓使用此範本開發的開發人員能夠更快上手。 本文以 JavaScript 版本作介紹。C# 的版本請參考這裡。 索引 範本做了什麼 範本產生的檔案 如何開始客製化 程式的進入點 客製化資料 首頁 群組頁面 資料細節頁面 補完計劃 範本做了什麼 格線應用程式是一個三層式的頁面架構,它最適合用來顯示一系列具有分類 (同一分類的資料為同一群組) 的資料,像是按照不同口味分類的菜單、食譜,或是不同類型的商品,也可以是按照隊伍區分的少女團體等等這類型的資料。 這個 app 的第一頁就是按群組分類的資料顯示,如下圖所示: 首頁 – 資料按群組排列 這頁可以看到資料按照群組 (group) 的方式排列,每一個群組有一個群組名稱,如果以滑鼠點擊 (或是觸控) 群組名稱 (如圖中的 Group Title 1 >) 之後,App 便會進入到第二頁 – 該群組的頁面: 群組頁面 – 顯示群組資料 在群組頁面裡,可以看到最前面的區域是顯示群組的內容,接著後面再擺放該群組內的資料,比起首頁來說,每個資料顯示更多的訊息。而不論是從首頁,還是群組頁面中,點擊任何一個資料都會進入資料細節頁面: 資料細節頁面 – 顯示資料完整訊息 資料細節頁面當然就是最完整呈現該資料最完整的內容囉,而在這一頁按下返回的箭頭,就會回到首頁或是群組頁面,端看是從哪裡進入的。 而此格線範本還針對「貼齊畫面」(snapped…

0

Windows RT 動手試玩

最近從美國訂了一台 Surface with Windows RT 來體驗,這個產品是跑在 ARM-based (這台機器用的是 Quad-core NVIDIA Tegra 3) 硬體架構的 Windows 作業系統,也是微軟首次嘗試製作硬體,所以很多事物都是一個全新的體驗,於是打算寫一篇部落格來說明一些使用 Surface with Windows RT 或是其它 Windows RT 的平板電腦可能會遇到的情境。 目錄 軟體系統 桌面軟體 語系的設定 地區設定的影響 應用程式開發 軟體系統 桌面軟體 在 x86-based 的 Windows 8 裡,除了可以執行 Windows 市集應用程式之外,仍然可以安裝在 Windows 7 上面能執行的一般桌面應用程式。但是在 ARM-based 的 Windows RT 上,除了特定的軟體以及內附的 Office 2013 RT 之外,是沒辦法安裝任何桌面應用程式的。雖然 Windows RT 仍然保有了桌面環境,但只是來使用 Office…

0

打造 Windows 8 的 Modern IE 10 完美網頁

Windows 8 內建兩種 Internet Explorer 10 (以下簡稱 IE10),一個是在桌面環境下使用的 IE10:視窗操作、可以支援各種 Plugins (ActiveX);而另外一個則是在新的開始畫面中的 IE10 (稱作 Modern IE10):它無邊框、更適合觸控操作、以及整合 Windows 8 的各種新功能特色。這篇文章將為網頁開發人員介紹,如何為 Modern IE10 打造完美網頁。 Internet Explorer 技術展示網頁 目錄 使用 HTML5 相關技術 運用 CSS3 作樣式設計 關於 Flash 支援 適應瀏覽模式 Landscape 或 Portrait 模式 貼齊 (snapped) 或填滿 (fill) 顯示 為觸控操作優化 友善表單輸入 觸控及手勢操作 融合於 Windows 8 分享網頁內容 釘選網站及跳躍清單 與 Windows 市集結合…

0

Windows 市集應用程式 (Windows Store Apps) 開發資源整理

Windows 8 將於今年 10 月 26 日全球正式上市,在 Windows 8 上有了新的開始畫面,也有一個新的應用程式 (Windows 市集應用程式) 執行環境,同時微軟也推出了 Windows 市集 (Windows Store) 作為應用程式 (app) 的銷售、散佈平台,各位開發人員若要為撰寫 Windows 市集應用程式作好準備,那一定不能錯過以下的相關開發參考資源: Windows 市集應用程式開發人員中心 這個頁面算是關於 Windows 市集應用程式的入口頁面,不論你是要下載(90天)試用版本的 Windows 8、免費的開發工具 (Visual Studio 2012 Express for Windows 8),還是從「儀表板 (Dashboard)」註冊開發帳號 (用於上架應用程式),以及瀏覽所有的開發文件、設計規範還是 API 參考說明,從這個入口網站開始就對了! Windows 8 範例程式 這裡蒐集了所有微軟官方提供的範例程式,讓開發人員在學習的過程中可以針對不同的功能來參考範例專案、程式碼來學習。 Windows 市集應用程式訓練教材 比起範例程式,這份實作練習更是針對完成一個完整的應用程式而提供一步步的操作指引,讓開發人員更加瞭解怎麼把各種功能搭配起來,以及製作一個完整的應用程式需要注意什麼地方。 微軟官方支援中心 若你在上架 Windows 市集應用程式、或是註冊開發帳號時遇到任何問題,都可以在這個網站送出支援需求,將會由微軟的技術支援團隊來回應及解決你的問題。 Windows 市集應用程式論壇 在開發 Windows…

0

輕鬆開發「雲端化」的 App

在 app 的開發中,我們常會在網路上建立網頁應用程式或是網站 API 來將資料儲存在雲端,如此一來,使用 app 的人,除了重新安裝 app 也能存取得到原本儲存的資料之外,若是在不同裝置上使用同一個 app 也能夠存取相同的資料。而對開發人員而言,更能夠因為資料與 app 各自獨立,能更容易在其它的平台利用這些資料再做應用及服務。 這篇文章將會介紹如何運用 Windows Azure 所提供的 Mobile Service 來輕易地完成一個「雲端化」的記帳 app 開發。 建立 Windows Azure Mobile Service 服務 由於目前 Mobile Service 在 Windows Azure 上還是預覽服務,所以已經有 Windows Azure 訂閱帳戶的話,可以直接至預覽功能的頁面申請試用,稍待一段時間等待認證通過時便可以立即使用,如此便能夠開始建立 mobile service app。Windows Azure Mobile Service 目前先推出 Windows 8 的支援,未來也將會支援更多的應用程式平台 (如:Windows Phone、iOS 及 Android 等) 首先點下 Create new…

0

Metro Style App: 使用 WebAuthenticationBroker 做 Facebook 帳號驗證

因為 Facebook 的流行,現在很多開發人員都會運用 Facebook 帳號作為應用程式的身份驗證,在 WinRT 中有一個很好用的一組 API: WebAuthenticationBroker,它提供了一個架構,讓應用程式很容易就能完成 OAuth 的驗證機制。過去要在應用程式中完成 OAuth 驗證,總是會很麻煩地在應用程式或網頁瀏覽器之間切換 (因為網站登入及授權須在網頁中完成) ,容易造成使用者的混淆,這組 API 讓整個驗證的過程皆在應用程式的對話盒中完成,可以讓使用者留在應用程式中完成一切的動作。 在 Metro Style App 中使用 WebAuthenticationBroker 以 Facebook 為例 參考 Facebook 的開發文件,整個驗證的工作可以歸納成幾件事情: 註冊你的應用程式,取得一個應用程式的身份,得到一個「應用程式 ID」 視你應用程式的需要,組合成一個 URL,接著讓使用者透過這個 URL 來授權你的應用程式 (使用者須登入 facebook) 完成授權,取得 access_token 以便呼叫 facebook APIs。(當然要處理授權失敗的狀況) 這些動作要使用 WebAuthenticationBroker 來完成便非常簡單,直接來看程式碼 (JavaScript) 就好瞭解了: 值得注意的是,在 authUrl 中的 display=popup 參數一定要設定,才會符合 Metro Style App…

0

Metro Style App 設計開發入門指南

我們部門最近做出的小冊子,精美的排版讓你快速進入 Metro Style App 的開發境界,期許能在最短的時間讓您瞭解如何開發 Windows 8 Metro Style App 按此下載

0