Xaml Tutorial By Allan

XAML 基础

Allan Li

主要内容XAML 简介

使用 XAML 绘制图形和界面使用 XAML 进行图形变换

使用 XAML 创建动画

XAML 简介

XAML =

eXtensible Application Markup Language

可扩展应用程序标记语言

XAML 最主要的作用

Designer Developer

使用 XAML 绘制图形和界面

XAML 示例

• For example:<Canvas xmlns="..." xmlns:x="..."> <Rectangle Width="200" Height="150" Fill=“White" /> <Ellipse Width="200" Height="150" Stroke="Orange" /></Canvas>

XAML :

由 Tags 构建而成

可以直接使用 Tags 进行图形的绘制

Tags 表现为单独元素 (Rectangle…) 或容器类元素(Canvas…)

XAML 的 tags 中 , 除了描述图形 , 也有其它功能性 tags(Storyboard/Trigger…)

XAML 基础标签

Canvas 画布Brushes 笔刷

基础图形 :Rectangle,Ellipse,Line,Polygon,etc.TextBlock 文本框

Image 图像

Layout

Color

Shape

Content

Media

Canvas (1)

• For example:<Canvas Width="250" Height="200" Background="#FF747474"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Black" /></Canvas>

• Canvas 是容器的一种 , 其它图形可以在 Canvas 下绘制• Canvas 下的子元素拥有相对定位属性

The CanvasThe Rectangle

Canvas (2)

<Canvas xmlns="..." xmlns:x="..."> <Rectangle Width="200" Height="150" Fill="Black" /> <Ellipse Width="200" Height="150" Stroke="Orange" /></Canvas>

• Canvas 是 XAML 文档的根元素 (Silverlight)

Canvas (3)• 相对定位相对于第一个父级 Canvas

<Canvas xmlns="..." xmlns:x="..." Background="LightGray"> <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Black" /> <Canvas Canvas.Top="25" Canvas.Left="25" Width="150" Height="100" Background="Orange"> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="150" Height="75" Fill="Red" /> </Canvas></Canvas>

图形 (Shape)

• <Rectangle />• <Ellipse />• <Line />• <Polygon />• <PolyLine />• <Path />

Brushes (1)

用于声明对象的填充 / 描边方式

对于形来说 , 可以设定其填充方式

对于线来说 , 可以设定其描边方式

Brushes 支持单色填充 (Solid), 渐变填充 , 及图像填充

Brushes (2)

<SolidColorBrush />支持使用 141 种颜色名称 (e.g. Blue, Red, Green)

支持 #FFFFFF 或 #FFFFFFFF 的 16 进制表示方法

<Rectangle Width="200" Height="150" > <Rectangle.Fill> <SolidColorBrush Color="Black" /> </Rectangle.Fill></Rectangle>

<Rectangle Width="200" Height="150" Fill="Black" /><Rectangle Width="200" Height="150" Fill="Black" />

<Rectangle Width="200" Height="150" Fill="#FFFFFF" /><Rectangle Width="200" Height="150" Fill="#FFFFFF" />

Brushes (3)

<LinearGradientBrush />通过 Start 和 Stop 属性 , 以数值形式设定渐变的起始点位置与角度每一个 Gradient Stops 点可以设置渐变点的不同颜色

<Rectangle Width="200" Height="150" > <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <LinearGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill></Rectangle>

Brushes (4)

<RadialGradientBrush /> 与线性渐变语法一致

<Rectangle Width="200" Height="150" > <Rectangle.Fill> <RadialGradientBrush> <RadialGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Black" Offset="1" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Rectangle.Fill></Rectangle>

Brushes (5)

<ImageBrush />

<Ellipse Width="200" Height="75" > <Ellipse.Fill> <ImageBrush ImageSource="Assets/members.jpg" /> </Ellipse.Fill></Ellipse>

使用文本<TextBlock />

<TextBlock>Hello</TextBlock> Hello

<TextBlock FontSize="18">Hello</TextBlock>

Hello

<TextBlock FontFamily="Courier New">Hello</TextBlock>

Hello

<TextBlock TextWrapping="Wrap" Width="100"> Hello there, how are you?</TextBlock>

Hello there, how are you?

<TextBlock> Hello there,<LineBreak/>how are you?</TextBlock>

Hello there, how are you?

使用图像<Image /> 与图像填充的显示方式类似 , 但显示完整矩形图像

<Image Width=“200” Source=“Assets/Grass.jpg" />

使用 XAML 进行图形变换

图形变换对对象实施图形变换效果 , 包括变形 , 旋转等

<Rectangle Width="200" Height="100" Fill=“Red"> <Rectangle.RenderTransform> <RotateTransform CenterX="25" CenterY="100" Angle="45" /> </Rectangle.RenderTransform></Rectangle>

