Meng-Ru Tsai's Blog

在註冊 Windows Store 帳號時卡住嗎? App 上傳很久還沒審核嗎? 怎麼我收到的錢不如我預期的多?

2013-06-18T04:35:34Z

如果您有以上的疑問，或是在 Windows Store 上有任何註冊、開發、上傳、收費等其他問題，除了到論壇問問看是否已有解答之外，建議大家可直接到以下網站作詢問:

http://getsupport.microsoft.com

會得到微軟官方技術服務團隊的回答及支援!

有各種問題類型供選擇:

之後選擇類別，「應用程式提交和憑證」類:

「Windows 市集註冊和您的帳戶」類:

我個人最常使用的是使用 email 電子郵件，通常 24 小時內就會收到回覆。

以電子郵件詢問:

將 Semantic Zoom 加入格線 (Grid) 應用程式

2013-05-31T19:17:04Z

SemanticZoom 控制項，可以讓使用者在兩個不同檢視 (GridView 或 ListView) 間切換。第一個會是內容的主要檢視，而第二個檢視雖與第一個檢視的內容相同，但是可以讓使用者能快速瀏覽其內容。例如，檢視通訊錄時，使用者可以放大字母，然後查看與該字母相關的名稱。

(圖片來源: http://ww1.prweb.com/prfiles/2012/06/05/9578381/Pinch-to-Zoom.png)

本篇文章的目的，是要在 Visual Studio 2012 內建的「格線應用程式」(Grid App) 模版中，加入 Semantic Zoom 的功能。

我們先來了解一下 SemanticZoom 這個控制項的用法，在一個空白專案裡，把 SemanticZoom 拉到 Main.xaml 中來:

檢查一下所產生出來的 XAML 檔，可以看到它的結構很簡單，包含了兩種不同的檢視方法 (ZoomedInView 及 ZoomedIOutView)，而每種檢視可以處理 GridView 或是 List View 控制項:

我們先來試一段簡單的程式來看看它是如何運作的，貼上以下的程式碼:

<SemanticZoom Grid.Row="1" Name="SemanticZoomData">

<SemanticZoom.ZoomedInView>

<ListView>

<ListViewItem>阿里山</ListViewItem>

<ListViewItem>陽明山</ListViewItem>

<ListViewItem>玉山</ListViewItem>

<ListViewItem>合歡山</ListViewItem>

</ListView>

</SemanticZoom.ZoomedInView>

<SemanticZoom.ZoomedOutView>

<ListView>

<ListViewItem>1</ListViewItem>

<ListViewItem>2</ListViewItem>

<ListViewItem>3</ListViewItem>

<ListViewItem>4</ListViewItem>

</ListView>

</SemanticZoom.ZoomedOutView>

</SemanticZoom>

執行的結果會如以下，使用者即可以在兩個 ListView 之間 Zoom in & out 來作切換:

當然以上的範例並沒有什麼實質意義，但能讓大家很快了解 SemanticZoom 的結構，及其可以產生的效果。

接下來，就要實際在 Vistual Studio 2012 內建的格線 (Grid) 應用程式模版中，加入 Semantic Zoom 的功能了。以下是我最後想呈現出來的效果:

1. 首先開啟「格線應用程式 (XAML)」範本，並打開 GroupedItemsPage.xaml 檔: (之後所有的修改都僅發生在這個檔案之中)

GroupedItemsPage.xaml 檔:

2. 先來檢視一下此檔的 XAML 結構，利用左側 +, - 符號，我們可以看到此頁面的 UI 結構如下；其中的 GridView 檢視是我們要處理的部份。

3. 將 SemanticZoom 拉入後，複製一份 GridView 區塊，再分別放置於 ZoomedInView 及 ZoomedIOutView 的區段中: (這步驟非常重要，請特別注意其相對位置)

4. 由於我們是將原有的 GridView 全部複製，故需重新命名其中一個的 x:Name 值，否則會有 Compiler time error:

5. 請嘗試執行看看，您預期會有什麼結果呢? 由於兩個 GridView 是一模一樣的，所以你無論怎麼 Zoom in、Zoom out．看到的都會是兩個完全相同的檢視。

6. 接下來，我們就要修改其中的一個檢視囉! 由於我想作的是在第二個檢視裡，呈現 Group 名稱的大按鈕，所以我們先打開 ZoomedOutView 所處理的那個 GridView，找到 Button 區塊，新增/改變如下的幾項設定: (Margin 的間距設為30、Height="600" 、Background="BlueViolet" 及 VerticalAlignment="Center")

7. 再於同一個 GridView 的 ItemsPanelTemplate 區段中，加上 Visibility="Collapsed"，以令各個 Group 裡的 Item(s) 不要出現在畫面上:

這樣就完成囉!

完整程式碼下載

Logo 製造機- 適用於Windows Store App 及 Windows Phone 8 App

2013-05-28T12:50:03Z

之前曾介紹過一個 Metro Studio，可以來製作 Windows 8 App Logo，最近發現一個同樣免費、免安裝且操作更方便的工具，不但可以一次製作出適用於 Windows Store App 及 Windows Phone 8 App 的 Logo，還可以直接使

用既有的圖檔來製作。

檔案下載: http://bit.ly/storelogomaker (作者是日本微軟的員工)

操作方式超簡單! 下載解壓後，只要直接執行其 .exe 檔，然後將任一圖檔拉入中央:

接下來可以直接按下右上角那個「Save Icons」的按鈕，所有相對應的 Logo 圖檔就產生了! (您也可以選擇背景顏色或加框)

瀏覽一下所產生的圖檔，可以看到有各種尺寸的 Logos 供您使用:

以 Windows Store Apps 為例，預設是至少需要150x150 (標誌), 30x30 (小標誌), 50x50 (市集標誌) 及 620x300 (啟動顯示畫面) 等4種 Logos，而其預設檔名如以下:

所以您可以在更改這些尺寸的檔名之後，一次拉入至 Assets 之中，所有的 Logos 就改動完畢了!

選擇全部套用:

搞定! 以下即是開始畫面中的樣貌:

[完全初學] 第一個 Windows Store App- 使用格線 (Grid) 應用程式

2013-05-28T09:26:52Z

為了方便開發者能快速進入 Windows Store App 的開發，Visual Studio 2012 內建了二種模版 (templates): 格線(Grid)及分割(Split)應用程式。本篇文章將一步一步教導初學者能由此開發出一個簡單的 Windows Store App。

首先在 Visual Studio 2012 中「新增專案」並選擇「格線應用程式 (XAML)」:

在還未作任何更動前，各位可以直接按 F5，或是選擇以「模擬器」方式嘗試執行:

執行結果如下，各位在畫面上會發現，這個模版含有一些 Group(s)，而每個 Group 又包含了一些 Item(s):

點進 Group Title 的話可看到這個 Group 的說明:

再點入 Item:

接下來我們要作的事，就是將這些灰灰黑黑的圖片，以及如亂碼般的文字替換成我們想提供的資訊。所以我們到 Visual Studio 中的「方案總管」，打開 DataModel 下的 SampleDataSource.cs 檔案，基本上只要修改這個 SampleDataSource.cs 檔，即可改變所有的 Group 及 Item 內的所有文字及圖片。

找到 SampleDataSource()，各位可看到所有預設文字及圖片即來自此處:

我們以最簡單直覺的方式來改動它，先更改 group1 及其第一個 item 來看看成果:

在此我是以介紹阿里山景點為例，資料來源為阿里山國家風景區官網:

在更動過程中有 3 點請注意:

1. 各個 Item(s) 的描述，預設是一個字串變數 ITEM_CONTENT，請逐一把它替換成您想要呈現的字串即可。如我以上的例子是把 ITEM_CONTENT 替換成:

@”大凍山脈嶺延伸緊臨於奮起湖聚落東方….”

2. 圖片的部份，可以直接使用圖片的網址連結。當然，您也可以另存為圖檔後，加入至 Assets 目錄下，然後再指定相對應的路徑及檔名 (ex: Assets/圖檔名-1.jpg)。

3. 我在各個字串的前方加上了'@'，以處理逸出字元 (Escape character) 等。

執行看看吧! 首頁、第二層及第三層的畫面分別為:

依以上步驟，您就可以一步一步來填入所有 Group(s) 及 Item(s) 的資訊了。

Visual Studio 2012 預設的這個格線應用程式模版用了6 個 Groups，每個 Groups 有3~6個數量不等的 Items，各位如果有用不到的 Group(s) 或 Item(s)，只要在前面加上註解符號 (//) 即可。

如果要新增一個 Item 的話，以上面為例，只要把整個 group1.Items.Add 及至分號(;) 的整個 statement 複製至下方，然後記得把”Group-1-Item-5” 改為 “Group-1-Item-6” 即可。

實作至此，各位已將一個 App 的主要呈現內容完成了。當然，要成為一個完整且能上傳至 Windows Store 的 App，我們還得完成以下:

1. 更改 App 名稱，如改為「阿里山國家公園主題之旅賞析」: 打開 Package.appxmanifest 檔並更改「顯示名稱」及「描述」:

2. 更改 Page Title: 打開 GroupedItemsPage.xaml.cs 並於 GroupedItemsPage() 加上一行:

this.pageTitle.Text = "阿里山國家公園主題之旅賞析";

3. 更改背景 (非必須): 開啟某個 .xaml 檔 (如 GroupedItemsPage.xaml)，在下方的 XAML 視窗中點選至 <GridView 的位置，然後在右側的「屬性」->「筆刷」-> Background ->在「單色筆刷」中透過調色盤選擇顏色。

4. 您應注意到我在以上是直接使用圖片的網址來顯示圖片，也就是此 App 需要用到網際網路 (Internet)，故要上架 Windows Store 的話需提供隱私權宣告，詳細說明可見隱私權聲明-最常見的退件原因。在這您可直接實作如以下:

在 App.xaml.cs 檔中的 OnLaunched() 最後加上:

SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;

然後加入以下兩個新方法即可:

private void OnCommandsRequested(SettingsPane sender,

SettingsPaneCommandsRequestedEventArgs args)
{
    UICommandInvokedHandler handler =
             new UICommandInvokedHandler(onSettingsCommand);

    SettingsCommand privacy1Command =
             new SettingsCommand("privacystatementPage", "隱私權原則", handler);

    args.Request.ApplicationCommands.Add(privacy1Command);
}
async void onSettingsCommand(IUICommand command)
{
    SettingsCommand settingsCommand = (SettingsCommand)command;
    if (settingsCommand.Id.ToString().Equals("privacystatementPage"))
    {
        var success =
             await Windows.System.Launcher.LaunchUriAsync(
                    new Uri(@http://www.您的隱私權宣告網址.com));
    }
}

5. 加入 Share contract 的支援 (非必須)。比如您想在 Item 的頁面可以分享描述文字，則可在 ItemDetailPage.xaml.cs 檔中的 LoadState() 方法的最後加上:

try
{
    // Register for DataRequested events
    DataTransferManager.GetForCurrentView().DataRequested

        += OnDataRequested;
 }
 catch (Exception) { }

然後加入以下這個新方法:

// 實作 OnDataRequested()
void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
    try
    {
       var dataPackage = args.Request.Data;
       dataPackage.Properties.Title =

          ((SampleDataItem)this.flipView.SelectedItem).Title;
       dataPackage.Properties.Description =

          ((SampleDataItem)this.flipView.SelectedItem).Subtitle;
       dataPackage.SetText(

          ((SampleDataItem)this.flipView.SelectedItem).Content.ToString()

          );
    }
    catch (Exception)
    { }
}

6. 最後，當然要製作專屬於此 App 的各種 Logo 圖檔了，各位可以參考Logo 製造機- 適用於Windows Store App 及 Windows Phone 8 App 以快速製作出 Logos.

完成了! 這樣的一個 App 就能在 https://appdev.microsoft.com/storeportals/zh-tw 中上傳了。

完整程式碼下載

Windows Store Dashboard 儀表板一覽

2013-04-17T09:52:35Z

您的 Windows Store App 成功上架之後，就可以從「儀表板」(dashboard) 中查看 App 的各種狀態，如下載次數、使用方式、crash report、已賺了多少錢等等。

以下就以我的儀表板為例讓大家了解有哪些功能。

登入https://appdev.microsoft.com/storeportals/zh-tw/之後，首先看到的畫面會是所有進行中或已上架的應用程式:

已上架的應用程式:

點選已上架應用程式的「報告」，就會看到「應用程式摘要」；此頁面中可以看到這個 App 的下載、In-App Purchase、使用方式、評分、品質、財務的所有細節:

點選右上角「詳細資料」後都可以就各別項目展開，展開後還能選擇不同的時間週期(1個月、3個月、6個月、1年)，以及市場、年齡或性別作套用。

「下載」可以看到每一天的下載次數：

透過「使用方式」了解使用者平均每一天花在你的 App 上多少分鐘:

「評分」可以了解使用者的評論，作為 App 改進的參考:

「品質」則可以看到 App 在被執行時，發生例外或損毀的狀況:

「財務」能看到此 App 收益及詳細交易記錄:

官方說明文件及進一步說明可參考: 分析您在 Windows 市集中的應用程式

在 Win8 App 中閱讀 PDF 或 XPS 文件

2013-04-17T05:54:23Z

在這篇文章中提到可以使用 Adobe 或是 Foxit 元件來閱讀 PDF 文件，但對一般開發者而言最大的難處是在 $$!! 是的，這兩家廠商提供的元件雖然功能豐富，但其價格也造成一般開發者的門檻。

好消息! 有一個可以免費使用的 WinRT 元件已在 Git 釋出!

原文說明在此:

Reading PDF and XPS on your Windows 8 application using WinRT (C#)

Reading PDF and XPS on your Windows 8 application using WinRT (JavaScript)

Git repo: http://git.ghostscript.com/?p=user/mvrhel/mupdf.git;a=summary

各位也可以直接下載其 Sample Code: http://www.catuhe.com/msdn/pdfreader.zip，將 PDF 文件呈現在 FlipView 讓使用者翻動:

也可以一次呈現2頁:

使用者Zoom in and ont，即可以看到 Vector PDF 的高解析度。

Optical zoom (bitmap based):

Vectorized zoom:

全中文線上影音教學頻道開播–Channel9 Taiwan

2013-04-15T07:00:10Z

「第9頻道 Taiwan」是台灣微軟 DPE 提供的台灣本地製作之教學、課程錄影、開發營活動等相關影片，內容包括所有微軟的開發或平台技術。

大家也可訂閱 RSS 來隨時得知最新訊息!

更多關於開發技術的內容，請上 http://msdn.microsoft.com/zh-tw/

摩登開發人員訓練營 - 投影片及範例程式下載及錄影

2013-04-10T08:46:35Z

於2013/3/28-3/29 進行的摩登開發人員訓練營中，「Windows市集應用程式最佳實踐」這場次的投影片及範例程式可於 http://sdrv.ms/ZzMsuo 下載。

投影片同時可在SlideShare下載或線上觀看:

主題皆是以實作為主，包含以下這幾項：

•「分享」(Share Contract)

•「搜尋」(Search Contract)

•右側工具列 (Charms Bar)

•如何儲存使用者個人設定? (Roaming 應用)

•取得目前位置 (Geolocation)

•使用 WebView 的眉角

•取得及處理 JSON 資料

•其他:

–播放音樂或音效 (MediaElement)

–選取本地或需端檔案 (FilePicker)

–背景執行或下載 (Background Task/Transfer)

當天的課程內容錄影:

使用 JSON 及 Geolocation- 小於 50 行程式碼的 Windows Store App 又一番

2013-04-10T08:12:19Z

我想寫個小 App ，首先是想抓取台北市政府資料開放平台 (http://data.taipei.gov.tw) 所提供的 JSON 資料，例如溫泉業者、停車場、各區運動中心等等，然後顯示選擇場所的附近地圖，進而取得由所在位置出發的路線規劃。

開始 coding! (此文所用程式碼在http://sdrv.ms/ZzMsuo，請自由下載使用)

我們先來看看台北市提供的「OK認證-游泳場所業」的資料如以下，可以看到「資料介接」的 JSON 連結為: http://data.taipei.gov.tw/opendata/apply/json/N0JCNzMwNEYtMkRDQi00ODNFLUIzQjMtN0E0ODM4RTU4NUUz ，此連結將被作為我的資料來源。

接下來打開 Visual Studio 2012，開啟一空白 Windows Store App 專案，打開 MainPage.xaml 並規劃介面如以下:

各位可以看到畫面左邊我拉了一個 ListBox 控制項，畫面右邊拉了一個 WebView，是準備用來呈現地圖的，同時右下角有個RadioButton group 及一個 Button 按鈕。

以下我實作了一個 GetJSON() 方法:

private async Task GetJSON()
{
     string strURI = "http://data.taipei.gov.tw/opendata/apply/json/N0JCNzMwNEYtMkRDQi00ODNFLUIzQjMtN0E0ODM4RTU4NUUz";
     var http = new HttpClient();
     http.MaxResponseContentBufferSize = Int32.MaxValue;
     var response = await http.GetStringAsync(strURI);

     JsonValue jsonValue = JsonValue.Parse(response.ToString());
     int arraySize = jsonValue.GetArray().Count;

     this.listArray = new string[arraySize];
     this.telArray = new string[arraySize];
     this.addrArray = new string[arraySize];

     for (int i = 0; i < arraySize; i++)
     {
          IJsonValue element = jsonValue.GetArray()[i];
          string strName = element.GetObject().GetNamedString("name");
          listArray[i] = strName;
          string strTel = element.GetObject().GetNamedString("tel");
          telArray[i] = strTel;
          string strAddr = element.GetObject().GetNamedString("poi_addr");
          addrArray[i] = strAddr;
     }
}

以上程式基本上作了兩件事:

1. 把 JSON 資料抓下來：各位可以看到我只用了一個 GetStringAsync() 方法就將資料抓取下來成為一個JSON字串。

2. 接下來是要處理所得到的 JSON 字串：在處理之前我們得先了解此 JSON 字串的結構，以此資料為例，會發現此JSON字串為一包含多個物件 (objects) 之陣列 (arrays)，如以下:

了解資料結構後，就能參考使用 JavaScript 物件標記法這篇文章，如以上的程式碼，利用一個 for 迴圈讀取陣列中的所有物件，取得所需要的值；再於以下的 OnNavigatedTo() 方法中，將所有的游泳場所名塞入位於畫面左側的 ListView:

protected async override void OnNavigatedTo(NavigationEventArgs e)
{
     await GetJSON();
     for (int i = 0; i < listArray.Length; i++)
     {
          listBox1.Items.Add(listArray[i].ToString());
     }
     // Register for DataRequested events
     DataTransferManager.GetForCurrentView().DataRequested += OnDataRequested;
}

在此請注意，GetJSON() 方法中因為至少呼叫一個非同步方法(即 GetStringAsync())，所以在方法的宣告前要加一個 async ；同時在呼叫此 GetJSON() 方法之前得加上一個 await 的關鍵字。 (這部份可參考: 使用 Async 和 Await 設計非同步程式)

跑起來會長得像這樣:

接下來是實作當使用者點選 ListView 裡的游泳場所後，會在右邊的 WebView 中呈現選取所在地的 Google 地圖 (透過URI string的方式):

private void listBox1_Tapped_1(object sender, TappedRoutedEventArgs e)
{
      strSelectedList = listBox1.SelectedValue.ToString();
      strSelectedAddress = addrArray[listBox1.SelectedIndex].ToString();
      strSelectedTel = telArray[listBox1.SelectedIndex].ToString();


      webView.Source = new Uri(Uri.EscapeUriString

("https://maps.google.com/?output=embed&num=1&saddr=" + strSelectedAddress));

      listName.Text = strSelectedList;
      listTel.Text = strSelectedTel;
      listAddr.Text = strSelectedAddress;
}

使用者點選後就會長得像這樣:

最後，我想讓使用者能看到由目前所在位置到選取地點的規劃路線，所以實作右下角的 Button 按鈕程式如下:

private async void Button_Click_1(object sender, RoutedEventArgs e)
{
     if (strSelectedAddress.Length > 0)
     {
          if (geo == null)
          {
               geo = new Geolocator();
          }
          try
          {
               Geoposition pos = await geo.GetGeopositionAsync();
               string strSADDR = pos.Coordinate.Latitude.ToString() + "," +

                                 pos.Coordinate.Longitude.ToString();
               webView.Source = new Uri(Uri.EscapeUriString(

                                 "https://maps.google.com/?num=1&saddr=" +

                                 strSADDR + "&daddr=" + strSelectedAddress +

                                 "&dirflg=" + strDirFlg));
          }
          catch (Exception)
          {
               new Windows.UI.Popups.MessageDialog(

            "您的機器沒有定位服務(GPS)或目前服務是關閉的，請透過「設定」快速鍵重新開啟。

            \nYour location services are currently turned off.

            Use the Settings charm to turn them back on.").ShowAsync();
           }
      }
}

各位可以看到我首先取得目前所在位置的經緯度，是透過 Geolocator.GetGeopositionAsync() 這個方法來取得；接下來只是再度重組一個 URI string，透過Google Maps 規劃路線即可。取得目前所在位置細節另可參考這篇文章。

實作之後的執行畫面:

程式碼: http://sdrv.ms/ZzMsuo

附註: 台灣目前一些公開資訊開放平台: 行政院農委會開放資料平台、台北市政府、新北市政府、台中市、台南市教育局、文化部與臺灣中央政府的資料入口網站「data.gov.tw 」。

關於 WebView: 10 件你需要知道的事

2013-03-12T11:08:10Z

Ten Things You Need to Know About WebView 是美國微軟資深工程師 Matt Small 發表的文章，我發現有幾點特別值得提出來說明，讓大家更了解 WebView 在 Windows Store App 的應用，希望對大家有幫助；其文後有他的範例程式碼供下載。

以下是他列出的 10 點需要注意的事:

WebView is not a general-purpose browser

WebView 這個控制項的目的，是讓你能在 App 裡，連結到某個特定的網頁，以達到此 App 所欲提供的功能；而非讓使用者能任意瀏覽任何網頁。舉例來說，如果有些特定資訊可能會時常變動 (如即時路況等)，與其重新上架你的 App，將這資訊放在 WebView 當然比較適當；但如果你的 App 只是純粹作為一個入口，僅是讓使用者透過 WebView 瀏覽到某個網站首頁，再讓使用者在網站中任意點選連結的話，是非常有可能在上架審查中被退件的。

WebView always renders on top of XAML

這點還滿有趣的，你會發現在 XAML 中 WebView 不論放在什麼位置，程式跑起來時 WebView 一定會擋在所有的控制項之上。原因是 WebView 並非 Control object 的 subclass 的關係；原文連結裡有解法可參考。

WebView doesn’t do Flash. Or Silverlight. Or PDF. Or any other ActiveX control or plugin.

如第1點所言， WebView 並非是一個完整的瀏覽器，為了穩定性及效能的原因並不支援 Flash, Silverlight, PDF or ActiveX，同時「目前」也不支援某些 HTML5 的功能，如 AppCache, IndexedDB, programmatic access to the Clipboard, or geolocation.

How to invoke Javascript inside the displayed webpage of a Webview

簡單來說 WebView 可以透過 ms-appx-web 讀取並展示已包含在你的 App 專案中的 HTML 檔案，甚至執行其中的 JavaScript 副程式。而以下的 5, 6, 8 三點都算是延伸此點的應用。

How to receive information from the WebView
How to inject javascript into a WebView page
How to clear the WebView cache

很不幸的，並無法透過程式的方式來清除 WebView cache，只能透過 command line 的方式: C:\Users\<username>\AppData\Local\Packages\<PackageName>\Attrib –H –S /S /D

How to embed a font into your app to be used by WebView
Launching other apps from a link inside WebView

如何在 WebView link 中開啟其他的 App 呢? 其實 Windows Store Apps 是沒有辦法「直接」開啟某個 App 的，但能透過 Extension handlers 的「間接」方式來開啟某特定 App，也就是設定某副檔名 (extension) 的檔案 (如：.jpeg 檔) 可以用某個 App 開啟。如以下在專案的 .appxmanifest >「宣告」>「檔案類型宣告」作設定即可:

How to get rid of those annoying JavaScript exceptions when debugging

在 debug 時當 WebView 瀏覽到的網頁出現 JavaScript 例外，會出現 Just-In-Time Debugger 的惱人錯誤 (如例圖)，要關掉它很簡單，只要在 Visual Studio 2012 中作以下設定即可:
Debug > Options and Settings > Debugging > Just-In-Time > Uncheck "Script"
偵錯 > 選項和設定> 偵錯 > Just-In-Tim > 取消勾選「指令��」

其實以上大部份的內容在 WebView 的 MSDN 官方文件的 Remakrs 段落中都有說明，只是可能沒有很細節的描述，在此也一併轉貼如下給大家參考:

Remarks

WebView is not a Control subclass and thus does not have a control template. The display area is the Width and Height.

WebView has the characteristic that other UI regions such as controls cannot be rendered on top of the WebView. This is because of how window regions are handled internally, particularly how input events are processed and how the screen draws. If you want to render HTML content and also place other UI elements on top of that HTML content, you should use WebViewBrush as the render area. The WebView still provides the HTML source information, and you reference that WebView through the SourceName property. WebViewBrush does not have this overlay limitation.

If you want to display an interactive WebView that only occasionally has overlapping content (such as a drop-down list or app bar), you can temporarily hide the WebView control when necessary, replacing it with an element using a WebViewBrush fill. Then, when the overlapping content is no longer present, you can display the original WebView again. For more info, see the WebView control sample.

WebView doesn’t support many of the UIElement events like KeyDown, KeyUp, and PointerPressed. A common workaround to this problem is to use WebView.InvokeScript with eval to use the HTML event handlers, and to use window.external.notify from the HTML event handler to notify the application using WebView.ScriptNotify.

Note WebView always uses Internet Explorer 10 in document mode. Additionally, WebView does not currently support some HTML5 features including AppCache, IndexedDB, programmatic access to the Clipboard, or geolocation. Furthermore, WebView does not support the ms-appdata scheme, although it does support the ms-appx-web scheme. This enables you to load content files in your project.

Meng-Ru Tsai's Blog

在註冊 Windows Store 帳號時卡住嗎? App 上傳很久還沒審核嗎? 怎麼我收到的錢不如我預期的多?

如果您有以上的疑問，或是在 Windows Store 上有任何註冊、開發、上傳、收費等其他問題，除了到論壇問問看是否已有解答之外，建議大家可直接到以下網站作詢問:

http://getsupport.microsoft.com

會得到微軟官方技術服務團隊的回答及支援!

有各種問題類型供選擇:

之後選擇類別，「應用程式提交和憑證」類:

「Windows 市集註冊和您的帳戶」類:

我個人最常使用的是使用 email 電子郵件，通常 24 小時內就會收到回覆。

以電子郵件詢問:

將 Semantic Zoom 加入格線 (Grid) 應用程式

(圖片來源: http://ww1.prweb.com/prfiles/2012/06/05/9578381/Pinch-to-Zoom.png)

本篇文章的目的，是要在 Visual Studio 2012 內建的「格線應用程式 」(Grid App) 模版中，加入 Semantic Zoom 的功能。

我們先來了解一下 SemanticZoom 這個控制項的用法，在一個空白專案裡，把 SemanticZoom 拉到 Main.xaml 中來:

檢查一下所產生出來的 XAML 檔，可以看到它的結構很簡單，包含了兩種不同的檢視方法 (ZoomedInView 及 ZoomedIOutView)，而每種檢視可以處理 GridView 或是 List View 控制項:

我們先來試一段簡單的程式來看看它是如何運作的，貼上以下的程式碼:

<SemanticZoom Grid.Row="1" Name="SemanticZoomData">

<SemanticZoom.ZoomedInView>

<ListView>

<ListViewItem>阿里山</ListViewItem>

<ListViewItem>陽明山</ListViewItem>

<ListViewItem>玉山</ListViewItem>

<ListViewItem>合歡山</ListViewItem>

</ListView>

</SemanticZoom.ZoomedInView>

<SemanticZoom.ZoomedOutView>

<ListView>

<ListViewItem>1</ListViewItem>

<ListViewItem>2</ListViewItem>

<ListViewItem>3</ListViewItem>

<ListViewItem>4</ListViewItem>

</ListView>

</SemanticZoom.ZoomedOutView>

</SemanticZoom>

執行的結果會如以下，使用者即可以在兩個 ListView 之間 Zoom in & out 來作切換:

當然以上的範例並沒有什麼實質意義，但能讓大家很快了解 SemanticZoom 的結構，及其可以產生的效果。

接下來，就要實際在 Vistual Studio 2012 內建的格線 (Grid) 應用程式模版中，加入 Semantic Zoom 的功能了。以下是我最後想呈現出來的效果:

1. 首先開啟「格線應用程式 (XAML)」 範本，並打開 GroupedItemsPage.xaml 檔: (之後所有的修改都僅發生在這個檔案之中)

GroupedItemsPage.xaml 檔:

2. 先來檢視一下此檔的 XAML 結構，利用左側 +, - 符號，我們可以看到此頁面的 UI 結構如下；其中的 GridView 檢視是我們要處理的部份。

3. 將 SemanticZoom 拉入後，複製一份 GridView 區塊，再分別放置於 ZoomedInView 及 ZoomedIOutView 的區段中: (這步驟非常重要，請特別注意其相對位置)

4. 由於我們是將原有的 GridView 全部複製，故需重新命名其中一個的 x:Name 值，否則會有 Compiler time error:

5. 請嘗試執行看看，您預期會有什麼結果呢? 由於兩個 GridView 是一模一樣的，所以你無論怎麼 Zoom in、Zoom out．看到的都會是兩個完全相同的檢視。

7. 再於同一個 GridView 的 ItemsPanelTemplate 區段中，加上 Visibility="Collapsed"， 以令各個 Group 裡的 Item(s) 不要出現在畫面上:

這樣就完成囉!

完整程式碼下載

Logo 製造機- 適用於Windows Store App 及 Windows Phone 8 App

之前曾介紹過一個 Metro Studio，可以來製作 Windows 8 App Logo，最近發現一個同樣免費、免安裝且操作更方便的工具，不但可以一次製作出適用於 Windows Store App 及 Windows Phone 8 App 的 Logo，還可以直接使

用既有的圖檔來製作。

檔案下載: http://bit.ly/storelogomaker (作者是日本微軟的員工)

操作方式超簡單! 下載解壓後，只要直接執行其 .exe 檔，然後將任一圖檔拉入中央:

接下來可以直接按下右上角那個「Save Icons」的按鈕，所有相對應的 Logo 圖檔就產生了! (您也可以選擇背景顏色或加框)

瀏覽一下所產生的圖檔，可以看到有各種尺寸的 Logos 供您使用:

以 Windows Store Apps 為例，預設是至少需要150x150 (標誌), 30x30 (小標誌), 50x50 (市集標誌) 及 620x300 (啟動顯示畫面) 等4種 Logos，而其預設檔名如以下:

所以您可以在更改這些尺寸的檔名之後，一次拉入至 Assets 之中，所有的 Logos 就改動完畢了!

選擇全部套用:

搞定! 以下即是開始畫面中的樣貌:

[完全初學] 第一個 Windows Store App- 使用格線 (Grid) 應用程式

為了方便開發者能快速進入 Windows Store App 的開發，Visual Studio 2012 內建了二種模版 (templates): 格線(Grid)及分割(Split)應用程式。本篇文章將一步一步教導初學者能由此開發出一個簡單的 Windows Store App。

首先在 Visual Studio 2012 中「新增專案」並選擇「格線應用程式 (XAML)」:

在還未作任何更動前，各位可以直接按 F5，或是選擇以「模擬器」方式嘗試執行:

執行結果如下，各位在畫面上會發現，這個模版含有一些 Group(s)，而每個 Group 又包含了一些 Item(s):

點進 Group Title 的話可看到這個 Group 的說明:

再點入 Item:

找到 SampleDataSource()，各位可看到所有預設文字及圖片即來自此處:

我們以最簡單直覺的方式來改動它，先更改 group1 及其第一個 item 來看看成果:

在此我是以介紹阿里山景點為例，資料來源為阿里山國家風景區官網:

在更動過程中有 3 點請注意:

1. 各個 Item(s) 的描述，預設是一個字串變數 ITEM_CONTENT，請逐一把它替換成您想要呈現的字串即可。如我以上的例子是把 ITEM_CONTENT 替換成:

2. 圖片的部份，可以直接使用圖片的網址連結。當然，您也可以另存為圖檔後，加入至 Assets 目錄下，然後再指定相對應的路徑及檔名 (ex: Assets/圖檔名-1.jpg)。

3. 我在各個字串的前方加上了'@'，以處理逸出字元 (Escape character) 等。

執行看看吧! 首頁、第二層及第三層的畫面分別為:

依以上步驟，您就可以一步一步來填入所有 Group(s) 及 Item(s) 的資訊了。

Visual Studio 2012 預設的這個格線應用程式模版用了6 個 Groups，每個 Groups 有3~6個數量不等的 Items，各位如果有用不到的 Group(s) 或 Item(s)，只要在前面加上註解符號 (//) 即可。

如果要新增一個 Item 的話，以上面為例，只要把整個 group1.Items.Add 及至分號(;) 的整個 statement 複製至下方，然後記得把”Group-1-Item-5” 改為 “Group-1-Item-6” 即可。

實作至此，各位已將一個 App 的主要呈現內容完成了。當然，要成為一個完整且能上傳至 Windows Store 的 App，我們還得完成以下:

1. 更改 App 名稱，如改為「阿里山國家公園主題之旅賞析」: 打開 Package.appxmanifest 檔並更改「顯示名稱」及「描述」:

2. 更改 Page Title: 打開 GroupedItemsPage.xaml.cs 並於 GroupedItemsPage() 加上一行:

this.pageTitle.Text = "阿里山國家公園主題之旅賞析";

3. 更改背景 (非必須): 開啟某個 .xaml 檔 (如 GroupedItemsPage.xaml)，在下方的 XAML 視窗中點選至 <GridView 的位置，然後在右側的「屬性」->「筆刷」-> Background ->在「單色筆刷」中透過調色盤選擇顏色。

本篇文章的目的，是要在 Visual Studio 2012 內建的「格線應用程式」(Grid App) 模版中，加入 Semantic Zoom 的功能。

1. 首先開啟「格線應用程式 (XAML)」範本，並打開 GroupedItemsPage.xaml 檔: (之後所有的修改都僅發生在這個檔案之中)

7. 再於同一個 GridView 的 ItemsPanelTemplate 區段中，加上 Visibility="Collapsed"，以令各個 Group 裡的 Item(s) 不要出現在畫面上: