试水Windows 8 Metro application(xaml)及我的一些理解

前不久,微软召开了Build大会,向开发者们公布了最新版本的Windows 系统,即Windows 8的一些信息。从各方面的反应来看,总体还是比较积极的(微软这次的大会算是舍了大本了,每个参会人员都免费得到一台平板电脑呢Nyah-Nyah),我最近也找到有关的视频了解学习了一下,和很多朋友一样,我从开发人员的角度,比较关注的是,新版的Windows系统,及其在界面和整个生态环境方面的一些重大改变,将给我们这个行业,或者我们自己的公司和个人带来什么切身的影响。

带着这样的疑问,我下载了微软提供的Windows Developer Preview版本安装试用了一下,这一篇文章将结合我自己的体会,给大家一些实际的参考信息。

关于BUILD大会的两个主题演讲,有时间的朋友,应该全部看一遍

http://www.buildwindows.com/

国内也有视频网站有转载,我这里就不介绍了。

 

如果你想尝鲜使用Windows Developer Preview,可以在这里下载

http://msdn.microsoft.com/en-us/windows/apps/br229516 

我是参照下面这篇文章的介绍进行安装的,我用移动硬盘安装,还比较顺利。

http://www.cnblogs.com/wpf_gd/archive/2011/09/15/2177810.html

【备注】如果对系统安装不是特别清楚的同学,我建议你最好烧录一张DVD,然后在单独的机器安装,否则如果万一出现问题,可能会对你的工作造成影响

安装好之后,可以看到下面这样的界面,这就是一再被说到Metro界面风格

image

 

很显然,界面是第一个重大的变化。但实际上,这个界面并不是Windows 8的首创,这个界面最早是出现在Zune中,然后出现在Windows Phone 7中,现在只是将它的使用范围进一步扩大,微软的目标是希望以后的桌面电脑、平板电脑、手机都使用这种风格的界面。

【备注】据说,前不久,Metro这种界面设计的风格正式申请了专利,而且获得了认证

http://appft.uspto.gov/netacgi/nph-Parser?Sect1=PTO1&Sect2=HITOFF&d=PG01&p=1&u=%2Fnetahtml%2FPTO%2Fsrchnum.html&r=1&f=G&l=50&s1=%2220110202834%22.PGNR.&OS=DN/20110202834&RS=DN/20110202834

 

这种界面无疑是很适合触摸式的操作的,而触摸式是一个趋势,这无可阻挡,所以Metro的出现时势所必然。然而,之所以可以单独申请专利,是因为它又区别于iPhone或者Android 的那种界面(仍然是一排一排的按钮),我个人感觉还是不错的,Metro的这种样式,给用户的信息量会多一些。

 

不过,话说回来,Windows 8作为第一个使用Metro的操作系统,为了保证向后兼容性,是不可能只提供Metro这种样式的界面的,它仍然保留了传统的桌面。这个界面其实跟Windows 7很像,但也是有很多改进的。这里就先不做太多赘述

image

 

也就是说,至少目前可以肯定的是,Windows 8将支持两种风格的应用程序

1. 传统的应用程序,通过exe等形式发布,用户可以自己复制,或者下载,然后安装

2. Metro应用程序,这些应用程序是必须通过Windows Store来发布,并且传播的,用户也只能通过这个Store去下载和安装

【备注】我们很多人都知道Apple Store,微软在手机领域也有一个Windows Phone Marketplace ,以后还将有一个统一的Windows Store(http://msdn.microsoft.com/en-us/windows/apps/br216180?lcid=1033)

 

从第二点来看,我觉得不会有太多人反对Windows 8以及Metro。从各方面的声音来看,大家都提到一个字:Opportunity (机会),是的,对于Windows平台的厂商(微软),最终用户,还有开发商以及开发人员,这意味着新的机会。

 

在BUILD大会上,微软的高层除了演示了各种客户端的效果之后,其实还着重在强调云的概念。这是自然而然的,Windows 8如果想要华丽转身,成为桌面电脑+平板电脑+手机的统一的系统,绝不仅仅是客户端的事情。微软的Windows Azure以及相关配套的一些服务,在很早之前就为此在做准备了。典型的问题就是,这么多Application,其实到时候都是统一托管在Windows Azure平台上。另外,值得一说的是,Windows 8登录就直接继承了Windows Live ID,可以期待以后,只要有Windows Live ID,在不同设备上就能很自然地同步资源,或者进行一致性的操作。

 

好的,那么回到开发人员的视角,既然Metro势在必行,那么我们有什么样的机遇和挑战呢?

 

这次BUILD大会前后,就一直有很多朋友在议论,说微软要抛弃Silverlight等等。这个说法其实不准确。准确地说是,Silverlight无法在Metro样式的应用程序中运行,即便是Metro的IE,也是不接受Silverlight的,当然,它同时也不接受Flash。它不接受任何插件,它为HTML 5而来。

是的,你没有听错,在Windows 8中,确实有两个IE,一个是Metro版本的,一个是桌面版本的。(实际上,微软正在开发Metro Office,我实在想看看那时怎么样一个Office)

 

下面这个是Metro版本的IE

image

下面这个是桌面版的IE,与Windows 7里面的IE 9没有太大的区别,虽然这个版本叫IE 10.这个IE 里面当然是继续支持Silverlight的

image

 

其实这里有一句潜台词,大家可以试想一下,虽然说Windows 8是希望覆盖桌面电脑、平板电脑、手机(我相信这个目标也的确可以实现),但相比较桌面电脑而言,平板电脑和手机其实是没有桌面的概念的,所以,我可以预见,在平板电脑和手机里面,就肯定只有Metro样式的应用程序,在它们上面是不支持Silverlight的。

其实,我自己做过基于Silverlight的项目,我的体会和很多人都相似,我没有寄太大希望它能用在internet上面,相反,Silverlight目前在一些企业内部项目中倒还是用得不错。因为,Silverlight作为一种技术,有它适用的地方,我们不能期望它能用在所有地方。

 

但是,一个很大的好消息是,拥有Silverlight或者WPF开发经验的开发人员,将能够在Metro应用程序开发中占得先机。为什么这么说呢?因为Metro应用程序,支持三种编写方式

1. javascript

2. xaml + C#/VB.NET

3. C++

 

是的,你看到有XAML,我们对这个不是很熟悉了吗?如果是,你的经验可以得到复用。我下面就用这种方式来创建我的第一个应用程序,大家可以看看,其实也不是特别难。

【备注】这里的XAML与WPF或者Silverlight从本质上是一样的,但是也有些不一样,本文不会做太多深入的展开。

 

在下载得到的Windows Developer Preview这个系统中,已经预先安装好了Visual Studio 11 Express(估计正式版该叫Visual Studio 2012吧Hot smile,虽然这名儿实在让人有点瘆得慌)

目前这个版本,只有下面几个模板

image

 

我参照微软提供的例子,做了一个简单的应用程序,体验了一下

<UserControl x:Class="TheFirstMetroApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366"
    xmlns:local="using:TheFirstMetroApplication" >

    <ScrollViewer>
        <StackPanel>

            <TextBlock Text="{Binding Title}" FontSize="30" Margin="10"></TextBlock>

            <ItemsControl ItemsSource="{Binding Items}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="50,0,0,10">
                            <HyperlinkButton Content="{Binding Title}" FontSize="20"></HyperlinkButton>
                            <TextBlock Text="{Binding PubDate}"></TextBlock>
                        </StackPanel>

                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

        </StackPanel>
    </ScrollViewer>

</UserControl>

image

大家看这样的语法,应该没有什么不好理解吧

【备注】其实还是有些细节改变了,例如HyperLinkButton,居然没有了NavigationUrl属性了,为什么呢?就是说不能直接做导航,而需要去响应事件代码。(这方面我还没有时间深入去研究每个细节点,以后再看)

后台代码的部分,也是我们属性的C#

 

using System;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.Web.Syndication;

namespace TheFirstMetroApplication
{
    partial class MainPage
    {
        public MainPage()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            GetFeedAsync("http://www.cnblogs.com/chenxizhang/rss");
        }

        public class FeedData
        {
            public string Title { get; set; }

            // using System.Collections.ObjectModel;
            private ObservableCollection<FeedItem> _Items = new ObservableCollection<FeedItem>();
            public ObservableCollection<FeedItem> Items
            {
                get
                {
                    return this._Items;
                }
            }
        }

        public class FeedItem
        {
            public string Title { get; set; }
            public string Author { get; set; }
            public string Content { get; set; }
            public DateTime PubDate { get; set; }

        }


        private async Task GetFeedAsync(string feedUriString)
        {
            // using Windows.Web.Syndication;
            SyndicationClient client = new SyndicationClient();
            Uri feedUri = new Uri(feedUriString);

            try
            {
                SyndicationFeed feed = await client.RetrieveFeedAsync(feedUri);
                FeedData feedData = new FeedData();
                feedData.Title = feed.Title.Text;

                foreach (SyndicationItem item in feed.Items)
                {
                    FeedItem feedItem = new FeedItem();
                    feedItem.Title = item.Title.Text;
                    feedItem.PubDate = item.PublishedDate.DateTime;
                    feedItem.Author = item.Authors[0].Name.ToString();
                    if (feed.SourceFormat == SyndicationFormat.Atom10)
                    {
                        feedItem.Content = item.Content.Text;
                    }
                    else if (feed.SourceFormat == SyndicationFormat.Rss20)
                    {
                        feedItem.Content = item.Summary.Text;
                    }
                    feedData.Items.Add(feedItem);
                }
                this.DataContext = feedData;
            }
            catch (Exception ex)
            {
                // Log Error.
                
            }
        }


    }

}

 

