65.9K
CodeProject 正在变化。 阅读更多。
Home

我的第一个 Windows 8 应用程序 – Metro Puzzle

Shai Raiten
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.83/5 (51投票s)

2011 年 9 月 29 日

Ms-PL

4分钟阅读

viewsIcon

133552

downloadIcon

6473

我的第一个 Windows 8 应用程序，Metro Puzzle。

引言

Windows 8 是 Microsoft Windows 的下一版本，这是一系列由 Microsoft 生产的操作系统，用于个人电脑，包括家用和商用台式机、笔记本电脑、上网本、平板电脑、服务器和媒体中心 PC。

除了传统的 Intel 和 AMD 的 x86 微处理器外，它还增加了对 ARM 微处理器的支持。其用户界面已更改，以便除了传统的鼠标、键盘和笔输入外，更好地适应触摸屏输入。

Windows 8 将包含一个名为 Metro UI 的新用户界面。随着新变化，开始菜单被新的开始屏幕取代，开始屏幕上有包含应用程序快捷方式、Metro 风格应用程序和更新磁贴的磁贴，类似于 Windows Phone 中的磁贴。

相关链接 

背景

我参加了 Build 大会，在那里我第一次看到了新的 Windows 8 操作系统以及 Microsoft 在新版本中带来的许多酷炫功能。

关于 ALM、Metro 的新功能我有很多话要说，但一如既往，我更喜欢先用新技术构建一些东西，而不是谈论它……。

所以现在，我将谈论我为 Windows 8 开发的第一个 Metro 应用程序，名为 Metro Puzzle，基于 Puzzle 15，也称为 N-Puzzle。

如何构建 Puzzle 15 游戏

MetroPuzzle/1.png

第一步：准备您的环境

要开始使用 Metro 应用程序，您需要安装 Windows 8 Developer Preview 以及开发人员工具 – 在此处下载。

Windows Developer Preview 在支持 Windows Vista 和 Windows 7 的硬件上运行效果很好

  • 1 千兆赫兹 (GHz) 或更快的 32 位 (x86) 或 64 位 (x64) 处理器
  • 1 GB RAM (32 位) 或 2 GB RAM (64 位)
  • 16 GB 可用硬盘空间 (32 位) 或 20 GB (64 位)
  • DirectX 9 图形设备，WDDM 1.0 或更高版本的驱动程序
  • 要利用触摸输入，需要支持多点触控的屏幕
  • 要运行 Metro 风格的应用，您需要 1024 X 768 或更高的屏幕分辨率

第二步：创建项目

借助新的开发人员工具，您将能够使用 C#、Visual Basic、C++ 和 JavaScript 创建 Windows Metro 风格的应用程序。

MetroPuzzle/2.png

有一些很棒的模板可用于开始开发 Metro 应用程序，如 Grid 和 Split，但对于我的拼图，我创建了一个新的应用程序项目。

第三步：添加 Metro 应用程序栏

因为 Windows 8 应该支持触摸屏系统，所以 Microsoft 创建了 ApplicationBar 对象，允许没有鼠标的用户只需从屏幕底部向上滑动手指即可执行右键单击操作。

当然，如果您使用鼠标，只需右键单击即可出现应用程序栏。

MetroPuzzle/3.png

那么如何做呢？

只需在 XAML 文件末尾之前添加 ApplicationBar 控件，并确保 ApplicationBar 的高度为 88（Metro 标准）。

<ApplicationBar Grid.ColumnSpan="9" Height="88" Grid.Row="9" 
                VerticalAlignment="Bottom">
    <StackPanel Orientation="Horizontal">
        <Button Content="Exit" Style="{StaticResource BackButtonStyle}"
                x:Name="btnBack" Click="btnBack_Click" />
        <Button Content="New Game" 
                Style="{StaticResource RefreshButtonStyle}" 
                x:Name="btnnewGame" Click="btnnewGame_Click"/>
    </StackPanel>
</ApplicationBar>

第四步：添加 Toast

Toast 是通知用户某事的方式；您现在可以向用户显示 Toast，而不是使用烦人的消息框。

Toast 会出现在右下角，不会阻止用户继续工作，Toast 会在几秒钟后消失。

MetroPuzzle/4.png

如枚举所示，Toast API 有几个默认模板。

public enum ToastTemplateType
{
    ToastImageAndText01 = 0,
    ToastImageAndText02 = 1,
    ToastImageAndText03 = 2,
    ToastImageAndText04 = 3,
    ToastSmallImageAndText01 = 4,
    ToastSmallImageAndText02 = 5,
    ToastSmallImageAndText03 = 6,
    ToastSmallImageAndText04 = 7,
    ToastText01 = 8,
    ToastText02 = 9,
    ToastText03 = 10,
    ToastText04 = 11,
}

在您的代码中调用 Toast 之前，您需要确保在“Package.appxmanifest”文件中将“Toast Capable”设置为“Yes”。

MetroPuzzle/5.png

下面的代码定义了一个带有 Image 和 Text 的 Toast 模板。

void DisplayToastWithImage()
{
    // GetTemplateContent returns a Windows.Data.Xml.Dom.XmlDocument 
    // object containing the toast XML
    XmlDocument toastXml = ToastNotificationManager.
           GetTemplateContent(ToastTemplateType.ToastImageAndText01);
 
    // You can use the methods from the XML document to specify all of the
    // required parameters for the toast
    XmlNodeList imageElements = toastXml.GetElementsByTagName("image");
    XmlElement imageElement = (XmlElement)imageElements.Item(0);
    imageElement.SetAttribute("src", "package://images\\Winner.png");
    imageElement.SetAttribute("alt", "Placeholder image");
 
    XmlNodeList textElements = toastXml.GetElementsByTagName("text");
    for (uint i = 0; i < textElements.Length; i++)
    {
        textElements.Item(i).AppendChild
             (toastXml.CreateTextNode("Congratulations You Won"));
    }
 
    // Create a toast from the Xml, then create a ToastNotifier object 
    // to show the toast
    ToastNotification toast = new ToastNotification(toastXml);
 
    // If you have other applications in your package, you can specify 
    // the AppId of the app to create a ToastNotifier for that application
    ToastNotificationManager.CreateToastNotifier().Show(toast);
}

第五步：添加共享支持

Metro 应用程序中最酷的功能之一是 Contracts API；Contracts 允许您使用 WinRT 与 Shell 和其他应用程序进行交互。

例如：如果您想选择一个本地文件，或发布一条推文，您只需使用 Contracts 将您想共享的对象发送给另一个程序。

MetroPuzzle/6.png

首先，创建一个 DataTransferManager 实例并实现 DataRequested 事件。

private DataTransferManager _dataTransferManager;

public MainPage()
{
    _dataTransferManager = DataTransferManager.GetForCurrentView();
    _dataTransferManager.DataRequested +=
        new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>
        (_dataTransferManager_DataRequested);
}

在 DataRequested 中，只需定义您想发送到共享应用程序的内容；您还可以发送位图或其他内容，具体取决于您的应用程序。

在下面的示例中，如果用户想分享并且仍在玩游戏，我将发送应用程序下载链接，但如果用户赢得了游戏，我将发送他的分数。

void _dataTransferManager_DataRequested(
      DataTransferManager sender, DataRequestedEventArgs args)
{
    args.Request.Data.Properties.Title = "Metro Puzzle";
    if (_timer.IsEnabled) // If the user didn't finish the game 
    {
     args.Request.Data.Properties.Description = "Share Metro Application";
     args.Request.Data.SetText("Got Windows 8? You Should Download" +
                               " Metro Puzzle – " + Const.DownloadLink);
    }
    else
    {
     args.Request.Data.Properties.Description = "Share Win";
     args.Request.Data.SetText(string.Format("I've just finish Metro "+
           "Puzzle in {0} moves in {1}, think you can beat me? {2}", 
            txtMoves.Text, txtTime.Text, Const.DownloadLink));
    }
}

您还可以使用以下方法按需强制显示 Share UI

DataTransferManager.ShowShareUI();

如何部署它

在 Visual Studio 中打开解决方案并编译它，或单击 Deploy.bat 文件。

MetroPuzzle/7.png

关注点

新的 Windows 8 WinRT 和 Metro 应用程序还有很多内容，在接下来的几周里，我将撰写更多关于该主题的进阶文章。

© . All rights reserved.