学习日记 » metro

Windows 8 Metro 风格应用程序的生命周期

admin — Wed, 02 Apr 2014 02:01:18 +0000

为 Windows 8 中的 Metro 风格应用程序开发生命周期模型时我们牢记以下几个方面：保持应用程序响应能力、节省电池电量并提供出色且一致的性能。Metro 风格应用程序关键在于全屏沉浸式体验。因此，Windows 8 中新的生命周期模型重点关注前台应用程序，确保积极主动的用户体验并充分实现设备的全部价值。在本博文中，我将带您浏览生命周期模型的新状态以及为了使应用程序出色运行您需要做的工作。

Metro 风格应用程序的生命周期

在任意给定时间，您的 Metro 风格应用程序都处于以下四种生命周期状态之一：未运行、正在运行、已挂起或已终止。当应用程序在不同状态之间切换时，它会收到生命周期事件，这些事件可帮助您向用户提供一致且高性能的体验。

下图显示了 Metro 风格应用程序如何在各状态之间切换：

正在激活 > 正在运行 > 正在挂起 > 已挂起 > 正在终止 > 未运行。" src="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-51-31-metablogapi/1563.app_2D00_lifecycle_5F00_018E5A34.png" width="642" height="397" border="0" />

当用户启动 Metro 风格应用程序、在应用程序之间切换以及关闭应用程序时，所有这些应用程序都会经历这些状态。当用户在应用程序之间切换时，应用程序很可能频繁在正在运行和已挂起状态之间切换。因此，应用程序必须处理生命周期事件。

当您的应用程序在各个生命周期状态之间切换时，它会收到以下生命周期事件：

事件	从	到
activated	未运行	正在运行
suspending 或 checkpoint (WinJS)	正在运行	已挂起
resuming	已挂起	正在运行

挂起

通常情况下，Metro 风格应用程序会在用户切换到另一应用程序时停止运行。Windows 会挂起不在前台的应用程序。当您的应用程序挂起时，它在内存中处于冻结状态。处于此状态时，它无法运行，但如果用户返回该应用程序，Windows 可立即将其恢复。这样，Windows 就可以让前台应用程序更好地使用系统资源，并确保后台应用程序不会耗尽用户的电池电量。

当您的应用程序离开前台时，Windows 会等待几秒钟以便能够快速切换回该应用程序，然后才尝试将其挂起。您的应用程序必须注册 suspending 或 checkpoint(JavaScript) 事件，当 Windows 需要将其挂起时，它会收到这些事件。这是应用程序的重要时刻；可利用此机会保存必须保留在持久存储中的应用程序数据。通常，您的应用程序会按原样恢复，您不需要持久留存的数据，因为它们仍然在内存中。但您需要存储这些数据以防 Windows 为了释放系统资源而终止应用程序。保存足够的应用程序数据可让用户返回到当应用程序挂起时他们在应用程序中所处的位置。这样，您的客户就会感觉您的应用程序始终处于运行状态。

如果应用程序没有在收到挂起事件后的 5 秒内从挂起事件处理程序中返回，Windows 会将其终止。切勿在挂起事件处理程序中执行任何繁重操作，这一点非常重要。应保存应用程序数据并快速返回。

在本博文中，我们以股票应用程序为例。该应用程序可以使用挂起事件来保存用户上次查看的股票以及股价图的时间范围。这样一来，如果应用程序被终止，它就可以正好重新启动到用户上次查看该应用程序时所看到的同一视图。例如，针对股票应用程序的建议是，借此机会发送本地磁贴通知，以便在 Windows 挂起应用程序之前，应用程序的磁贴能够使用最新信息进行更新。

在 JavaScript 中处理挂起

如果您使用 Windows JavaScript 库 (WinJS) 编写 Metro 风格应用程序，则可以使用 checkpoint 事件处理挂起。

var app = WinJS.Application;

function checkpointHandler() {
    // The checkpoint event gives us the chance to save application data.
    // In this case, we save the current stock info that the user is viewing.
    app.sessionState.lastSeenStock = selectedStock;
    app.sessionState.lastSeenRange = selectedRange;

    // Send client side notifications
    Tile.sendTileUpdate(selectedStock, stockInfo.change, stockInfo.lastSale, 
stockInfo.lastSaleTime, stockInfo.open); 
}

app.addEventListener("checkpoint", checkpointHandler);

这只是一个概要。有关详细信息，请参阅开发中心中的如何挂起应用程序（JavaScript 和 HTML）。

在 XAML 中处理挂起

如果您使用 XAML 和 C# 编写 Metro 风格应用程序，则可以对应用程序对象使用 Suspending 事件来处理应用程序挂起。

public App()
{
    InitializeComponent();
    this.Suspending += new SuspendingEventHandler(OnSuspending);
}

async protected void OnSuspending(object sender, SuspendingEventArgs args)
{
    // The Suspending event gives us the chance to save application state
    // In this case, we save the current stock info that the user is viewing

    // Because writing to a file is asynchronous, we grab a deferral which ensures
    // that suspending doesn’t complete until our file write is complete
    SuspendingDeferral deferral = args.SuspendingOperation.GetDeferral();

    // Here we create a SuspensionManager class which handles adding session data
    // to a Dictionary and then serializing that data to a file
    SuspensionManager.SessionState["lastSeenStock"] = stock;
    SuspensionManager.SessionState["lastSeenRange"] = range;
    await SuspensionManager.SaveAsync();

     // Send client side notifications
    Tile.SendTileUpdate(stock, stockInfo.Change, stockInfo.LastSale, 
stockInfo.LastSaleTime, stockInfo.Open);

    deferral.Complete();
}

这同样只是一个概要。有关如何在 XAML 和 C# 中处理挂起的详细信息，请参阅开发中心中的如何挂起应用程序（VB/C#/C++ 和 XAML）。

恢复

当应用程序恢复时，它将从 Windows 将其挂起它所处的状态继续进行。具体说就是：当应用程序挂起，应用程序数据和状态保留在内存中，因此当它恢复时，一切都保持它挂起时的状态。在收到 resuming 事件时，您不需要明确还原任何已保存的数据。

但您希望您的应用程序看起来始终处于运行状态。为此，它必须保持连接并显示最新数据。但是在恢复之前，您的应用程序可能会在挂起状态停留很长时间。因此数据或网络连接可能会过时，在应用程序恢复时，可能需要刷新连接。当用户将您的应用程序切换到前台时，它会收到 resuming 事件。您可以在应用程序收到此事件时刷新应用程序内容并重新连接网络资源。

在我们的示例股票应用程序中，将在恢复时刷新应用程序在挂起前所具有的所有缓存股票数据。之前的数据可能已存在数小时甚至数天之久。如果用户看到这些旧数据，他们就会意识到所用应用程序并非始终处于运行状态。因此在恢复时，我们的股票应用程序必须更新其所有数据。这样，应用程序每次切换到前台时，用户都会看到最新的股票价格、股价图和新闻文章。

在 JavaScript 中处理恢复

在 JavaScript 中，您可以在 Windows.UI.WebUI.WebUIApplication 命名空间中使用 Windows 运行时 resuming 事件。这是专门用于 JavaScript 应用程序的 resuming 事件。

function resumingHandler() {
    //Update the selected stock with the latest news, stock info, and chart data
    News.requestNews(stock);
    Api.getStockInfoData(stock).then(function(data){displayStockInfo(data); });
    Api.getHistoryData(range).then(function (chartData) 
{CanvasChart.drawChart("chartCanvas", chartData, Chart.getChartOptions(false));});

    // Send client side notifications
    Tile.sendTileUpdate(stock, stockInfo.change, stockInfo.lastSale, 
stockInfo.lastSaleTime, stockInfo.open);    
        }

Windows.UI.WebUI.WebUIApplication.addEventListener("resuming", resumingHandler);

有关详细信息，请参阅开发中心中的如何恢复应用程序（JavaScript 和 HTML）。

在 XAML 中处理恢复

如果您使用 XAML 和 C# 编写 Metro 风格应用程序，则可以对应用程序对象使用 Resuming 事件来处理应用程序恢复。

public App()
{
    InitializeComponent();
    this.Resuming += new EventHandler<object>(App_Resuming);
}

        async private void App_Resuming(object sender, object e)
        {
            //Update the selected stock with the latest news, stock info, and chart data
            News.RequestNews(stock);

            Data data = await Api.GetStockInfoDataAsync(stock);
            Api.DisplayStockInfo(data);

            Chart chartData = await Api.GetHistoryDataAsync(range);
            CanvasChart.DrawChart("chartCanvas", chartData, Chart.GetChartOptions(false));

            // Send client side notifications
    Tile.SendTileUpdate(stock, stockInfo.Change, stockInfo.LastSale, stockInfo.LastSaleTime, stockInfo.Open);
        }

有关如何在 VB/C#/C++ 和 XAML 中处理恢复的详细信息，请参阅开发中心中的如何恢复应用程序（VB/C#/C++ 和 XAML）。

激活

激活与您应用程序的启动方式息息相关。在 Metro 风格应用程序中它起到多方面的作用。有关如何使用 Metro 风格应用程序激活处理合约的更多详细信息，请参阅我们之前的博文在您的应用程序中激活 Windows 8 合约。本文中我们重点介绍当 Windows 终止您的应用程序，随后用户又重新启动它时，如何使用激活来还原之前保存的数据。

