注:本系列学习帖子我在DevDiv移动开发社区原创首发
转载请注明出处:BeyondVincent(破船)@DevDiv
如果你有什么问题也可以前往交流
下面是首发地址:
[DevDiv原创]Windows 8 Metro App开发Step by Step---(13个学习帖子)
今天我们展开Windows 8 Metro App开发之HelloWorld。本次主题会包含以下内容:
1、Windows 8 Metro App开发环境的搭建
2、HelloWorld创建与相关介绍
3、运行和调试
4、应用程序包的创建和安装(本地,不通过商店)
更多内容请查看下面的帖子
Windows 8 Metro App开发Step by Step
1、Windows 8 Metro App开发环境的搭建
在这里安装Windows 8 Release Preview操作系统和Windows Visual Studio 2012 RC就可以进行Metro App开发了。
操作系统安装[我安装的是32位的]
Windows 8 Release Preview(发行预览版,Windows 8系列的最后一个测试版本):
- Windows Windows 8 Release Preview 简体中文版 32位
- Windows Windows 8 Release Preview 简体中文版 64位
产品密钥:TK8TP-9JN6P-7X7WW-RFFTV-B7QPF
开发工具(只需要安装Windows Visual Studio 2012 RC就可以进行metro app开发)[我安装的是ULtimate旗舰版]
Windows Visual Studio 2012 RC- Windows Visual Studio 2012 RC Ultimate
- Windows Visual Studio 2012 RC Premium
- Windows Visual Studio 2012 RC Professional
- Windows Visual Studio 2012 RC Test Professional
- Microsoft Visual Studio Express 2012 RC for Windows 8
2、HelloWorld创建与相关介绍
为了更加形象直观,下面我以图文的形式进行介绍
a、从开始画面启动VS2012
b、在起始页选项卡中,选择新建项目来创建HelloWorld,也可以从文件菜单->新建->项目来创建。
如下图,模版选择Visual C# Windows Metro style,右边选择Blank App(XAML),然后在下面输入项目名称,路径和解决方案名称,最后点击确定,就创建好了一个最简单的Metro App。
c、创建好的HelloWorld工程如下图,熟悉VS的开发者可能对此画面不陌生,左边主要是代码编辑,右边三项目文件目录组织。当然,这些界面也是可以配置的。
d、右侧,我们可以看到工程的文件组织,如下图所示,下面我会对其中的重要文件进行介绍。
从上图中,可以看到有如下文件和目录:
1)Properties
2)引用
3)Assets
4)Common
5)App.xaml
6)MainPage.xaml
7)Package.appemanifest
1)Properties目录下的文件Assembly.cs主要存放有关程序集的常规信息和程序的版本信息
using System.Reflection;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices;
// 有关程序集的常规信息通过下列特性集
// 控制。更改这些特性值可修改
// 与程序集关联的信息。
[assembly: AssemblyTitle("DevDiv_HelloWorld")]
[assembly: AssemblyDescription("")]
[assembly: AssemblyConfiguration("")]
[assembly: AssemblyCompany("")]
[assembly: AssemblyProduct("DevDiv_HelloWorld")]
[assembly: AssemblyCopyright("Copyright © 2012")]
[assembly: AssemblyTrademark("")]
[assembly: AssemblyCulture("")]
// 程序集的版本信息由下面四个值组成:
//
// 主版本
// 次版本
// 生成号
// 修订号
//
// 可以指定所有这些值,也可以使用“生成号”和“修订号”的默认值,
// 方法是按如下所示使用“*”:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]
[assembly: ComVisible(false)]
2)引用,从上面的图中,我们看到默认有两个引用:.NET for Metro style apps和Windows
Metro 应用使用简装版的.NET框架库。我们可以双击Reference查看看到他们对应的命名空间。
3)Assets,该目录下主要存放程序使用到的Logo,启动画面等信息。
4)Common里面有一个文件:
StandardStyles.xaml,它是一个资源文件,它与App.xaml文件进行关联的。其中包含了一些Style和Template,通过这个文件,我们创建应用会变得更容易。下面我分别摘取了一个Style和Template。
<Style x:Key="BasicRichTextStyle" TargetType="RichTextBlock">
<Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
<Setter Property="TextTrimming" Value="WordEllipsis"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Typography.StylisticSet20" Value="True"/>
<Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
<Setter Property="Typography.CaseSensitiveForms" Value="True"/>
</Style>
<DataTemplate x:Key="Standard130ItemTemplate">
<Grid Height="110" Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
5)App.axml
App.xaml 文件和它对应的代码文件是 App.xaml.cs,用于启动 Metro App。这个 XAML 文件的主要用途是与 Common 文件夹中的StandardStyles.xaml进行关联。如下代码所示
<Application
x:Class="DevDiv_HelloWorld.App"
xmlns="http://schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft/winfx/2006/xaml"
xmlns:local="using:DevDiv_HelloWorld">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--
Styles that define common aspects of the platform look and feel
Required by Visual Studio project and item templates
-->
<ResourceDictionary Source="Common/StandardStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
下面我们来看看 App.xaml.cs文件中的代码
方便阅读,我们其中的注视去掉了。
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace DevDiv_HelloWorld
{
sealed partial class App : Application
{
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
}
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
if (args.PreviousExecutionState == ApplicationExecutionState.Running)
{
Window.Current.Activate();
return;
}
if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
}
var rootFrame = new Frame();
if (!rootFrame.Navigate(typeof(MainPage)))
{
throw new Exception("Failed to create initial page");
}
Window.Current.Content = rootFrame;
Window.Current.Activate();
}
private void OnSuspending(object sender, SuspendingEventArgs e)
{
var deferral = e.SuspendingOperation.GetDeferral();
deferral.Complete();
}
}
}
在上面的代码中,有三个方法
public App()
该方法用于初始化一个应用程序,我们所写的代码,这里是首先被执行的,逻辑上等价于main() 或WinMain()。
protected override void OnLaunched(LaunchActivatedEventArgs args)
当用户正常情况下启动完毕了程序,该方法会被调用。当然,也有其它情况下,该方法会被调用,例如:当启动程序以打开指定的文件,或者显示搜索结果,等等。
private void OnSuspending(object sender, SuspendingEventArgs e)
当程序被中止时,该方法会被调用。
应用程序的生命周期主要就是通过App.xaml.cs文件进行处理的,关于Metro App的生命周期,在后面的学习中,我会进行介绍。现在你只需要知道OnLanunched方法是在程序启动的时候被调用的。在该方法中,会创建并加载MainPage的一个实例,作为应用程序的主入口。
6)MainPage.xaml
下面我们就来看看MainPage.xaml。
我们在刚开始创建Blank App时,VS就会为我们创建一个空白的页面,也就是MainPage.xaml。
如下代码:
<Page
x:Class="DevDiv_HelloWorld.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft/winfx/2006/xaml"
xmlns:local="using:DevDiv_HelloWorld"
xmlns:d="http://schemas.microsoft/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
</Grid>
</Page>
可以看出,其中包含一个Grid控件。而MainPage.xaml.cs的代码则如下[同样,为了代码简洁,我把注视去掉了:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace DevDiv_HelloWorld
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}
}
其中MainPage是初始化函数。OnNavigatedTo方法则是当该页面显示在某个位置的时候,会被调用。
7)Package.appemanifest
最后我们来看看文件Package.appemanifest 。
这是一个提供Metro App信息给Windows runtime的XML文件。信息主要包括:程序显示名称、入口点、支持的旋转、徽标等。
3、运行和调试
看下面这个图,我在MainPage页面分别添加了Button,Image和TextBox下面我给点击按钮添加单击事件,如下图所示,选选中button,然后点击右边的事件按钮,在click中输入ClickButton,然后回车。
就可以在MainPage.xaml.cs中看到对应的函数了。如下图所示。
下面我们就可以运行并调试代码了,首先,我们在ClickButton处打上断点,稍后运行程序,点击button,就会运行到该方法里面来。
在运行程序之前,我先介绍一下Metro App的调试方法:
如下图所示,程序调试有三种方法:模拟器、本地计算机和远程计算机。
其中远程计算机一般就是连接到本机的win8平半电脑了。
在这里,我选择模拟器(Simulator)进行调试程序。点击上图中绿色的三角,或者按F5就可以启动程序进行调试了。
程序在模拟器中的运行画面如下所示。当我们点击button的时候,也会运行到我们之前设置好的断点出。
至此,HelloWorld程序的介绍和运行调试就介绍完毕了。
代码文件在此,欢迎下载: DevDiv_HelloWorld.rar
4、应用程序包的创建和安装(本地,不通过商店)
有时候我们在开发Metro App过程中,或开发完毕,我们的用户想要立即体验一下,这时,我们可以不通过微软的商店进行发布,而是通过本地安装就可以。
这里,我就跟大家分享一下,如何创建应用程序包和在本地安装程序。
a)创建应用程序包
右键单击项目工程文件,如下图所示,选择应用商店->创建应用程序包
然后会出现如下画面,询问是否创建一个上传至商店的包,这里选择No,我们创建本地使用的包。
注意,下面有文字提示,大概意思是:安装的电脑需要有开发者许可证。
然后点击下一步,会让你选择包的路径,版本信息,还有就是相关的配置信息,根据需求选择即可。如下图所示
最后我们点击创建,过一会,会弹出如下提示框,表示创建完毕
我们打开创建的路径,,会看到如下文件,因为在创建的时候,配置信息我选择了四种包类型,所以这里生成了对应的四种包。
至此,应用程序包就生成好了,附件在这里,大家可以下载了去尝试安装: AppPackages.rar
b)程序包的本地安装
下面我们介绍如何在本地进行程序的安装
如下图,由于我在x86机器上安装,所以我选择DevDiv_HelloWorld_1.0.0.2_x86_Debug_Test该文件,然后右键单击Add-AppDevPackage.ps1,选择使用PowerShell运行
看到如下画面:提示需要管理员权限,
输入Enter键,并输入管理员账号密码,来到如下画面,提示是否继续
上面这个画面中,输入Y,并Enter,稍等片刻,就会提示安装成功,如下画面。
我们可以在开始画面中看到刚刚安装的程序,如下图
至此,应用程序包的创建和本地安装就完成了。
谢谢大家的观看。让我们期待下一次的学习吧。
更多推荐
Windows Store apps开发[2]开发环境搭建与HelloWorld
发布评论