1,OpacityMask控件的部分渐隐(见Project16)
(1) 控件的OpacityMask有什么作用
说明:
设置所选区域不透明度的画笔,一般结合LinearGradientBrush或RadialGradientBrush使用
般用它来实现实现渐隐效果
将一个图片实现渐隐效果,需要在一个渐变点设置Color="Transparent"
<Image.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="red" Offset="0"></GradientStop> <GradientStop Color="Transparent" Offset="1"></GradientStop> </LinearGradientBrush> </Image.OpacityMask>
另一种
<Image.OpacityMask> <RadialGradientBrush Center="0.5,0.5"> <GradientStop Color="Red" Offset="0"></GradientStop> <GradientStop Color="Transparent" Offset="1"></GradientStop> </RadialGradientBrush> </Image.OpacityMask>
(2) OpacityMask是什么类型
说明:
OpacityMask是一个Brush类型
(3) 将一个TextBox实现一个渐隐效果
说明:
像TextBox可以直接用Background设置也能实现类似的渐隐效果,但像Image就没有Background设置了,通过OpacityMask就很方便
<TextBox Background="Gray"> <TextBox.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Color="Red" Offset="0"></GradientStop> <GradientStop Color="Transparent" Offset="1"></GradientStop> </LinearGradientBrush> </TextBox.OpacityMask> </TextBox>
2,两种效果Effect_模糊和投影(见Project17)
(1) Effect有哪两种效果
说明:
BlurEffect 模糊
DropShadowEffect 投影
(2)Effect是什么类型
说明:Effect就是Effect类型
(3)在一个TextBox中添加文字,并将其模糊(在中文帮助里查看BlurEffect怎么用)
说明:
通过Radius设置模糊程度
<TextBox.Effect> <BlurEffect Radius="10"></BlurEffect> </TextBox.Effect>
(4)BlurEffect的一个重要属性是什么,怎么使用
说明:
通过Radius设置模糊程度,一般值的范围是1--100
(5)将一个Button添加一个投影效果(在中文帮助里查看DropShadowEffect怎么用)
说明:
<Button.Effect> <DropShadowEffect Color="Red" Direction="225" ShadowDepth="7" BlurRadius="20" Opacity="20"></DropShadowEffect> </Button.Effect>
(6)DropShadowEffect有哪几个重要属性,分别怎么使用
说明:
Color="Red" 设置投影的颜色
Direction="225" 投影的位置
ShadowDepth="7" 投影的距离
BlurRadius="20" 投影的模糊程度
Opacity="20" 设置边缘的不透明度
3,六种变换(见Project18)
(1) 有哪六种变换
说明:
RotateTransform 按一定角度旋转
ScaleTransform 等比例缩放
SkewTransform 扭曲歪斜
TranslateTransform 位移
TransformGroup 复合变换
MatrixTransform 矩阵变换
(2) RenderTransform是什么类型
说明:
RenderTransform是Transform类型
一般用作控件的属性,使控件发生变换
(3) 如何让一个按钮呈15度旋转(在中文帮助里查看RotateTransform怎么用)
说明:
<Button.RenderTransform> <RotateTransform Angle="90" CenterX="60" CenterY="30"></RotateTransform> </Button.RenderTransform>
(4) RotateTransform有哪几个重要属性,分别怎么使用
说明:
RotateTransform使控件可以按一定角度旋转
Angel: 旋转角度,默认以左上角为旋转中心点.为正值则按顺时针方向旋转,为负值则按逆时针方向旋转
CenterX,CenterY 定义旋转的中心点
(5) 将一个TextBox持续不断的顺时针转动(用到定时器)
说明:
DispatcherTimer dt = new DispatcherTimer(); dt.Interval = TimeSpan.FromMilliseconds(200); dt.Tick += dt_Tick; dt.Start(); void dt_Tick(object sender, EventArgs e) { myRotate.Angle += 5; }
(6) 将一张图片按照中心点位置,进行缩放
说明:
将图片等比例放大为原来的2倍
<Image.RenderTransform> <ScaleTransform ScaleX="2" ScaleY="2" CenterX="50" CenterY="50"></ScaleTransform> </Image.RenderTransform>
(6) ScaleTransform,ScaleX和ScaleY的作用是什么,当为负值时有什么效果,它与CenterX,CenterY有什么关系(用示例演示说明)
说明:
ScaleTransform 等比例缩放
ScaleX和ScaleY 为控件在X和Y轴的缩放比例,值为原控件的缩放倍数.当为负值时,会先翻转例置再缩放
CenterX和CenterY为缩放的焦点
(7) 将一个视频倒影播放效果
说明:
<MediaElement.RenderTransform> <ScaleTransform ScaleY="-1" CenterY="50"></ScaleTransform> </MediaElement.RenderTransform>
(8) 如何让一个图片做成倾斜的效果(在中文帮助里查看SkewTransform怎么用)
说明:
<Image.RenderTransform> <SkewTransform AngleX="0" AngleY="-30" CenterX="50" CenterY="50"></SkewTransform> </Image.RenderTransform>
(9) SkewTransform有哪几个重要属性,分别怎么使用
说明:
SkewTransform使控件扭曲歪斜
AngleX:没X轴逆时针旋转
AngelY:沿Y轴顺时针旋转
CenterX和CenterY
(10) 如何将一个图片实现位移的效果(在中文帮助里查看TranslateTransform怎么用)
说明:
<Image.RenderTransform> <TranslateTransform X="10" Y="30"></TranslateTransform> </Image.RenderTransform>
(11) TranslateTransform有哪几个重要属性,怎么使用(如果为负值,有什么效果)
说明:
TranslateTransform 沿X和Y轴位移
X: 沿X轴位移,单位像素
Y: 沿Y轴位移,单位像素
注意:X和Y若为负值,则按相反方向位移
(12) 什么是复合变换,它用什么标签表示,用一个示例演示一下效果
说明:
复合变换使用标签TransformGroup,表示一个容器,可以将多种Transform效果放进去
<TextBlock.RenderTransform> <TransformGroup> <RotateTransform Angle="30"></RotateTransform> <SkewTransform AngleX="20"></SkewTransform> </TransformGroup> </TextBlock.RenderTransform>
(13) 什么是3D投射效果,用什么标签表示
说明:
3D投射,可以使控件在三维空间旋转
用标签PlaneProjection实现
属性:RotationX,RotaionY,RotaionZ 分别以X轴,Y轴,Z轴旋转的角度,可以为负值
<Image.Projection> <PlaneProjection RotationX="30" RotationY="60" RotationZ="60"></PlaneProjection> </Image.Projection>
(14) 将一个图片实现3D翻转的效果(使用定时器修改RotationX)
说明:
前端:
<Image.Projection> <PlaneProjection RotationX="0" RotationY="0" RotationZ="0" x:Name="myPlan"></PlaneProjection> </Image.Projection>
代码:
DispatcherTimer dt = new DispatcherTimer(); dt.Interval = TimeSpan.FromMilliseconds(200); dt.Tick += dt_Tick; dt.Start(); void dt_Tick(object sender, EventArgs e) { myPlan.RotationY += 10; myPlan.RotationX += 10; myPlan.RotationZ += 10; }
(15) 用MatrixTransform演示一下矩阵变换的效果
说明:
矩阵变换,有点复杂
<Rectangle.RenderTransform> <MatrixTransform> <MatrixTransform.Matrix > <Matrix OffsetX="20" OffsetY="30" M12="0.3" /> </MatrixTransform.Matrix> </MatrixTransform> </Rectangle.RenderTransform>