Windows 可能会出于多个原因终止已挂起的应用程序。例如：用户手动关闭应用程序或注销，或者系统的资源不足（诸如游戏之类的应用程序可能需要大量资源！）。如果用户在 Windows 终止应用程序后启动应用程序，它会收到 activated 事件，用户会看到应用程序的初始屏幕，直到应用程序被激活。您可以使用此事件确定应用程序是否需要还原上次挂起时保存的数据，或者您是否必须加载应用程序的默认数据。activated 事件参数包含一个 PreviousExecutionState 属性，该属性会告诉您在激活之前应用程序所处的状态。该属性的值是 Windows.ApplicationModel.Activation.ApplicationExecutionState 枚举值之一。

终止原因	PreviousExecutionState 值	要采取的操作
由系统终止（由于资源限制、关机、重新启动等等）	Terminated	还原会话数据
由用户关闭	ClosedByUser	使用默认数据启动
意外终止，或者应用程序自用户的会话启动后一直未运行	NotRunning	使用默认数据启动

PreviousExecutionState 的值还可以是 Running 或 Suspended，但在这些情况下，您的应用程序之前并未终止，因此您不必考虑是否需要还原数据。

当应用程序已激活并且其 PreviousExecutionState 值为 Terminated 时，您必须还原已保存的会话数据，以使应用程序完全保持用户上次看到的样子。如果用户手动关闭应用程序、应用程序意外终止或者在当前会话中尚未运行，则您必须忽略之前的会话数据并使用默认视图启动应用程序。

我们的示例股票应用程序使用 activated 事件重新显示挂起时所保存的股票和股价图信息。该应用程序还刷新其缓存的网络数据。这样，用户看到的就是他们离开该应用程序时所查看的股票，但股票价格、股价图和新闻文章全都是最新的。

在 JavaScript 中处理激活

如果您使用 Windows JavaScript 库 (WinJS) 编写 Metro 风格应用程序，则可以使用 activated 事件处理激活。

在 activated 事件处理程序代码中，您的应用程序可以检查 sessionState 对象，以确定它是应加载保存的数据，还是应显示默认主页视图。SessionState 通过检查 eventArgs.detail.previousExecutionState 自动确定应用程序上次的状态。如果 sessionState 已填充，则使用它还原会话数据，否则使用应用程序的默认数据。

var app = WinJS.Application;

function activatedHandler(eventArgs) {
    if (eventArgs.detail.kind == Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Check whether the session state variables are valid.
        // If so, retrieve the stock and range values saved in the checkpoint handler
        if (app.sessionState) {
            stock = app.sessionState.lastSeenStock;
            range = app.sessionState.lastSeenRange;
        } 
        // If not, use the app's default values
        else{
            stock = "DOW";
            range = "1M";           
        }

        // Initialize the WinJS controls asynchronously behind the app splash screen
        // Start retrieving the latest stock data asynchronously after the controls are ready
        eventObject.setPromise(WinJS.UI.processAll().then(function() {
            Api.initializeUserStocks();
        }));
    }
}

app.addEventListener("activated", activatedHandler);

有关如何在 JavaScript 中处理激活的详细信息，请参阅开发中心中的如何激活应用程序（JavaScript 和 HTML）。

在 XAML 中处理激活

在使用 XAML 和 C# 的 Metro 风格应用程序中，您可以替代 OnLaunched 事件来处理从磁贴基本激活应用程序。

在 OnLaunched 事件处理程序代码中，您的应用程序可以检查事件参数上的 PreviousExecutionState。如果它等于 Terminated，则还原您在 Suspending 事件中保存的数据。如果是其他值，则使用应用程序的默认数据。

async protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
    // Check whether the session data should be restored
            if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
            {
                // Here we've created a SuspensionManager class which handles restoring session
                // data from a file and then gives access to that data through a Dictionary
                await SuspensionManager.RestoreAsync();

// Retrieve the stock and range values saved in the suspend handler 
stock = SuspensionManager.SessionState["lastSeenStock"];
                range = SuspensionManager.SessionState["lastSeenRange"];
            }
            // If not, use the app's default values
            else
            {
                stock = "DOW";
                range = "1M";
            }

    // Start retrieving the latest stock data
            Api.InitializeUserStocks();

            Window.Current.Activate();
        }

有关如何在 XAML 中处理激活的详细信息，请参阅开发中心中的如何激活应用程序（VB/C#/C++ 和 XAML）。

打造出色应用程序生存期体验的提示

现在您已了解了所有基础知识，下面是一些可帮助您为应用程序打造出色生存期体验以便在用户看来应用程序始终处于活动和最新状态的一些提示。

有时最好重新开始

如果自用户上次查看应用程序已过了很长时间，有时最好将应用程序重置为其默认视图。多久才算很久完全由您决定，但如果应用程序的内容看起来陈旧或过时，则建议您将应用程序恢复为其主页视图。这会使应用程序在用户看来更加智能。

例如，如果您要构建一个新闻阅读器应用程序，在用户从该应用程序切出后，它可能会被挂起。过了一段时间后，当用户回到新闻阅读器应用程序时，应用程序将会恢复。在恢复处理程序中，检查当前文章已存在多长时间，以确定它现在是否已过时。如果文章太旧，则显示默认主页视图而不是旧文章。

在正确的时间保存正确的数据

在应用程序的整个生命周期中，始终以增量方式保存重要数据。由于应用程序只有最多五秒的时间来运行挂起事件处理程序代码，因此您需要确保在应用程序挂起时，您的重要应用程序数据已保存到持久存储。

在编写应用程序时，您需要管理以下两种类型的数据：会话数据和用户数据。会话数据是应用程序中与用户的当前体验相关的临时数据。例如，用户正在查看的当前股票、用户正在 eBook 中阅读的当前页面或一个很长的项目列表中的滚动位置。用户数据是持久性的，必须始终可供用户访问，无论它们是什么。例如，用户正在键入的进行中文档、在应用程序中拍摄的照片或用户在游戏中的进度。

确保在应用程序挂起时，它已将这两种数据类型保存到持久存储。

还原会话数据

用户希望 Metro 风格应用程序通常保持他们上次使用它时所处的状态。从开发人员的角度看，当您的应用程序从挂起状态恢复或从未运行状态激活时，还原之前保存的会话数据通常是合理的。

例如，如果您的应用程序包括购物车功能，并且用户向购物车中添加商品后从应用程序中切出，那么在用户恢复或重新激活该应用程序时维护购物车中的那些商品应该是有意义的。

再举一个例子，假设某应用程序显示新闻文章。如果用户之前正在查看某特定文章，然后切换到另一应用程序，用户会希望当他们回到您的应用程序中时，他们能够看到之前正在查看的文章。

释放挂起事件处理程序中的独占资源

如果应用程序在执行过程中获取了任何独占资源（例如文件句柄或外部设备引用），那么它在收到 suspending 事件时则必须释放这些资源。此外，如果您的应用程序需要使用这些独占资源才能继续运行，那么在收到 resuming 事件时，则必须回收这些资源。

不要关闭应用程序！

Windows 8 中的 Metro 风格应用程序永远不能将其自身关闭或者提供应用程序用户界面让用户关闭您的应用程序。挂起和终止应用程序由 Windows 代表用户进行处理，以维护系统性能和电池寿命。如果用户想要关闭您的应用程序，他们可以通过从屏幕顶部向屏幕底部滑动或者按 Alt＋F4 来实现。

结束语

通过使用 suspending、resuming 和 activated 这三个事件，对用户而言，您的应用程序看起来始终处于活动状态。但与此同时，在用户不使用应用程序时，它永远不会不必要地耗尽电池电量或降低系统性能。在设备越来越紧凑、移动性越来越强的世界里，新的 Metro 风格应用程序生命周期使您的应用程序在任何设备上都能大放异彩。

转自：http://blogs.msdn.com/b/windowsappdev_cn/archive/2012/04/16/managing-app-lifecycle.aspx

Windows 8 Metro 应用开发入门(二)：Metro App的几个新控件

admin — Wed, 02 Apr 2014 01:51:49 +0000

摘要

基于Silverlight开发Metro App可以使用Silverlight原生的控件，为了更好的开发Metro App，控件库又专门增加了几个新的控件，如：GridView、Flipview、ProgressRing、SemanticZoom和VariableSizedWrapGrid等，这些控件为平板设备提供了良好的触控体验，这一章我们来介绍一下这几个控件的简单用法。

第1节 GridView

GridView是以网格样式展现一组数据，在Web开发中就已经存在，主要用于多行多列的数据显示中。Metro中以分组形式表达数据使用GridView更得心应手，在Silverlight 5及以前版本中，如果想实现分组数据展现要先写一堆数据模板，而在Metro中，这种展现方式得到了增强，GridView 是专门用于分组数据的，如果仅仅是列表数据，则建议使用ListView。

GridView控件有几个非常重要的常用成员：

（1）数据源

如果是以分组形式展示数据，则数据源必须是可分组的，也即是有主从关系，通常是主列表项中每一项可能存在着某一子列表。GridView的数据源依托于CollectionViewSource，CollectionViewSource有一个属性IsSourceGrouped指明数据源是否是分组源数据集合，还有一个属性ItemsPath指明查找子数据项的路径，通常将可分组的源数据指定给CollectionViewSource对象的Source属性，如下定义了年级与学生的主从关系，年级包含了学生的数据列表：

public class Grade
    {
        public Grade()
        {
            Students = new ObservableCollection<Student>();
        }
        public string Name { get; set; }
        public ObservableCollection<Student> Students { get; private set; }
    }

    public class Student
    {
        public string Name { get; set; }
        public DateTime Birthday { get; set; }
        public bool IsClassLeader { get; set; }
        public string Grade { get; set; }
    }

以下代码来模拟生成三个年级的学生：

private List<Grade> CreateGrades()
        {
            List<Grade> Grades = new List<Grade>();
            for (int i = 1; i <= 3; i++)
            {
                Grade grade = new Grade();
                grade.Name = "年级 " + i;
                for (int j = 1; j <= 5; j++)
                {
                    grade.Students.Add(new Student()
                    {
                        Name = "王学生 " + j,
                        IsClassLeader = true,
                        Birthday = startDate.AddDays(j + 1),
                        Grade = grade.Name
                    });
                }
                Grades.Add(grade);
            }
            //MyGrades.Source = Grades;
            return Grades;
        }

那么，对于这个方法生成的数据源即是可分组的。对于CollectionViewSource，既可以使用静态资源的形式绑定到视图，也可以以后台代码的形式绑定。

（2）使用GridView展示数据源

a)、项样式

如果要展示个性化的数据视图，需要自定义DataTemplate来规划每组下的每个数据项的布局，如下是对每个学生信息的展示布局：

<GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="20">
                        <TextBlock Text="{Binding Name}" FontWeight="Bold" Style="{StaticResource ItemTextStyle}"/>
                        <TextBlock Text="{Binding Birthday}" TextWrapping="NoWrap" Style="{StaticResource BodyTextStyle}" />
                        <CheckBox Content="班干部" IsChecked="{Binding IsClassLeader}" IsEnabled="False"/>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>

b)、组样式

也可以对每个分组的展示布局及样式自定义，通过GroupStyle进行设定，如下是对每个年级分组的样式定义：

<GridView.GroupStyle>
                <GroupStyle HidesIfEmpty="False">
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Background="Yellow" Margin="0">
                                <TextBlock Text="{Binding Name}" Foreground="Black" Margin="30" Style="{StaticResource HeaderTextStyle}"/>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="GroupItem">
                            <Setter Property="MinWidth" Value="300"/>
                            <Setter Property="BorderBrush" Value="Blue"/>
                            <Setter Property="BorderThickness" Value="2"/>
                            <Setter Property="Margin" Value="3,0"/>
                            <Setter Property="Background" Value="Silver"/>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </GridView.GroupStyle>

HidesIfEmpty属性指定当子项为空时是否隐藏组。

HeaderTemplate 定义组头样式。

效果图：

c)、选定项事件

当选定项改变时触发事件SelectionChanged，与Listview、DropDownlist等控件的效果差不多，在事件处理程序中可以做相应处理，如下：

private void GridView_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            Student student = ((GridView)sender).SelectedItem as Student;
            Debug.WriteLine(student.Name);
        }

以下是完整的示例代码：

XAML：

View Code

C# 绑定数据：

private List<Grade> CreateGrades()
        {
            List<Grade> Grades = new List<Grade>();
            for (int i = 1; i <= 3; i++)
            {
                Grade grade = new Grade();
                grade.Name = "年级 " + i;
                for (int j = 1; j <= 5; j++)
                {
                    grade.Students.Add(new Student()
                    {
                        Name = "王学生 " + j,
                        IsClassLeader = true,
                        Birthday = startDate.AddDays(j + 1),
                        Grade = grade.Name
                    });
                }
                Grades.Add(grade);
            }
            MyGrades.Source = Grades;
            return Grades;
        }

在基于横向排列分组时建议使用GridView，在基于纵向排列分组时建议使用ListView，关于ListView的使用请参考相关文档，这里不再介绍。下面给一个ListView的分组效果图：

第2节 Flipview

Flipview允许基于“上一页”“下一页”的方式浏览一系列视图，视图可以是图片，也可以是其他的自定义布局。现在很多网站上都有对图片的类似浏览方式，如网易的图片新闻，上一页的导航在整个视图的左侧，下一页的导航在右侧，这种导航非常适合在触摸设备中使用。如下：

Flipview控件来源于ItemsControl，它的使用比较简单，类似于一个容器，只需要往里塞视图即可，至于如何处理上下页的翻转，内部都已经完全实现好了，不仅可以往里面旋转图片，还可以放置其他的视图。如下：

