02. 使用 Blend 和 Visual Studio 開發 APP

Visual Studio Express 2012 

Visual Studio Express 工具 - 適合業餘愛好者、初學程式開發、以及學生想要學習開發應用程式者。專業開發、企業及團隊開發,可直接安裝 Professional、Premium 或 Ultimate 版,以提供完整的開發、設計、偵錯及測試功能,皆提供免費試用版。

  •     新增新專案
  1. 開啟新專案,在檔案>新增>專案
  2. 出現如圖(一)的畫面,在左邊視窗Templates目錄下選取JavaScript後,接著在中間視窗選取不同的樣版,在將其專案命名後按下確定           

           2.1 Visual Studio 中提供的 Metro Style Apps 專案樣版

                 (1) Blank Application:顧名思義,就是空白的專案樣版,只提供一個空白的頁面,其餘的部份我們都

                                                     得自行設計。

                 (2) Grid Application:多頁式的專案樣版,提供了三層的巡覽(分類總覽頁、單一類別檢視頁、項目詳

                                                    細資訊頁)檢視模式。

                 (3) Split Application:兩頁式的專案樣版,提供了分類總覽頁與結合了類別項目列表與項目詳細資訊

                                                   的頁面。

                                                                                         

                                                                                   圖(一)

          3.偵錯選單中選擇開始偵錯(或直接按壓 F5 )來啟動偵錯器裡的應用程式。

             3.1 Visual Studio的偵錯模式

                  (1) 本地主機 :偵錯結果會在開發程式中的電腦直接顯示出來

                  (2) 模擬器 : 偵錯結果會在開發程式中的電腦顯示出來,但是開啟一個模  擬器,模擬APP在真實行

                                      動裝置上顯現的結果

                  (3) 遠端偵錯:將應用程式部署至平板或另外一台機器測試

  •   APP專案的架構

             1. 專案根目錄下的文件

                (1) default.html : App的起始頁

                (2) <Appname>_TemporaryKey.pfx : 在第一次運行時創建的臨時簽名。

                (3) package.appmanifest:打開這個文件將顯示Visual Studio的清單編輯器

             2. 圖像資料夾最基本的四張圖

                (1) logo.png : 150×150(100%的比例)顯示於開始頁面。

                (2) smalllogo.png : 30x30的圖像顯示於縮小的開始頁面。

                (3) splashscreen.png : 620x300應用程序加載時,將顯示圖像。

                (4) storelogo.png : 50x50的圖像將顯示在Windows應用商店中的應用程序。

                                            這需要一個應用程序封包的一部分,但在Windows在運行時不使用。

                *可有可無的第五張圖   WideLogo.png 300x150 在開始頁面時可以選擇較大的方塊

 

  • 格線範本的專案檔案

         1. 範本包含下列 HTML 檔案:

             (1)  default.html :是首先載入的頁面,其中提供主內容頁 (每個頁面載入至主視窗的地方) 的標記。

             (2)  groupedItems.html :是首頁。可讓使用者檢視群組和項目,並從其中選取項目以瀏覽至全頁項目檢

                                                  視,或選取群組標籤以瀏覽至群組詳細資料頁面。

             (3)  groupDetail.html :可讓使用者檢視左側的群組詳細資料或右側的項目,然後選取一個項目以瀏覽至全

                                              頁項目檢視。

             (4)  itemDetail.html : 是項目的全頁檢視。

          2. 範本包含下列 JavaScript 檔案:

            (1) default.js : 用於指定應用程式啟動時的行為。

            (2) groupedItems.js : 用於指定與首頁關聯的行為。

            (3) groupDetail.js : 用於指定與群組詳細資料頁面關聯的行為。

            (4) itemDetail.js : 用於指定與全頁項目檢視關聯的行為。

            (5) navigator.js : 用於實作 Windows 市集應用程式 JavaScript 範本的瀏模型。

            (6) data.js : 是資料來源物件,會將資料公開給應用程式的其餘部分。

         3. 範本包含下列 CSS 檔案:

            (1) default.css : 用於指定主內容頁及應用程式整體的 CSS 樣式。

            (2) roupedItems.css : 用於指定首頁的 CSS 樣式。

            (3) groupDetail.css : 用於指定群組詳細資料頁面的 CSS 樣式。

            (4) itemDetail.css : 用於指定全頁項目檢視的 CSS 樣式。

 

 

Blend for Visual Studio 2012

Blend for Visual Studio 2012 提供精確的設計介面和工具,可讓您以視覺化方式建立和編輯 Windows 市集應用程式,藉此協助您設計及建置使用者介面。這些新設計工具利用 Windows 8 技術來建立可在各種 Windows 架構硬體執行的動態應用程式。您可以選擇使用 HTML 或 XAML 來設計使用者介面。

  •  Blend 工作區(圖(二))

            Blend for Visual Studio 2012 的預設工作區包含所有視覺化介面項目:畫板、面板、工作區組態、製作檢

            視和功能表。

            您可自訂 Blend 工作區並進行特別調整。您可以變更面板方向、固定或浮動面板、拖曳面板邊緣以調整

            大小、縮放畫板,以及切換貼齊畫板上的物件。

                                    Blend 工作區圖表

                                                           圖(二)

  1.  功能表:建立新專案和管理設定。
  2. 工具面板:建立及修改應用程式中的物件。
  3. 資產面板:顯示專案可用的所有項目和媒體資源。
  4. 畫板:畫板是您進行大部分視覺化配置工作的位置。請注意,應用區域會由虛擬 Tablet 裝置框住,可準確地呈現您在 [平台] 面板中指定的裝置參數顯示。
  5.  其他面板:可依據您正在使用的專案類型而變更的特定面板。
  •   Blend可使用之語言
  1.  XAML

       使用 Blend 設計以 HTML 建置的 Windows 市集應用程式

         使用 HTML 所建置的 Windows 市集應用程式使用與網站相同的技術。不過,Windows 市集應用程式並非從 Web 伺服器一頁一頁地部署。相反地,它是安裝在使用者的本機電腦上。就像所有原生 Windows 應用程式,使用 HTML 所建置的 Windows 市集應用程式可直接存取基礎平台,並且可以與其他應用程式共用資訊。

  1. 視覺化設計:以視覺方式編輯 HTML、CSS 和 Microsoft 設計樣式控制項。您在 Blend 中看到的內容將是使用者在 Windows 8 中看到的內容。
  2. 互動模式:以其他方面只能在執行階段進行的狀態來設計應用程式,而不需不斷地編譯和執行。
  3. 應用程式建置:將 Windows 應用程式控制項拖放到設計介面、設定屬性,然後設定樣式。
  4. 產生功能強大的程式碼:當您將新的樣式或項目加入至應用程式時,Blend 會處理所有語法並產生簡潔、可靠且可預期的程式碼。
  5. 偵錯 Visual Studio 可以偵錯 JavaScript,但是只有 Blend 可讓您以視覺化方式偵錯 HTML 和 CSS。[Winning 屬性虛擬規則會向您顯示所有項目的 CSS 重疊顯示。[計算值虛擬規則會示範 Windows 8 如何計算每個項目的 CSS 屬性值。[即時 DOM] 面板會進行更新,以顯示執行階段變更。

 

 

      使用 Blend 設計以 XAML 建置的 Windows 市集應用程式

 

      使用 XAML 在 中建置的 Windows 市集應用程式可讓您更能掌握控制項的樣式和動畫。此外,Visual Studio 還提供XAML 設計工具。與 Blend 非常類似,Visual Studio 中的 XAML 設計工具提供主要設計介面和工具箱可用於拖放控制項。

 

  1. 動畫:使用 [物件與時間軸] 和 [狀態] 面板可為您的應用程式建立複雜的動畫。此外,Blend 中的視覺狀態設計功能也可讓您使用新的 Windows 8 主題動畫。
  2. 視覺狀態:使用 [狀態] 和 [裝置] 面板可建立利用 Windows 8 中所支援之視覺狀態和方向的 Windows 應用程式 UI。
  3. 切換:使用 [狀態] 面板,可以為應用程式新增預先定義的切換或建立自訂轉換。
  4. 樣式和 GroupStyle:透過 Blend 中提供的完整樣式及編輯功能,可自訂預設控制項樣式。您也可以自訂 Windows 8 GroupStyles
  5. 範本編輯:使用 [物件與時間軸] 面板或 [階層連結] 列,即可編輯控制項範本。進入範本編輯模式時,您可以使用 [狀態] 面板來加入 Windows 8 主題動畫。
  6. 資料繫結:資料繫結工具支援下列繫結型別:DataContextDataSourceElementNameRelativeSource SelfRelativeSource TemplatedParent 和 StaticResource
  7. 配置:使用內建配置容器 (例如 GridViewListViewStackPanelWrapGrid 等等,全部都能自訂以符合您的需求) 建立 Windows 應用程式配置。
  8. 控制項建立:使用 [工具] 和 [資產] 面板,即可快速又輕鬆地在畫板上建立控制項。
  9. 屬性編輯:使用 [屬性] 面板,即可快速又輕鬆地修改和編輯物件。

 

         

  •  設計工作區          

            適用於使用 XAML 建立之 Windows 市集應用程式的 Blend for Visual Studio 2012 工作區中,包含所有預

            設工作區的視覺介面元素。不過,這些工具是特定於 XAML 架構的專案,且當您使用 XAML 來建立

            Windows 市集應用程式時才能使用。

            若您使用透過 XAML 建立的 Windows 市集應用程式時,也可以使用動畫工作區。 圖(三)

 

工作區
圖(三)

            1. 1 文件索引標籤:顯示所有目前開啟的 XAML 專案文件,包括視窗、網頁、資源字典及使用者控制

                   項。

           1. 2 使用中檔案:顯示畫板目前開啟的文件,同時列出 [文件] 索引標籤目前開啟的所有檔案。

           1. 3 檢視:顯示下列三個即時撰寫環境的其中之一:

                  (1) 設計檢視:透過畫板上的視覺表示,使用 [設計] 檢視來撰寫文件。

                  (2)程式碼檢視:使用 [程式碼] 檢視,撰寫或編輯 XAML 程式碼。

 

  • 動畫工作區

                 

    功能表

   工具面板:顯示您所處理的專案類型可使用的工具。

   物件與時間軸面板:顯示用來建立及修改動畫時間軸的工具。

   畫板:顯示所選取文件的設計檢視。

   專案面板和屬性面板:按一下對應的索引標籤或在 [視窗] 功能表中選取面板,即可顯示所要的面板。

   結果面板:顯示應用程式中的錯誤相關資訊。

 

 

       2.  HTML  圖(四)

             適用於 Windows 市集應用程式的 Blend for Visual Studio 2012 工作區中,包含所有預設工作區的視覺介

             面元素。不過,當您在處理以 HTML 建立的 Windows 市集應用程式專案時,可供使用的工具會是專屬

             於 HTML 專案的工具。 

             工作區配置  

  圖(四)

               2. 1 文件索引標籤:顯示所有目前開啟的專案文件 (包括 HTML、CSS 和 JavaScript 檔案)。

               2. 2 檢視控制項:提供三種選項來控制應用程式:

                    (1)互動模式:使用互動模式可觸發應用程式的不同狀態,然後就可以設定樣式。

                    (2)錯誤指標:指出應用程式中的錯誤,並在 [結果] 面板中顯示錯誤清單。

                    (3)重新整理:在您使用互動模式進行任何狀態變更之前,使用 [重新整理] 可將應用程式還原至其

                                            初始狀態。

               2. 3 檢視:顯示下列三個即時撰寫環境的其中之一:

                    (1)設計檢視:透過畫板上的視覺表示,使用 [設計] 檢視來撰寫文件。

                    (2)程式碼檢視:使用 [程式碼] 檢視來撰寫 HTML、CSS 和 JavaScript。

                    (3) 分割檢視:同時顯示 [程式碼] 和 [設計] 檢視。您也可以使用 [檢視] 功能表上的 [分割檢視方向]

                                              項目來變更視窗方向。

 

  •   建立新專案

    1. 在 [檔案] 功能表上,按一下 [新增專案] (Ctrl+Shift+N)。

            JJ155092.f60e8b59-50de-4da1-9ba8-722dc5394d9d(zh-tw,VS.110).png

   2. 在 [新增專案] 對話方塊中,按一下 [HTML (Windows 市集)]。 

      新增專案

   3. 從對話方塊右側的清單中,選取下列其中一項:       

        (1) 空白應用程式 (HTML):沒有預先定義版面配置或控制項的專案範本。

        (2) 格線應用程式 (HTML):在項目群組之間巡覽的多頁面專案範本。會有一個啟始格線版面配置連結

                                          至專屬的網頁,顯示群組和項目詳細資料。

        (3) 分割應用程式 (HTML):一個兩頁的專案範本,會同時顯示巡覽頁面和詳細資料頁面。

        (4) 固定配置的應用程式:具有可縮放之固定長寬比的專案範本。

        (5) 瀏覽應用程式:具有預先定義之導覽控制項的專案範本。

    4. 在 [名稱] 旁輸入專案的名稱。這會成為專案資料夾和應用程式命名空間的名稱。

    5. 在 [位置] 旁邊,確認想要儲存專案的資料夾路徑。若要選取不同的資料夾,請按一下 [瀏覽]。 

    6. 在 [語言] 下拉式清單中,選取適用於您應用程式邏輯的程式語言。如果是使用 HTML 建置Windows

        應用程式,那麼您的選擇只有 [JavaScript]。

    7. 按一下 [確定]。