[Win8]Windows8開發筆記（一）：猜數字大小的遊戲

關於win8開發的入門介紹可以參考這篇文章： 

[Win8]如何使用Visual Studio2012進行Windows8項目開發

下面來寫一個小項目，作為比HelloWorld略高端的入門實驗。

項目需求很簡單，使用者輸入數字，系統顯示輸入數字是大是小還是正好。

下面就開始動手啦~

首先要建立一個空白的市集項目，點擊檔案->建立 或者 Ctrl+Shift+N均可：

此時可以看一下這個項目的檔案結構：

、

所謂麻雀雖小，五髒俱全，該項目雖然是一個空白的應用程式模版，但是很多基本的介面和後台代碼均包含其中。

• 資訊清單檔 (package.appxmanifest)，介紹應用（其名稱、描述、磁貼、起始頁等等）並列出應用程式套件含的檔案。
• 要在開始畫面中顯示的一組大的和小的徽標映像（logo.png 和 smalllogo.png）。
• 表示應用位於 Windows 市集的映像 (storelogo.png)。
• 顯示應用啟動時間的啟動顯示畫面 (splashscreen.png)。
• 應用的 XAML 和代碼檔案（App.xaml 和 App.xaml.cs/.vb）。
• 起始頁 (MainPage.xaml) 和附帶的代碼檔案 (MainPage.xaml.cs/.vb)，這些檔案在應用啟動時運行

雙擊MainPage.xaml檔案，可以看見一個空白的螢幕，按照我們的需求，大概需要三個控制項：1.提示框，引導使用者進行輸入和操作，可以使用TextBlock控制項實現2.輸入框，提供使用者輸入數字，可以使用TextBox控制項實現3.按鈕框，使用者按下按鈕看一下猜測的數字和真正的數字大小比較，可以用Button控制項實現。
在把這三個控制項插進去之前，我們先來看一下這個xaml檔案。xaml是基於html卻不同於html的應用程式標記語言。一開始接觸的時候可能不是很熟悉。不過木有關係，萬事開頭難，開完就簡單了-。-
系統預設的原始代碼如下：

<Page    x:Class="Guess.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:BlogFeeding"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">    </Grid></Page>

可以看出關鍵區段的代碼就在於Grid標記。那麼Grid是個什麼呢？這個以後再說，太早的說粗來就沒有神秘感了。
大致的瞭解的預設的代碼內容後，我們先從工具箱往裡面拖拽一個TextBlock。對你沒有聽錯，是拖拽，不要認為拖拽這種可視化的操作沒有直接對著螢幕敲代碼來的高端大氣上檔次，對於這樣一個簡單的項目拖拽是最直接的方法。同時它還有一個好處，有助於我們熟悉xaml的相關標記。
拖拽完畢之後的預覽視窗大概是這個樣子的：

好吧這個怎麼這麼小？先不著急，先來看看vs為我們產生了哪些代碼：

        <TextBlock HorizontalAlignment="Left" Margin="465,381,0,0"                    TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>

其中，HorizontalAlignment是指水平對其方式，Margin是指頁面邊界，TextWrapping是指文本環繞，Text是指其中的內容，VerticalAlignment是指豎直對齊的方式。在右邊的屬性視窗我們還可以對它進行具體的設定。
瞭解了基本的形式，我們便可以自己做一些調整來查看預覽面板中的變化，並以此來推斷對應標籤的含義。當然，推薦還是閱讀微軟的官方API進行學習。API傳送：

http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/br211369.aspx

有了簡單的瞭解之後，我們繼續拖動物體到螢幕上，我的個人習慣是先拖動控制項，以減少工作量，然後刪除多餘的屬性標籤，逐漸進行修改。和Dreamweaver的缺點一樣，自動產生的程式碼難免有很多冗餘的東西。

整理後的完整頁面如下：

<Page    x:Class="NumGuess.MainPage"    IsTabStop="false"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:NumGuess"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">        <Grid x:Name="Grid1" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">                <!--提示使用者輸入的地區-->        <TextBlock x:Name="PromptText" HorizontalAlignment="Center"                    Margin="0,-250,0,0" TextWrapping="Wrap"                    VerticalAlignment="Center" FontSize="72" Text="輸入你猜的數字"/>                <!--提示使用者輸入的地區-->        <TextBox x:Name="InputNumber" HorizontalAlignment="Center"                  Margin="431,332,431,356" TextWrapping="Wrap"                  VerticalAlignment="Center" FontSize="48" Width="504" Height="80"/>                <Button Content="猜猜看" HorizontalAlignment="Center" Margin="535,467,549,216"                 VerticalAlignment="Center" Height="100"                 Width="300" FontSize="70" FontWeight="Normal" Click="Guess_Click"/>    </Grid></Page>

對應的如下：

看起來似乎差不多了，那麼接下來我們就繼續為它添加背景代碼處理。

點擊選中button，然後在右邊的屬性面板點擊閃電標籤-。-那個就是選定元素的事件處理常式：

在Click中輸入Guess_Click，然後啪唧按下斷行符號，就會自動跳轉到對應的字碼頁面：

在這裡我們可以寫下按鈕按下時候對應的處理代碼。

首先我們在類中聲明一個隨機數：

        //定義隨機產生器        Random myRandom = new Random();        //定義最終的數字        private int myNumber;

聲明好了之後，在構造方法中初始化，隨機產生一個0~1000的整數：

        public MainPage()        {            myNumber = myRandom.Next(0,1000);            this.InitializeComponent();        }

之後我們就可以寫具體的判斷代碼了：

        private void Guess_Click(object sender, RoutedEventArgs e)        {                        //判斷輸入是否符合規範            if (InputNumber.Text != "")            {                //將輸入轉化成整數                int input = Convert.ToInt32(InputNumber.Text);                if (input < myNumber)                {                    PromptText.Text = input+"小啦！";                }                 else if (input > myNumber)                {                    PromptText.Text = input+"大咯！";                }                else                {                    PromptText.Text = input + "正確！";                }            }            else            {                PromptText.Text = "輸入錯誤哦親，請輸入整數數字！";            }            //清空輸入框            InputNumber.Text = "";        }

原理很簡單，一個if判斷而已，此時點擊運行按鈕，測試一下。沒錯，一個猜數位簡單遊戲就這樣做好了。

完整的項目源碼下載：