[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判断而已，此时点击运行按钮，测试一下。没错，一个猜数字的简单游戏就这样做好了。

完整的项目源码下载：