图形变换 (2)可以成组进行图形变换

<Canvas xmlns="..." xmlns:x="..."> <Canvas.RenderTransform> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /> <Line X1="25" Y1="75" X2="75" Y2="75" Stroke="Black" /></Canvas>

图形变换 (3)图形变换类型

<RotateTransform /> 转旋<ScaleTransform /> 缩放和拉伸<SkewTransform /> 倾斜<TranslateTransform /> 位移<MatrixTransform /> 按矩形运算进行变换

图形变换 (4)<TransformGroup /> 成组多个变换方式

<Canvas xmlns="..." xmlns:x="..."> <Canvas.RenderTransform> <TransformGroup> <RotateTransform Angle="-45" CenterX="50" CenterY="50"/> <ScaleTransform ScaleX="1.5" ScaleY="2" /> </TransformGroup> </Canvas.RenderTransform> <Ellipse Width="100" Height="100" Fill="Yellow" /> <Ellipse Canvas.Top="25" Canvas.Left="25" Width="10" Height="10" Fill="Black" /> <Ellipse Canvas.Top="25" Canvas.Left="65" Width="10" Height="10" Fill="Black" /></Canvas>

嵌入媒体<MediaElement /> 用于显示视频或音频 , 不需要其它控件

<Canvas xmlns="..." xmlns:x="..."> <MediaElement Source=“Assets/silverlight.wmv" /> </Canvas>

使用 XAML 创建动画

使用 XAML 制作动画

可以通过 XAML 语言创建复杂的动画方式

动画本身基于 XAML

动画播放的事件触发器基于 XAML

使用 XAML 制作动画 – 示例<Canvas xmlns="..." xmlns:x="..."> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" AutoReverse="True"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Canvas.Triggers> <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /></Canvas>

Triggers( 触发器 )

<EventTrigger />– EventTrigger 在被触发时将执行一个动作– 属性

• RoutedEvent– 指定一个用于触发的事件 (Canvas.Loaded)

• SourceName– 指定具有 RoutedEvent 的对象

• Actions– 可以设定为执行故事板 (BeginStoryboard)

Storyboard( 故事板 )

<Storyboard />– 用于描述和控制一个或多个动画– 可以把动画应用到对象的某个属性上来创建动

画效果– 相关属性

• TargetName , TargetProperty• From, By and To• Duration• AutoReverse• RepeatBehavior

动画类型

DoubleAnimation操作数值类型属性

<DoubleAnimation Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width" From="200" To="1" Duration="0:0:2" AutoReverse="True"/>

动画类型 (2)

ColorAnimation进行颜色变化动画

...<ColorAnimation Storyboard.TargetName="circleBrush" Storyboard.TargetProperty="Color" From=“Yellow" To="LightGray" Duration="0:0:2" />...<Ellipse x:Name="theCircle" Width="100" Height="100"> <Ellipse.Fill> <SolidColorBrush x:Name="circleBrush" Color="Yellow" /> </Ellipse.Fill></Ellipse>

动画类型 (3)PointAnimation

用于变化 Point 类型数值 (e.g 100,100)...<PointAnimation Storyboard.TargetName="myBrush" Storyboard.TargetProperty="StartPoint" From="0,0" To="1,1" Duration="0:0:2" AutoReverse="True" />...<LinearGradientBrush x:Name="myBrush" StartPoint="0,0" EndPoint="1,1"> <LinearGradientBrush.GradientStops> ... </LinearGradientBrush.GradientStops></LinearGradientBrush>...

关键帧动画

Keyframe AnimationsDoubleAnimationUsingKeyFramesColorAnimationUsingKeyFramesPointAnimationUsingKeyFrames

通过 Keyframe 对象指定关键帧所处的时间与属性值

来设定关键帧动画

关键帧类型

Discrete 非连续Linear 线性Spline 曲线

关键帧类型 (Demo)

...<DoubleAnimationUsingKeyFrames Storyboard.TargetName="theCircle" Storyboard.TargetProperty="Width"> <DoubleAnimationUsingKeyFrames.KeyFrames> <SplineDoubleKeyFrame Value="10" KeyTime="0:0:1" KeySpline="0.5,0,0.5,0.5" /> <SplineDoubleKeyFrame Value="50" KeyTime="0:0:2" KeySpline="0.5,0,0.5,0.5" /> <SplineDoubleKeyFrame Value="150" KeyTime="0:0:4" KeySpline="0.5,0,0.5,0.5" /> </DoubleAnimationUsingKeyFrames.KeyFrames></DoubleAnimationUsingKeyFrames>...

[email protected]