<FlipView HorizontalAlignment="Left" SelectionChanged="FlipView_SelectionChanged_1"  Margin="12"
 VerticalAlignment="Top" Grid.Row="1" Width="500">
            <Image Source="Assets/bg0.jpg" />
            <Image Source="Assets/bg1.jpg" />
            <Image Source="Assets/bg2.jpg" />
            <Image Source="Assets/bg3.jpg" />
            <Image Source="Assets/bg4.jpg" />
            <Grid>
                <TextBlock Text="12312313" FontSize="30"/>
            </Grid>
        </FlipView>

Image可以与Grid共存。Flipview同样有SelectionChanged事件，在事件处理程序中可以获取导航到当前的视图项。

第3节 ProgressRing

在Windows 8 中有一个新的进度条，就是几个点围绕一个圆旋转（当用户登录到Windows8系统时可以看到）。Metro应用程序也提供了这一效果的控件。如下：

它的使用非常的简单：

<ProgressRing x:Name="pr" Grid.Row="1" HorizontalAlignment="Left" Margin="500,231,0,0" 
VerticalAlignment="Top" Height="108" Width="108" IsActive="True"/>

它有一个很重要的属性IsActive来控制它的活动与休眠。

第4节 SemanticZoom

SemanticZoom控件提供了同一个数据源两种视图的展现形式，这是一个很有意思的控件，也可以说一个是近景视图ZoomedInView一个是远景视图ZoomedOutView，我们暂且称它人近景、远景吧。在近景视图中可以浏览每个项的详细信息，远景视图类似预览图，一般是浏览项的简略数据，如下分别是视图ZoomedInView和视图ZoomedOutView：

注意看视图ZoomedInView的右下角有个红圈围起来的一个“一”字按钮，点它可以切换到远景视图，当点击远景视图中的一个项时又切换回近景视图。这通常在快速预览数据列表时很有用，可以向用户隐藏一些不必要的数据。

SemanticZoom有两个非常重要的属性ZoomedInView和ZoomedOutView，当向这两个视图提供布局时该控件才可进行近远景视图的切换。如下：

<SemanticZoom HorizontalAlignment="Left" Margin="10" Grid.Row="1" VerticalAlignment="Top">
            <SemanticZoom.ZoomedInView>
                <GridView x:Name="gv1" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="20">
                                <TextBlock Text="{Binding Name}" FontWeight="Bold" Style="{StaticResource ItemTextStyle}"/>
                                <TextBlock Text="{Binding DueDate}" TextWrapping="NoWrap" Style="{StaticResource BodyTextStyle}" />
                                <CheckBox Content="Complete" IsChecked="{Binding Complete}" IsEnabled="False"/>
                            </StackPanel>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView x:Name="gv2" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="20">
                                <TextBlock Text="{Binding Name}" Width="100" FontWeight="Bold" Foreground="Red" Style="{StaticResource ItemTextStyle}" FontSize="26"/>
                            </StackPanel>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>

bool CanChangeViews 指明是否可以进行视图切换

bool IsZoomedInViewActive 指明近景视图ZoomedInView是否为活动视图

在视图切换时会触发两个事件：ViewChangeStarted和ViewChangeCompleted。

代码：

public class SemanticItem
        {
            public string Name { get; set; }
            public DateTime DueDate { get; set; }
            public bool Complete { get; set; }
        }
        private void InitDataSource()
        {
            List<SemanticItem> ds = new List<SemanticItem>();
            for (int i = 0; i < 20; i++)
            {
                ds.Add(new SemanticItem() { Name = "S " + i, DueDate = DateTime.Now, Complete = true });
            }
            this.gv1.ItemsSource = this.gv2.ItemsSource = ds;
        }

如果你想向用户提供两个非常修改化的视图，当然可以发挥你的丰富想象力来实现布局。

第5节 VariableSizedWrapGrid

在Silverlight/WPF有一个扩展控件WrapPanel，它是根据自身的宽高和子元素的宽高对子元素进行“换行”排列，当指定子元素横排列优先时，如果横向布局不足容纳全部子元素，则会自动从下一行开始排列，纵向排列优先时类似。Metro应用提供了一个类似的控件VariableSizedWrapGrid，它比WrapPanel有更多的控制，比如，它可以指定子元素的宽和高，还可以指定当前用于布局子元素的行和列数，并且它还能指定某个子元素占用几行或几列，非常强大！如下图：

XAML：

<VariableSizedWrapGrid Grid.Row="1" MaximumRowsOrColumns="5" ItemHeight="44" ItemWidth="44" HorizontalAlignment="Left"
 Height="262" Margin="10,10,0,0" VerticalAlignment="Top" Width="396">
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue"/>
            <Rectangle Fill="White" Height="80" VariableSizedWrapGrid.RowSpan="2"/>
            <Rectangle Fill="Green" Width="80" VariableSizedWrapGrid.ColumnSpan="2"/>

        </VariableSizedWrapGrid>

