體驗Win8 Metro應用開發

裝了Windows8 Consumer Preview和Visual Studio 2011 Beta，體驗一把Metro風格應用開發，先寫個HelloWorld試試。

Metro Style App支援多種開發方式，包括：

    XAML/C# 或 XAML/VB.Net

    HTML/JS

    XAML/C++

    DirectX/C++

也可以把幾種技術混合起來進行開發，我用XAML/C#先試一下。

1、建工程

在Win8環境下，建工程時能看到有Windows Metro style，這個選項在非Win8的環境下是看不到的。建個Blank Application吧，這個最簡單。

<a href="http://blog.51cto.com/attachment/201205/142226159.png" target="_blank"></a>

2、寫界面XAML（BlankPage.xaml）

隻放兩個TextBlock，顯示文本資訊用。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<code>&lt;</code><code>Page</code> 

<code>    </code><code>x:Class</code><code>=</code><code>"HelloWorld.BlankPage"</code> 

<code>    </code><code>xmlns</code><code>=</code><code>"http://schemas.microsoft.com/winfx/2006/xaml/presentation"</code> 

<code>    </code><code>xmlns:x</code><code>=</code><code>"http://schemas.microsoft.com/winfx/2006/xaml"</code> 

<code>    </code><code>xmlns:local</code><code>=</code><code>"using:HelloWorld"</code> 

<code>    </code><code>xmlns:d</code><code>=</code><code>"http://schemas.microsoft.com/expression/blend/2008"</code> 

<code>    </code><code>xmlns:mc</code><code>=</code><code>"http://schemas.openxmlformats.org/markup-compatibility/2006"</code> 

<code>    </code><code>mc:Ignorable</code><code>=</code><code>"d"</code><code>&gt; </code>

<code> </code> 

<code>    </code><code>&lt;</code><code>Grid</code> <code>Background</code><code>=</code><code>"{StaticResource ApplicationPageBackgroundBrush}"</code><code>&gt; </code>

<code>        </code><code>&lt;</code><code>StackPanel</code><code>&gt; </code>

<code>            </code><code>&lt;!--在界面上放兩個TextBlock，一個顯示Hello World，一個顯示時間--&gt;</code> 

<code>            </code><code>&lt;</code><code>TextBlock</code> <code>FontSize</code><code>=</code><code>"60"</code> <code>HorizontalAlignment</code><code>=</code><code>"Center"</code> <code>Margin</code><code>=</code><code>"0,200,0,0"</code><code>&gt;Hello World!&lt;/</code><code>TextBlock</code><code>&gt; </code>

<code>            </code><code>&lt;</code><code>TextBlock</code> <code>Name</code><code>=</code><code>"txtCurrentTime"</code> <code>FontSize</code><code>=</code><code>"48"</code> <code>HorizontalAlignment</code><code>=</code><code>"Center"</code> <code>Margin</code><code>=</code><code>"0,50,0,0"</code><code>&gt;&lt;/</code><code>TextBlock</code><code>&gt; </code>

<code>        </code><code>&lt;/</code><code>StackPanel</code><code>&gt; </code>

<code>    </code><code>&lt;/</code><code>Grid</code><code>&gt; </code>

<code>&lt;/</code><code>Page</code><code>&gt;</code>

3、寫代碼（BlankPage.xaml.cs）

在OnNavigatedTo方法中寫幾行代碼，讓界面上第二個TextBlock顯示目前時間。

<code>protected</code> <code>override</code> <code>void</code> <code>OnNavigatedTo(NavigationEventArgs e) </code>

<code>{ </code>

<code>    </code><code>//建個定時器，每秒更新一下txtCurrentTime的Text為目前時間 </code>

<code>    </code><code>var</code> <code>timer = </code><code>new</code> <code>DispatcherTimer(); </code>

<code>    </code><code>timer.Interval = TimeSpan.FromSeconds(1); </code>

<code>    </code><code>timer.Tick += (sender, args) =&gt; { </code>

<code>        </code><code>txtCurrentTime.Text = DateTime.Now.ToString(); </code>

<code>    </code><code>}; </code>

<code>    </code><code>timer.Start(); </code>

<code>}</code>

OK了，Ctrl+F5跑一下，效果如下：

<a href="http://blog.51cto.com/attachment/201205/142739631.png" target="_blank"></a>

PS：在Win8上開發Metro應用，需要先注冊一個開發者許可。

     本文轉自 BoyTNT 51CTO部落格，原文連結：http://blog.51cto.com/boytnt/859804，如需轉載請自行聯系原作者