Windows 8 Metro开发学习笔记1

最近开始翻《Programming Windows 6th》这书，翻了几章，开始照着里面的示例写了一下。下面笔记都是基础中的基础，仅作翻译记录。

1. XAML（读Zemmel）

XAML全称eXtensible Application Markup Language，是微软在Vista时代开始使用的新型界面表现语言，Silverlight、WP App和现在的Metro App的界面设计都是利用此语言进行设计的。此语言与XML类似，使用过程比较简单。

在Windows 8 Metro App中，界面暂时只能用XAML来设计（本人暂时了解如此）。XAML负责软件界面部分，在界面设计中除了使用XAML标记，还可以使用C#代码。

XAML文件编译完成后生成的是*.i.cs文件，从XAML文件中控件标记经过编译后生成C#对象，储存在cs文件中。

XAML的使用方便开发者的界面设计，但是在开发过程中我们甚至可以不用任何XAML代码设计界面，下面是一个Demo。可先将项目文件夹下面的XAML以及后台代码cs文件删除，再将下面的代码复制另存为App.cs后，F5编译Debug即可。

using System;
using Windows.ApplicationModel.Activation;
using Windows.Foundation; // 引用坐标命名空间
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes; // 引用形状命名空间

namespace TryStrippedDown
{
    public class App: Application
    {
        static void Main(string[] args)
        {
            Application.Start((p) => new App());
        }
        protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            // 添加Polyline实例
            Polyline polyline = new Polyline
            {
                Fill = new SolidColorBrush(Colors.White),
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center
            };
            for (int angle = 0; angle < 3600; angle++)
            {
                double radians = Math.PI * angle / 180;
                double radius = angle / 10;
                double x = 360 + radius * Math.Sin(radians);
                double y = 360 + radius * Math.Cos(radians);
                polyline.Points.Add(new Point(x, y));
            }
            Window.Current.Content = polyline;
            Window.Current.Activate();
        }
    }
}

2. MVVM：Model-View-ViewModel

MVVM的推出，有助于整个应用的前台和后台代码分离，各司其职，减少耦合度。

此部分笔记未完待续。

3. Path：BezierSegment、LineSegment和ArcSegment

界面设计时，我们难免会要画一些图形之类的来代替图片。至于用绘制的图形来代替图片哪个会更节省资源，这个还要继续深入探讨。但一般来说是绘制的简单图形会更节省资源。

绘制图形我们需要使用Windows.UI.Xaml.Shapes这个命名空间，里面有Path这个控件。

Path控件定义了一个Data属性（Geometry的一种类型，定义于Windows.UI.Xaml.Media命名空间中），Data属性由一组锚点数字（有用过PS里面的钢笔的都会知道）来组成。

Path控件中，可以有以下的PathFigure：

• LineSegment
• PolylineSegment
• BezierSegment
• PolyBezierSegment
• QuadraticBezierSegment
• PolyQuadraticBezierSegment
• ArcSegment

上面的PathFigure都可以是组成Path各个部分，即整个图形中的分部件。

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Path Stroke="Red"
              StrokeThickness="12"
              StrokeLineJoin="Round"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Data="M 0 0 L 0 100 M 0 50 L 50 50 M 50 0 L 50 100
              M 125 0 C 60 -10, 60 60, 125 50, 60 40, 60 110, 125 100
              M 150 0 L 150 100, 200 100
              M 225 0 L 225 100, 275 100
              M 300 50 A 25 50 0 1 0 300 49.9" />
    </Grid>

Data属性是一串长的字符串，但是可以分行表示不同的部分。

• M代表“Move”移动画图光标，后面紧接着一组(x,y)坐标
• L代表直线（准确地说是折线）
• C是立方Bezier曲线，后面紧接着控制点和结束点，可以有多个
• A是弧线，需要使用弧度（rad）

若使用后台代码，而非XAML来绘制Path，则在实例化Path对象之后，可以使用XamlReader.Load（包含于Windows.UI.Xaml.Markup命名空间），将XAML字符串转换为图形。局限性在于，XamlReader不能引用事件处理中带入的外部代码。

        Geometry PathMarkupToGeometry(string pathMarkup)
        {
            string xaml =
                "<Path " +
                "xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>" +
                "<Path.Data>" + pathMarkup + "</Path.Data><Path>";

            Path path = XamlReader.Load(xaml) as Path;

            // Detach the pathGeometry from the Path
            Geometry geometry = path.Data;
            path.Data = null;
            return geometry;
        }

4. Styles，样式

在Xaml文件中，可以对Page定义Resources，来统一使用相关的样式。

<Page.Resources>
    <x:String x:Key="appName">Shared Brush with Style</x:String>
        
    <LinearGradientBrush x:Key="simpleBrush">
        <GradientStop Offset="0" Color="Red" />
        <GradientStop Offset="0.5" Color="Orange" />
        <GradientStop Offset="1" Color="Yellow" />
    </LinearGradientBrush>
        
    <Style x:Key="simpleStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Times New Roman" />
        <Setter Property="FontSize" Value="96" />
        <Setter Property="Foreground" Value="{StaticResource simpleBrush}" />
    </Style>
</Page.Resources>

也可以于后台代码中定义样式：

Style style = new Style(typeof(TextBlock));
style.Setters.Add(new Setter(TextBlock.FontSizeProperty, 96));
style.Setters.Add(new Setter(TextBlock.FontFamilyProperty,
                             new FontFamily("Times New Roman")));

以上定义是对程序中的TextBlock样式进行定义。

定义样式的时候，还可以使用样式的继承，利用BaseOn属性。

<Style x:Key="simpleStyle" TargetType="TextBlock" BasedOn="{StaticResource baseTextBlockStyle}">

继承之后可对样式进行相应重写，没有重写的部分将继承于之前的样式。

当一个样式定义的时候没有定义x:Key的时候，此样式为Implicit Style（隐式样式）。实际上Key值在场景后自动生成了，它是指向TextBlock类的一类RuntimeType的对象（非public类）。【注：此话不知道怎样翻译好，书里面看着不大懂。】

当TextBlock控件中没有定义具体的样式名称时，TextBlock将使用隐式样式定义的样式，很强大的功能。

注意：新的样式不能继承自隐式样式，但隐式样式则可继承自一个非隐式样式。

5. 数据绑定简述