VariableSizedWrapGrid有几个非常重要的属性：

double ItemHeight 设置每个子项的高

double ItemWidth 设置每个子项的宽

Orientation Orientation 子元素的排列方向

int MaximumRowsOrColumns获取或设置影响换行点同时说明 Orientation 的值。

DependencyProperty RowSpanProperty 子元素占据的行数，如上图中的白色块。

DependencyProperty ColumnSpanProperty 子元素占据的列数，如上图中的绿色块。

http://www.cnblogs.com/solan/archive/2012/09/17/Win8Metro02.html

Windows 8 Metro 应用开发入门(一)：开发环境介绍

admin — Wed, 02 Apr 2014 01:50:19 +0000

摘要

Windows8已经发布，随之而来的基于WinRT的Metro应用也正向我们走来，正像它所宣传的：光滑、快、现代。看习惯了玻璃、立体风格的应用，或许Metro的简洁能给你留下不一样的体验。Visual Studio 2012为Metro应用提供了强有力的开发支持。磨刀不误砍柴工！这一章我们先来介绍一下开发环境的搭建及可能遇到的问题，最后再来一个简单的应用体验一下Metro的开发。

第1节搭建开发环境

Windows8不但支持传统的桌面应用，并且推出一个专为触摸而设计的最新Metro风格应用，对于Metro应用必须要求在Visual Studio 2012下开发，随之一起发布的是.NET Framework 4.5。所以，为了开发及调试方便，我们推荐的开发环境是：Windows8 + Visual Studio 2012。

Metro支持三种开发模式：

如果你有Web前台开发功底，你可以选择HTML5+CSS3+JavaScript进行开发；

如果你熟悉Silverlight或WPF开发，可以选择XAML+C#/VB.NET/C++进行开发；

如果你比较关注渲染性能，当然可以选择C++和DirectX进行开发。

本入门系列会以XAML+C#为基于进行演示，当然在后文中也可能会进行其他另两个开发模型的演示。在安装Visual Studio 2012过程中，可以选择安装相应版本的Blend For Visual Studio为XAML提供可视化设计，不过我个人的习惯是在VS中手写XAML，毕竟VS中也提供了对XAML的智能感知，在调色或动画部分会借助Blend进行辅助工作。

我的测试开发环境是部署在虚拟机中，如果你还没有安装Windows8和Visual Studio 2012，可以去微软网站上下载相应的预览及试用版。至于安装，这里就不再演示了，提醒一下，在安装Windows8时，一定要创建一个新用户，另外还要提前注册一个Windows Live ID，现在已被更名为Microsoft 帐户。正确安装，启动后，可以看到如下两个分别是VS2012和Blend的界面，怎么样？有没有Metro的感觉？

第2节创建项目

在新建项目中是以Windows应用商店表示Metro应用，选择Windows应用商店项目类型，默认是.NET Framework 4.5版本。

在首次创建Windows应用商店项目时候，VS会要求你先获取Windows8应用开发许可证，现在这个许可证可用期限是一个月，以后不知道会不会收费。

选择某一项目类型后，点击“确定”按钮，在创建过程中，会弹出如下询问：

很明显，义无反顾地选择“我同意”，接着是连接许可证服务器，然后是要求输入可用的Microsoft账户信息：

输入完了之后，点击“登录”，如果账户可用，正常情况下会提示获取许可证成功，如下：

我是2012年9月12日获取的，许可证到期日期是2012年10月12日。到此一系列的身份认证表示你已经得到创建Windows8 Metro应用的许可，点击“关闭”按钮，接着才是真正的创建项目。以后再创建Windows商店项目就不会再弹出这些获取许可证消息的窗口了，当然要看微软对许可证策略。如果你是以Administrator登录，还有麻烦，在VS中打开xaml文件设计器时可能会收到如下设计器异常：

明确指出了不能用内置管理员激活此应用，如果你是很固执地尝试调试程序，可能会收到以下异常：

所以，同志，请切换到其他系统账户吧，这就是在上一节中提到的，在安装Windows8时一定要创建一个新用户，以这个新用户登录Windows然后是进行Metro应用开发。

第3节项目类型

在Windows8商店项目类型中有几个模板，如下：

创建任何一个模板的应用，都会默认创建几个必要的文件夹及目录，如下图是创建空白应用程序模板的项目：

Assets 文件夹，放置图片等资源文件，默认里面有四个与Windows商店应用程序相关的必须的图片，也可以将自己的资源文件放进去。

Common 文件夹，默认里面有一个样式文件StandardStyles.xaml，是Windows商店应用程序的基础样式，强烈建议不要修改它，因为它与一些控件有关联，如果有自己的样式，可以在这里新建一个自己的样式，然后在App.xaml 里做引用即可。

App.xaml/App.xaml.cs 熟悉Silverlight开发的都知道这个是应用程序的初始入点。App.xaml里仅仅有一个对标准样式的引用：

<ResourceDictionary Source="Common/StandardStyles.xaml"/>

App类与Silverlight里的App类相似，这里有一个重要的方法：

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();
        }

应用程序启动时会进入这个方法，然后导航到第一个主页面，Frame的Navigate方法很有意思，它只是接收一个目标页的类型，在其内部创建目标页的实例进而加载可视。这里还会涉及到程序挂起、恢复等，建议参考应用程序生命周期的相关资料。

AppXXX_TemporaryKey.pfx 应用程序签名证书

Package.appxmanifest 应用程序配置相关，比如Logo、应用程序名等，如果你的程序将来要提交到Windows商店，可得好好配置一下这里面的东西，在VS中可以双击打开它进行可视化编辑，也可以用记事本打开它进行编辑，其实它就是一个XML文档。

以上是项目的基础配置，对于Windows商店项目有几个模板可供选择。

（1）空白应用程序（XAML）创建没有预定义的控件或布局的Windows应用商店应用程序的单页项目，该模板会创建一个空的主页面MainPage.xaml，如下：

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

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>

是一个空的页面，可以在其Grid里放置总局及控件。这一模板是最基础的模板，我们可以根据需要自定义各种各样的页面。

（2）网络应用程序（XAML）创建在以网格形式排列的分组项之间导航的Windows商店应用程序的三页项目，专用页将显示组合项的详细信息。如下图分别对应：GroupedItemsPage，GroupDetailPage和ItemDetailPage页，这些页都已经有相应的总局元素。

基于组、项、详细的导航可以加快我们的开发速度，当然如果这些页达不到我们项目的要求，也可以自定义其他页面布局。此模板的项目会在Common文件夹下创建几个支持导航和消息通知等类，并且在DataModel文件夹下创建一个示例数据源SampleDataSource。

（3）拆分布局应用程序（XAML）在已分组的项之间导航的Windows商店应用程序的两页项目，如下图分别表示组页ItemsPage，和项及选择列表项页SplitPage：

如果你的应用程序有类似主-从（包含列表项）展现应用，这个模板非常适合。

（4）类库项目（Windows应用商店应用程序）这个基于Metro应用的托管项目，这个项目大家都很熟悉了，里面通常就是放一些Class。

（5）还有两个Windows运行时组件和单元测试项目模板就不再介绍了，有需要可以参考相关资料。

在每个项目中可以添加对应的项：空白页BlankPage、基本页BasicPage、拆分页SplitPage、项页ItemsPage、项详细信息页ItemDetailPage、分组项页GroupedItemPage、组详细信息页GroupDetailPage、资源字典Dictionary、模板化控制CustomControl、用户控件MyUserControl、文件打开选取器协定FileOpenPickerPage、搜索协定SearchResultsPage、共享目标协定ShareTargetPage。

第4节示例项目及调试

接下来我们创建一个经典的HelloWorld项目。首先我们创建一个空的HelloWorld项目，如下：

编辑主页面MainPage，放置一个TextBox和一个Button，当我们点击按钮时，弹出对话框，来显示用户输入和其他字符。编辑完成的MainPage页如下：

<Page
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Orientation="Horizontal" Height="100" HorizontalAlignment="Center" Margin="0,120,0,0" VerticalAlignment="Top">
            <TextBox x:Name="tbInput" TextWrapping="Wrap" Text="" Width="380" Height="60" FontSize="26" />
            <Button x:Name="btnOK" Content="确定" Width="100" Height="64" Click="btnOK_Click_1" FontSize="22"/>
        </StackPanel>
    </Grid>
</Page>

确定按钮事件如下：

private void btnOK_Click_1(object sender, RoutedEventArgs e)
        {
            string msg = string.Format("You say: {0}.", this.tbInput.Text);
            MessageDialog dialg = new MessageDialog(msg, "Hello world");
            dialg.ShowAsync();
        }

调试Metro项目有三种方式：模拟器、本发计算机和远程计算机。对于模拟器运行效果如下：

模拟器模式下是一个单独的窗体，所以对于调试比较方便，但是对于本地计算机模式下调试，由于是全屏幕且在Metro风格下运行，所以调试比较不方便，通常当运行起来后，有三种方式可以切换：

（1）可以使用快捷键Alt+F4退出当前程序；

（2）将鼠标移动屏幕左上角位置，然后在左上角会出现其他程序界面的缩略图，点击即可切换；

（3） Alt+Tab进行切换。

如果在代码窗口中有断点，在程序运行到断点位置会自动切换到VS代码窗口的断点命中位置。

http://www.cnblogs.com/solan/archive/2012/09/12/Win8Metro01.html