您的位置:首页 > 其它

Windows 8 Metro开发学习笔记1

2012-07-11 18:23 316 查看
最近开始翻《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. 数据绑定简述

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: