xaml tutorial by allan
TRANSCRIPT
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>...