RIA全解全析下篇.docx

RIA全解全析下篇.docx

《RIA全解全析下篇.docx》由会员分享，可在线阅读，更多相关《RIA全解全析下篇.docx（26页珍藏版）》请在冰豆网上搜索。

RIA全解全析下篇

18、在C#中使用画刷,制作Silverlight取色器

（使用 Grid进行布局，用Border对象产生圆角，使用滑动条控件来控制和产生颜色的变化，通过在C#代码中声明ValueChanged事件来实时产生矩形的颜色值，将滑动条控件的ValueChanged事件绑定到同一个事件处理程序）

Xaml代码

Name="LayoutRoot"Background="White">

--添加圆角边框-->

BorderThickness="3"CornerRadius="10"

Background="AliceBlue">

--添加网格边距-->

--添加滑动控制条-->

--添加文字说明-->

HorizontalAlignment="Left"

VerticalAlignment="Top"

Grid.Row="0"Grid.Column="1"/>

HorizontalAlignment="Left"

VerticalAlignment="Top"

Grid.Row="1"Grid.Column="1"/>

HorizontalAlignment="Left"

VerticalAlignment="Top"

Grid.Row="2"Grid.Column="1"/>

HorizontalAlignment="Left"

VerticalAlignment="Top"

Grid.Row="3"Grid.Column="1"/>

--用来显示颜色-->

Name="rect"

Width="150"Height="120"

Fill="Green"Stroke="Black"

Grid.Row="1"

Grid.RowSpan="2"Grid.Column="0"/>

--显示输入颜色值-->

Name="tbColor"

Width="140"Height="26"

Grid.Row="3"Grid.Column="0"/>

--标题和说明文字-->

Grid.Row="3"Grid.Column="0"/>

FontSize="20"Width="200"Height="30"

HorizontalAlignment="Left"VerticalAlignment="Top"

Grid.Row="0"Grid.Column="0"/>

C#代码

publicbrushmcA（）

{

InitializeComponent（）;

SetColors（）;

//声明滑动条对象的事件处理程序

}

//填充颜色

privatevoidSetColors（）

{

SolidColorBrushscb

=newSolidColorBrush（

Color.FromArgb（（byte）sldA.Value

（byte）sldR.Value

（byte）sldG.Value

（byte）sldB.Value））;

//矩形填充颜色

//显示新的色值

}

//滑动条的事件处理代码

voidValueChanged（objectsender,

RoutedPropertyChangedEventArgse）

{

}

19、图像特效

1）将以下XAML代码补充完整,实现图像的透明遮罩（使用放射渐变画刷）

//使用图像的透明遮罩效果

//使用放射渐变画刷

2）将以下XAML代码补充完整,实现图像的裁剪特效（裁剪的范围是几何椭圆）

//使用图像的裁剪特效

//裁剪的范围是几何椭圆

3）将以下XAML代码补充完整,实现图像的平移变化

//原始图像

//平移图像

//声明变形属性

//使图像向下向右平移100px）

4）将以下XAML代码补充完整,实现图像的平移变化

//原始图像

//旋转图像

//声明变形属性

//使用旋转变形使图像绕着左上角顺时针方向旋转45度

5）将以下XAML代码补充完整,实现图像的缩放变形

//原始图像

//缩放图像

//声明变形属性

//使用缩放变形使图像变成原来的0.5倍大小

6）将以下XAML代码补充完整,实现图像的扭曲变形

//原始图像

//扭曲图像

//声明变形属性

//使用扭曲变形元素使图像垂直向下倾斜15px

7）将以下XAML代码补充完整,实现图像的扭曲变形和旋转变形叠加效果

//声明对象的变形元素

//使用组合变形元素实现水平扭曲倾斜30px,旋转15度

20、透视变形

//实现白色到绿色的线性渐变填充

//实现投影特效，阴影的模糊半径为10，方向为220，颜色为黑色，透明度设为0.5

//实现3DEffects特效，X轴旋转-30，Y轴旋转-40，Z轴旋转-10

RotationX="-30"RotationY="-40"/>

Text="Silverlight3.03DEffect"

FontSize="20"/>

"/>

"/>

Width="100"Height="30"/>

效果如图

21、使用Element-to-ElementBinding实现Slider控件控制Image元素的Opacity属性

Name="LayoutRoot"Background="White">

Name="image"Opacity="1"Margin="10"

Grid.Row="0"

Source="/Images/silverlight.png"/>

//使用Slider控件改变图片透明度值,Slider控件宽300，高30，最小值0，最大值1，放置在表格第2行，双向绑定上述图片的透明度

Grid.Row="1"

Value="{BindingOpacity,Mode=TwoWay,ElementName=image}"/>

"Margin="10"

FontSize="18"Height="30"/>

//使用TextBox控件显示图片透明度值,文本框宽100，高30，双向绑定上述图片的透明度

Text="{BindingOpacity,Mode=TwoWay,ElementName=image}"/>

21、线性插值动画

1）使用DoubleAnimation制作一个简单进度条（XAML中使用EventTrigger播放动画）

—创建触发器-->

//声明Double动画，动画作用于矩形的宽度属性值，动画的目标名称为矩形名称，目标属性为矩形的宽度，宽度从1到600，动画执行一次持续的时间为3秒

Storyboard.TargetName="rect1"

Storyboard.TargetProperty="Width"

From="1"To="600"Duration="0:

0:

3"/>

--创建用来显示进度条的矩形-->

Name="rect1"Height="80"Width="0"

Fill="GreenYellow"Canvas.Left="50"Canvas.Top="80"

Stroke="Blue"StrokeThickness="1"/>

FontSize="30"Text="0%"/>

FontSize="30"Text="100%"/>

2）使用ColorAnimation创建一个简单的红绿灯动画（利用C#的Begin方法播放动画）

XAML:

--声明资源Resources-->

--声明由红变绿故事板1-->

Name="storyboard1">

//动画作用于圆的Color属性，目标名称为ellipse1,目标属性为SolidColorBrush.Color.颜色值从红到绿，持续时间为2秒

From="Red"To="Green"Duration="0:

0:

2"

Storyboard.TargetProperty="（Ellipse.Fill）.（SolidColorBrush.Color）">

--声明由绿变红故事板2-->

Name="storyboard2">

From="Green"To="Red"Duration="0:

0:

2"

Storyboard.TargetProperty="（Ellipse.Fill）.（SolidColorBrush.Color）">

--背景圆角矩形-->

Canvas.Left="50"Canvas.Top="30"

RadiusX="20"RadiusY="20"

StrokeThickness="5"Stroke="Blue"/>

--红色椭圆形-->

Name="ellipse1"Width="200"Height="200"

Fill="Red"Canvas.Left="100"Canvas.Top="80"

Stroke="Blue"StrokeThickness="5"/>

--绿色椭圆形-->

Name="ellipse2"Width="200"Height="200"

Fill="Green"Canvas.Left="450"Canvas.Top="80"

Stroke="Blue"StrokeThickness="5"/>

—单击事件触发故事板1动画-->

Name="btnSwapRed"Width="160"Height="50"

Content="Red"FontSize="25"Click="btnSwapRed_Click"

Canvas.Left="200"Canvas.Top="350"Background="Red"/>

—单击事件触发故事板2动画-->

Name="btnSwapGreen"Width="160"Height="50"

Content="Green"FontSize="25"Click="btnSwapGreen_Click"

Canvas.Left="400"Canvas.Top="350"Background="Green"/>

C#:

privatevoidbtnSwapRed_Click（objectsender,RoutedEventArgse）

{

//开始播放故事板1

storyboard1.Begin（）;

}

privatevoidbtnSwapGreen_Click（objectsender,RoutedEventArgse）

{

//开始播放故事板2

storyboard2.Begin（）;

}

3）使用PointAnimation实现小球垂直下落的动画

--声明几何椭圆ellipseGeometry1-->

Name="ellipseGeometry1"

Center="0,0"

RadiusX="50"RadiusY="50"/>

--使用图片填充椭圆-->

--声明事件触发器-->

--声明PointAnimation并指定其属性，动画目标名称为上述几何椭圆，目标属性为中心点，持续时间为5秒，中心点从（50，50）运动到（50，200），重复次数为永远-->

Storyboard.TargetProperty="Center"

Storyboard.TargetName="ellipseGeometry1"

Duration="0:

0:

0.5"

From="50,50"To="50,200"

RepeatBehavior="Forever"/>

--动画属性的说明-->

Text="（From:

50,50）"/>

Text="（To:

50,200）"/>

22、关键帧动画

1）使用PointAnimationUsingKeyFrames动画实现小球在三点之间运动（C#中使用Begin方法播放动画）

Name="storyboard1">

--声明Point关键帧动画的作用目标为几何椭圆的Center，声明线性补间类型，KeyTime属性0秒、2秒和4秒时Value属性分别为A、B、C三点坐标（50，50）、（250，250）和（450，50）-->

Storyboard.TargetName="ellipseGeometry1"

Storyboard.TargetProperty="Center">

KeyTime="0:

0:

0"/>

KeyTime="0:

0:

2"/>

KeyTime="0:

0:

4"/>

--使用篮球图片填充Path-->

--创建一个几何椭圆-->

Name="ellipseGeometry1"

RadiusX="50"RadiusY="50"/>

Text="A"/>

Text="B"/>

Text="C"/>

22、实现一个全功能视频播放器

XAML:

--声明多媒体MediaElement对象-