这段代码的意思是,在页面加载的时候,读取我的博客列表,并且绑定在当前页面上。

另外,需要注意的是,程序启动的方式与WPF和Silverlight都有些不同

image

然后,还有一个专门的appxmanifest文件,来设置与程序有关的信息

image

在当前的开发环境中,你可以选择直接部署到本机,也可以部署到模拟器,当然还可以发布到Windows Store,我下面部署到模拟器给大家看一下

image

按下F5键就可以部署调试,一个类似于平板电脑的界面打开了

image

这个程序可以在桌面上找到

image

点击右键,可以很方便地进行卸载

image

 

就这样,我们完成了第一个Metro应用程序,虽然这只是皮毛中的皮毛。但至少我们有信心去接受这个挑战和机遇,至少我是这么看的。

Metro应用程序,将很容易与Windows 系统进行无缝整合,例如我们希望在Windows 里面搜索时能够直接进入我们的应用程序中检索,得到结果,我们只需要在程序的设置中打开一个开关。它这里称为所谓的Declarations

image

然后,在EntryPoint里面实现一个方法

image

【备注】这里具体功能我没有实现,但那个参数里面是包含了用户要搜索到文字的

 

在Windows里面,如何集成搜索功能呢。请看下面的例子。

【备注】由于我没有对搜索进行定制,所以它仍然是打开了主界面

image

 

 

总结:Windows 8提出一个全新的设想,不光是界面上的。我个人觉得应该是值得期待的,本文我通过例子编写了第一个基于XAML的Metro应用程序,大家可以发现,其实也并不是很复杂,我们之前的经验可以得到复用,这无疑让我们有了更充分地理由,迎接这个机遇和挑战。

 

更多动手实验,请参考Windows 8 Hand-On Labs

http://www.buildwindows.com/Labs

posted @ 2011-10-25 22:09  陈希章  阅读(7365)  评论(21编辑  收藏  举报