Windows 8 Metro开发学习笔记1
2012-07-11 18:23
316 查看
最近开始翻《Programming Windows 6th》这书,翻了几章,开始照着里面的示例写了一下。下面笔记都是基础中的基础,仅作翻译记录。
在Windows 8 Metro App中,界面暂时只能用XAML来设计(本人暂时了解如此)。XAML负责软件界面部分,在界面设计中除了使用XAML标记,还可以使用C#代码。
XAML文件编译完成后生成的是*.i.cs文件,从XAML文件中控件标记经过编译后生成C#对象,储存在cs文件中。
XAML的使用方便开发者的界面设计,但是在开发过程中我们甚至可以不用任何XAML代码设计界面,下面是一个Demo。可先将项目文件夹下面的XAML以及后台代码cs文件删除,再将下面的代码复制另存为App.cs后,F5编译Debug即可。
此部分笔记未完待续。
绘制图形我们需要使用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各个部分,即整个图形中的分部件。
Data属性是一串长的字符串,但是可以分行表示不同的部分。
M代表“Move”移动画图光标,后面紧接着一组(x,y)坐标
L代表直线(准确地说是折线)
C是立方Bezier曲线,后面紧接着控制点和结束点,可以有多个
A是弧线,需要使用弧度(rad)
若使用后台代码,而非XAML来绘制Path,则在实例化Path对象之后,可以使用XamlReader.Load(包含于Windows.UI.Xaml.Markup命名空间),将XAML字符串转换为图形。局限性在于,XamlReader不能引用事件处理中带入的外部代码。
也可以于后台代码中定义样式:
以上定义是对程序中的TextBlock样式进行定义。
定义样式的时候,还可以使用样式的继承,利用BaseOn属性。
继承之后可对样式进行相应重写,没有重写的部分将继承于之前的样式。
当一个样式定义的时候没有定义x:Key的时候,此样式为Implicit Style(隐式样式)。实际上Key值在场景后自动生成了,它是指向TextBlock类的一类RuntimeType的对象(非public类)。【注:此话不知道怎样翻译好,书里面看着不大懂。】
当TextBlock控件中没有定义具体的样式名称时,TextBlock将使用隐式样式定义的样式,很强大的功能。
注意:新的样式不能继承自隐式样式,但隐式样式则可继承自一个非隐式样式。
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. 数据绑定简述
相关文章推荐
- Windows 8 Metro 开发学习笔记一:新的TextBox控件与换行符
- Go语言学习笔记(一) : 搭建Windows下的Go开发环境
- Android 学习笔记(三)Windows下建立Android开发环境
- Windows游戏开发学习笔记之二
- Windows 8 Metro App学习笔记(九)—磁砖
- Windows驱动程序开发学习笔记(一) - 下载并安装WDK
- Windows 8 Directx 开发学习笔记(十)纹理贴图实现旋转的木箱
- Object C学习笔记6-如何在Windows环境搭建Object C开发环境
- python基础教程学习笔记 — 准备Windows下开发环境
- Silverlight for Windows Phone 开发学习笔记(-)
- Windows游戏开发学习笔记之三
- Windows驱动开发工具 WDK 学习笔记(1) 分类: windows驱动程序WDM 2013-08-01 11:08 566人阅读 评论(0) 收藏
- Windows驱动程序开发学习笔记(一) - 下载并安装WDK
- Windows Phone 开发学习笔记(四) Hello Windows Phone之心有灵犀
- Windows驱动开发工具 WDK 学习笔记
- Windows驱动开发工具 WDK 学习笔记(1)
- Windows 8 Directx 开发学习笔记(十三)利用模板实现木箱镜像
- Hadoop学习笔记(九):如何在windows上使用eclipse远程连接hadoop进行程序开发
- Cocos2d-x学习笔记(一)——Windows开发环境和Android交叉编译环境搭建
- 学习 WINDOWS8 的开发 Windows Metro Style Apps !