第二篇 创建Windows 8 Metro Style app应用程序


目录
1、前言
2、创建新项目
3、向开始页面中添加 XAML 内容
4、创建自己的自定义样式
5、修改初始化界面
6、总结与下节摘要

前言

接Windows 8开发Metro style Appliction环境配置,上一节是整个Metro style Appliction开发的基础篇,也是必不可少的一节。环境搭建好了现在开始Metro style Application新的旅程。创建第一个Metro style Appliction通常都叫“HelloWorld”。

创建新项目

1.启动 Visual Studio 2012,会出现 Visual Studio 2012 开始屏幕。


2.选择“文件”>“新建项目”。
会出现“新建项目”对话框。可以在对话框的左侧窗格中选择要显示模板的类型。


3.在左侧窗格中,展开“已安装”,然后展开 Visual C# 并选择“Windows Metro 风格”模板类型。对话框的中心窗格显示用于 Metro 风格应用的项目模板列表。


4.在模版中我们选择Bank App(XAML)


5.在“名称”文本框中,输入 "HelloWorld"。


6.单击“确定”可创建项目。
Visual Studio 创建项目并在“解决方案资源管理器”中显示该项目。
尽管“空白应用”为最基本的模板,但该模板仍包含很多文件:
•清单文件 (package.appxmanifest) 介绍应用(它的名称、介绍、磁贴、开始页面等等)并列出应用包含的文件。
•要在开始屏幕中显示的一组大的和小的徽标图像(logo.png 和 smalllogo.png)。
•表示应用位于 Windows 应用商店的图像 (storelogo.png)。
•显示应用启动时间的初始屏幕 (splashscreen.png)。
•应用的 XAML 和代码文件(App.xaml 和 App.xaml.cs)。
•开始页面 (MainPage.xaml) 和附带的代码文件 (MainPage.xaml.cs),这些文件在应用启动时运行。
这些文件是使用C# 的所有 Metro 风格应用必不可少的文件。在 Visual Studio 中创建的所有项目都包含这些文件。

向开始页面中添加 XAML 内容

创建项目完成后,双击MainPage.Xaml,点击左下角Desin,看到MainaPage.Xaml界面。


点击左边ToolBox选项卡,All XAML Controls下拉框看到XAML中所用到的所有控件。这些控如Web Form 与 Win Form控件一样可以直接双击或拖曳到XAML界面中的任意一个区域。在这里我们使用TextBlock为例。
选中XAML中的TextBlock控件,按F4键可以看到TextBlock控件中的属性。找到Text属性,在值中输入“Hello World”。
或者切换到XAML中找到代码TextBlock代码,输入Text属性。
按F5键进行运行。

创建自己的自定义样式

在上面我们看到了第一个Metro style App展示效果。在这个效果中第一感觉与Win Form界面没有什么区别,看起来界面上的文字还是那么小,没有太大的变化。在这里我们来学习一下自定义样式。
首先点击到XAML代码界面。找到Page标签中。输入代码:

<Page.Resources>
       <Style x:Key="test" TargetType="TextBlock">
               <Setter Property="Foreground" Value="Red"> </Setter>
        </Style>
</Page.Resources>

上面代码就是定义XAML中的样式。注:上面的样式可以放到一个单独样式文件中,在后面部局中会强调。上面主要的标签有:
Page.Resources:存放样式的标签。
Style:样式存放的格式。
x:Key:定义样式的名称。
TargetType:定义的样式是为那个类型的控件使用的。
Setter:设置样式的属性,一个Style样式中可以设置多个Setter。


样式定义好了。我们如何应用到指定的控件中呢?下面看看之前的TextBlock代码变成以下代码:

<TextBlock HorizontalAlignment="Left" Margin="324,470,0,0" TextWrapping="Wrap" Text="TextBlock" Style="{StaticResource test}" VerticalAlignment="Top"/>

在代码中我们发现到多出了Style = "{StaticResource test}",StaticResource是一个静态Resource的标志,后面是Style中的x:Key值。

修改初始化界面

讲到这里我们可以先回顾一下以前的WinForm程序,有个Program.cs文件,只要打开这个文件就可以更改。我们这里打开App.Xaml.cs文件,找到代码:

/// <summary>
        /// 在应用程序由最终用户正常启动时进行调用。
        /// 当启动应用程序以执行打开特定的文件或显示搜索结果等操作时
        /// 将使用其他入口点。
        /// </summary>
        /// <param name="args">有关启动请求和过程的详细信息。</param>
        protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            Frame rootFrame = Window.Current.Content as Frame;

            // 不要在窗口已包含内容时重复应用程序初始化,
            // 只需确保窗口处于活动状态
            if (rootFrame == null)
            {
                // 创建要充当导航上下文的框架,并导航到第一页
                rootFrame = new Frame();

                if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: 从之前挂起的应用程序加载状态
                }

                // 将框架放在当前窗口中
                Window.Current.Content = rootFrame;
            }

            if (rootFrame.Content == null)
            {
                // 当未还原导航堆栈时,导航到第一页,
                // 并通过将所需信息作为导航参数传入来配置
                // 参数
                if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
                {
                    throw new Exception("Failed to create initial page");
                }
            }
            // 确保当前窗口处于活动状态
            Window.Current.Activate();
        }

然后把MainPage修改成你所想要运行的第一个界面。

总结与下节摘要

这一节主要是讲述内容有:1、创建一个Metro Style app应用程序;2、创建自己的自定义样式;3、修改初始化界面。下一节将介绍Windows 8 Metro Style app 中管理应用生命周期和状态。

如果此文章对您有帮助,不妨点击[推荐]
如果要关注后续的文章请点击[关注]
感谢您的阅读,欢迎转载!转载时别忘记添加来源:http://www.cnblogs.com/CsrNet 优质内容筛选与推荐>>
1、bootstrap添加多个模态对话框支持
2、通用爬虫和聚焦爬虫概念
3、进程间数据传递:Queue,Pipe 进程间数据共享:Manager
4、python---深浅copy和赋值运算
5、腾讯携手W3C 参与HTML5等国际标准制定


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn