【WPF】2、美化控件

控件有默认样式，但是有时候默认样式并不够用，就需要美化。

1、常用的方法是美术出图，直接贴图进去，效果又好又简单（对程序来说）。

用图片有三种方式：设置控件背景图片、设置控件内容为图片和直接使用图片做控件三种。

<Window x:Class="战五渣之环游世界.WPF.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:战五渣之环游世界.WPF"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="800">
    <!--方案一，设置控件的背景为图片-->
    <Window.Background>
        <ImageBrush ImageSource="/images/mainbg.jpg"></ImageBrush>
    </Window.Background>
    <Grid>
        <Button>
            <!--方案二，设置控件的内容为图片，这里不能使用背景图片，因为按钮默认具有鼠标经过样式-->
            <Image Source="/images/mainbg.jpg"></Image>
        </Button>
    </Grid>
</Window>

贴图美化

2、使用画刷

可能对颜色的需求会比较复杂。可以使用画刷类

1、SolidColorBrush 单色画刷

2、TileBrush 描述使用一个或多个图块绘制区域的方法。有三个子类：

2-1、DrawingBrush 使用 System.Windows.Media.Drawing 绘制区域，该对象包括形状、文本、视频、图像或其他绘制项。Draw是描述二维绘图的抽象类，并且不能被外部继承，只能用它提供的子类。这个东西有点方，单开一章记录。

2-2、ImageBrush 使用图像绘制区域。上一个板块示例就用了这个。

2-3、VisualBrush 使用 System.Windows.Media.VisualBrush.Visual 绘制区域。Visual类提供的呈现支持 WPF, ，其中包括命中测试、坐标转换和边界框计算。

3、GradientBrush 一个抽象类，描述由渐变停止点组成的渐变

3-1、LinearGradientBrush 使用线性渐变绘制区域。

3-2、RadialGradientBrush 使用径向渐变绘制区域。焦点定义渐变的开始，而圆定义渐变的终点。

4、BitmapCacheBrush 绘制带有缓存的内容的区域。据说性能不好，也有点深了，不求甚解。

<StackPanel>
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Height" Value="50"></Setter>
                <Setter Property="Background" Value="Yellow"></Setter>
            </Style>
        </StackPanel.Resources>
        <TextBlock Text="LinearGradientBrush">
            <TextBlock.Background>
                <LinearGradientBrush>
                    <GradientStop Color="Red" Offset="0"></GradientStop>
                    <GradientStop Color="Blue" Offset="1"></GradientStop>
                </LinearGradientBrush>
            </TextBlock.Background>
        </TextBlock>
        <TextBlock Text="RadialGradientBrush">
            <TextBlock.Background>
                <RadialGradientBrush>
                    <GradientStop Color="Red" Offset="0"></GradientStop>
                    <GradientStop Color="Blue" Offset="1"></GradientStop>
                </RadialGradientBrush>
            </TextBlock.Background>
        </TextBlock>
        <TextBlock Text="SolidColorBrush">
            <TextBlock.Background>
                <SolidColorBrush Color="Red"></SolidColorBrush>
            </TextBlock.Background>
        </TextBlock>

        <TextBlock Name="txtVisualBrush" Text="VisualBrush">
        </TextBlock>
        <Rectangle Height="50">
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding ElementName=txtVisualBrush}"></VisualBrush>
            </Rectangle.Fill>
        </Rectangle>
    </StackPanel>

画刷

3、变换

TranslateTransform 位移

RotateTransform 旋转

ScaleTransForm 缩放

SkewTransform 坐标扭曲（倾斜，如长方向变平行四边形）这篇文章写得很好：https://www.cnblogs.com/xiaogui9527/p/3190707.html

MatrixTransform 矩阵变换。矩阵在图形设计中还是比较常见，需要单独学习。

常用设置：
位移： M11=0, M12=0, M21=0, M22=0, offsetX=x轴位移, offsetY=y轴位移
缩放： M11=水平缩放倍数, M12=0, M21=0, M22=垂直缩放倍数, offsetX=0, offsetY=0
旋转： M11= Math.Cos(旋转角度), M12=Math.Sin(旋转角度), M21=-Math.Sin(旋转角度), M22=Math.Cos(旋转角度), offsetX=0.0, offsetY=0.0
倾斜： M11=1.0, M12=Math.Tan(垂直方向倾斜角度), M21=Math.Tan(水平倾斜角度), M22=1.0, offsetX=0.0, offsetY=0.0
涉及三角函数的不给示例，因为需要再后台赋值和运算，这章尽量不贴后台代码。

TransformGroup 变换组合

<StackPanel>
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Margin" Value="0,0,0,10"></Setter>
                <Setter Property="Width" Value="300"></Setter>
                <Setter Property="Height" Value="30"></Setter>
                <Setter Property="Background" Value="Yellow"></Setter>
            </Style>
        </StackPanel.Resources>
        <TextBlock Text="默认样式"></TextBlock>
        <TextBlock Text="位移TranslateTransform">
            <TextBlock.RenderTransform>
                <TranslateTransform X="10" Y="10"></TranslateTransform>
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock Text="旋转RotateTransform ">
            <TextBlock.RenderTransform>
                <RotateTransform CenterX="10" CenterY="10" Angle="10"></RotateTransform>
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock Text="缩放ScaleTransForm">
            <TextBlock.RenderTransform>
                <ScaleTransform  CenterX="10" CenterY="10" ScaleX="1.5" ScaleY="0.4"></ScaleTransform>
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock Text="坐标扭曲SkewTransform">
            <TextBlock.RenderTransform>
                <SkewTransform  CenterX="10" CenterY="10" AngleX="10" AngleY="10"></SkewTransform>
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock Text="TransformGroup先平移再旋转">
            <TextBlock.RenderTransform>
                <TransformGroup>
                    <TranslateTransform X="20"></TranslateTransform>
                    <RotateTransform CenterX="0" CenterY="0" Angle="10"></RotateTransform>
                </TransformGroup>
            </TextBlock.RenderTransform>
        </TextBlock>
    </StackPanel>

变换

    <Canvas>
        <Canvas.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Canvas.Left" Value="0"></Setter>
                <Setter Property="Canvas.Top" Value="0"></Setter>
                <Setter Property="Margin" Value="0,0,0,0"></Setter>
                <Setter Property="Width" Value="300"></Setter>
                <Setter Property="Height" Value="30"></Setter>
                <Setter Property="Background" Value="Yellow"></Setter>
            </Style>
        </Canvas.Resources>
        <TextBlock Text="原图">
        </TextBlock>
        <TextBlock Text="下移50像素">
            <TextBlock.RenderTransform>
                <MatrixTransform>
                    <MatrixTransform.Matrix >
                        <Matrix OffsetX="0" OffsetY="50"
                                M11="1" M12="0"
                                M21="0" M22="1"/>
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock Text="下移200像素后，水平放大1.5倍，垂直方向放大2倍">
            <TextBlock.RenderTransform>
                <MatrixTransform>
                    <MatrixTransform.Matrix >
                        <Matrix OffsetX="0" OffsetY="200" 
                                M11="1.5" M12="0"
                                M21="0" M22="2"/>
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </TextBlock.RenderTransform>
        </TextBlock>
    </Canvas>

MatrixTransform

4、使用特效类

现在能用的特效类都是继承至System.Windows.Media.Effects基类。

BlurEffect 使目标纹理变模糊的位图效果。属性有模糊度（Radius）。

DropShadowEffect 在目标纹理周围绘画投影的位图效果。属性有颜色（Color）、阴影距离（ShadowDepth）、模糊度（BlurRadius）、透明度（Opacity）、方向（Direction）。

    <WrapPanel>
        <TextBlock Margin="10" Text="BlurEffect">
            <TextBlock.Effect>
                <BlurEffect></BlurEffect>
            </TextBlock.Effect>
        </TextBlock>

        <TextBlock Margin="10" Text="DropShadowEffect">
            <TextBlock.Effect>
                <DropShadowEffect></DropShadowEffect>
            </TextBlock.Effect>
        </TextBlock>
    </WrapPanel>

特效类

ShaderEffect 通过使用 System.Windows.Media.Effects.PixelShader 提供自定义位图效果。通过继承这个类来实现自己的特效类。需要使用*.ps格式的文件。

已过时的

继承System.Windows.Media.BitmapEffect(定义位图效果)的都过时了。

BevelBitmapEffect 创建凹凸效果，根据指定的曲线提升图像表面。

BlurBitmapEffect 模拟通过离焦透镜查看对象的情形

DropShadowBitmapEffect 在视觉对象后的轻微偏移量处应用阴影。偏移量是通过模仿来自虚构光源的投射阴影确定的。

EmbossBitmapEffect 创造平滑的视觉对象，制造出人工光源的深度纹理效果。

OuterGlowBitmapEffect 围绕对象或颜色区域创建颜色光环。

5、添加动画效果

所有动画都继承于System.Windows.Media.Animation.Animatable，特效类也继承与这个。这是一个抽象类，提供动画支持。

这里讨论的动画都继承自System.Windows.Media.Animation.AnimationTimeline。定义生成输出值的时间段。这些值用于对目标属性进行动画处理。

每一种变量的动画效果都存在一个基类（如字符串，整形，长整形的变化），继承AnimationTimeline对象，并命名为效果名+AnimationBase。

基类动画可能有三种实现方式：

线性插值命名方式为效果名+Animation 将对象的某一属性，在固定时间内，从一个值变化到另外一个值。

关键帧命名方式为效果名+AnimationUsingKeyFrames。比线性插值跟复杂，实现多个线性插值的组合效果。

路径命名方式为效果名+AnimationUsingPath。让指定属性沿着路径移动。

BooleanAnimationBase 当实现时，对 System.Boolean 值进行动画处理的抽象类。

BooleanAnimationUsingKeyFrames 按照指定 System.Windows.Media.Animation.Timeline.Duration 内的一组 System.Windows.Media.Animation.BooleanAnimationUsingKeyFrames.KeyFrames 对具有 System.Boolean 的属性的值进行动画处理。

ByteAnimation 在指定的 System.Windows.Duration 上使用线性内插对两个目标值之间的 System.Byte 属性值进行动画处理。

ByteAnimationBase 当实现时，对 System.Byte 值进行动画处理的抽象类。

ByteAnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.ByteAnimationUsingKeyFrames.KeyFrames 对 System.Byte 属性的值进行动画处理。

CharAnimationBase 当实现时，对 System.Char 值进行动画处理的抽象类。

CharAnimationUsingKeyFrames 根据指定 System.Windows.Media.Animation.Timeline.Duration 内的一组 System.Windows.Media.Animation.CharAnimationUsingKeyFrames.KeyFrames，对 System.Char 属性值进行动画处理。

ColorAnimation 在指定的 System.Windows.Media.Animation.Timeline.Duration 上使用线性内插对两个目标值之间的 System.Windows.Media.Color 属性值进行动画处理。

ColorAnimationBase 当实现时，对 System.Windows.Media.Color 值进行动画处理的抽象类。

ColorAnimationUsingKeyFrames 根据指定 System.Windows.Duration 内的一组 System.Windows.Media.Animation.ColorAnimationUsingKeyFrames.KeyFrames，对 System.Windows.Media.Color 属性值进行动画处理。

DecimalAnimation 在指定的 System.Windows.Media.Animation.Timeline.Duration 上使用线性内插对两个目标值之间的 System.Decimal 属性值进行动画处理。

DecimalAnimationBase 当实现时，对 System.Decimal 值进行动画处理的抽象类。

DecimalAnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.DecimalAnimationUsingKeyFrames.KeyFrames 对 System.Decimal 属性的值进行动画处理。

DoubleAnimation 在指定的 System.Windows.Media.Animation.Timeline.Duration 上使用线性内插对两个目标值之间的 System.Double 属性值进行动画处理。

DoubleAnimationBase 抽象类，该类在实现时，进行动画处理 System.Double 值。

DoubleAnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames.KeyFrames 对 System.Double 属性的值进行动画处理。

DoubleAnimationUsingPath 使用 System.Windows.Media.PathGeometry 在两个或多个目标值之间对 System.Double 属性值进行动画处理，以指定这些值。此动画可用于沿路径移动可视对象。

Storyboard storyboard = new Storyboard();
        DoubleAnimation cameraOffsetXAnimation = new DoubleAnimation();
        DoubleAnimation cameraOffsetYAnimation = new DoubleAnimation();

        /// <summary>
        /// 初始化移动动画
        /// </summary>
        /// <returns></returns>
        private Storyboard InitMoveAnimation()
        {
            storyboard.Children.Add(cameraOffsetYAnimation);
            storyboard.Children.Add(cameraOffsetXAnimation);
            Storyboard.SetTarget(cameraOffsetYAnimation, this);
            Storyboard.SetTargetProperty(cameraOffsetYAnimation, new PropertyPath("(Canvas.Top)"));
            Storyboard.SetTarget(cameraOffsetXAnimation, this);
            Storyboard.SetTargetProperty(cameraOffsetXAnimation, new PropertyPath("(Canvas.Left)"));
            storyboard.Completed += (s, e) =>
            {
                CurAction = SpriteActions.Stop;
            };
            return storyboard;
        }
        /// <summary>
        /// 移动到点，点必须在场景内
        /// </summary>
        /// <param name="newPoint"></param>
        private void MoveToPoint(Point newPoint)
        {
            CurAction = SpriteActions.Run;

            double oldY = Canvas.GetTop(this);
            cameraOffsetYAnimation.To = newPoint.Y;
            var distanceY = newPoint.Y - oldY;
            cameraOffsetYAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(100 * Math.Abs(distanceY / Speed)));
            //this.BeginAnimation(Canvas.TopProperty, cameraOffsetYAnimation);


            double oldX = Canvas.GetLeft(this);
            cameraOffsetXAnimation.To = newPoint.X;
            var distanceX = newPoint.X - oldX;
            cameraOffsetXAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(100 * Math.Abs(distanceX / Speed)));
            //this.BeginAnimation(Canvas.LeftProperty, cameraOffsetXAnimation);

            storyboard.Stop();
            storyboard.Begin();

        }

移动动画示例

Int16Animation 在指定的 System.Windows.Media.Animation.Timeline.Duration 上使用线性内插对两个目标值之间的 System.Int16 属性值进行动画处理。

Int16AnimationBase 抽象类，该类在实现时，进行动画处理 System.Int16 值。

Int16AnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.Int16AnimationUsingKeyFrames.KeyFrames 对 System.Int16 属性的值进行动画处理。

Int32Animation 在指定的 System.Windows.Media.Animation.Timeline.Duration 上使用线性内插对两个目标值之间的 System.Int32 属性值进行动画处理。

Int32AnimationBase 抽象类，该类在实现时，进行动画处理 System.Int32 值。

Int32AnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.Int32AnimationUsingKeyFrames.KeyFrames 对 System.Int32 属性的值进行动画处理。

Int64Animation 在指定的 System.Windows.Media.Animation.Timeline.Duration 上使用线性内插对两个目标值之间的 System.Int64 属性值进行动画处理。

Int64AnimationBase 抽象类，该类在实现时，进行动画处理 System.Int64 值。

Int64AnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.Int64AnimationUsingKeyFrames.KeyFrames 对 System.Int64 属性的值进行动画处理。

MatrixAnimationBase 抽象类，该类在实现时，进行动画处理 System.Windows.Media.Matrix 值。

MatrixAnimationUsingPath 通过使用 System.Windows.Media.PathGeometry 动画处理 System.Windows.Media.Matrix 属性的值以生成具有动画效果的值。此动画可用于沿路径移动可视对象。

ObjectAnimationBase 抽象类，该类在实现时，进行动画处理 System.Object 值。

ObjectAnimationUsingKeyFrames 通过指定的 System.Windows.Media.Animation.Timeline.Duration，根据一组 System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames.KeyFrames 对 System.Object 属性的值进行动画处理。

Point3DAnimation 通过在两个值之间使用线性内插，对 System.Windows.Media.Media3D.Point3D 属性的值进行动画处理。

Point3DAnimationBase 抽象类，该类在实现时，进行动画处理 System.Windows.Media.Media3D.Point3D 值。

Point3DAnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.Point3DAnimationUsingKeyFrames.KeyFrames 对 System.Windows.Media.Media3D.Point3D 属性的值进行动画处理。

PointAnimation 在指定的 System.Windows.Media.Animation.Timeline.Duration 上使用线性内插对两个目标值之间的 System.Windows.Point 属性值进行动画处理。

PointAnimationBase 抽象类，该类在实现时，进行动画处理 System.Windows.Point 值。

PointAnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.PointAnimationUsingKeyFrames.KeyFrames 对 System.Windows.Point 属性的值进行动画处理。

PointAnimationUsingPath 使用 System.Windows.Media.PathGeometry 在两个或多个目标值之间对 System.Windows.Point 属性值进行动画处理，以指定这些值。此动画可用于沿路径移动可视对象。

QuaternionAnimation 在指定的 System.Windows.Media.Animation.Timeline.Duration 上使用线性内插对两个目标值之间的 System.Windows.Media.Media3D.Quaternion 属性值进行动画处理。

QuaternionAnimationBase 抽象类，该类在实现时，进行动画处理 System.Windows.Media.Media3D.Quaternion 值。

QuaternionAnimationUsingKeyFrames 据指定 System.Windows.Media.Animation.Timeline.Duration 内的一组 System.Windows.Media.Animation.QuaternionAnimationUsingKeyFrames.KeyFrames，对 System.Windows.Media.Media3D.Quaternion 属性值进行动画处理。

RectAnimation 在使用线性内插对两个目标值之间的 System.Windows.Rect 属性值进行动画处理。

RectAnimationBase 抽象类，该类在实现时，进行动画处理 System.Windows.Rect 值。

RectAnimationUsingKeyFrames 对一组关键帧中具有 System.Windows.Rect 的属性的值进行动画处理。

Rotation3DAnimation 使用两个值之间的线性内插（通过为动画设置的 System.Windows.Media.Animation.Rotation3DAnimation.From、System.Windows.Media.Animation.Rotation3DAnimation.To 或 System.Windows.Media.Animation.Rotation3DAnimation.By 属性的组合确定）对 System.Windows.Media.Media3D.Rotation3D 属性的值进行动画处理。

Rotation3DAnimationBase 抽象类，该类在实现时，进行动画处理 System.Windows.Media.Media3D.Rotation3D 值。

Rotation3DAnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.Rotation3DAnimationUsingKeyFrames.KeyFrames 对 System.Windows.Media.Media3D.Rotation3D 属性的值进行动画处理。

SingleAnimation 在指定的 System.Windows.Media.Animation.Timeline.Duration 上使用线性内插对两个目标值之间的 System.Single 属性值进行动画处理。

SingleAnimationBase 抽象类，该类在实现时，进行动画处理 System.Single 值。

SingleAnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.SingleAnimationUsingKeyFrames.KeyFrames 对 System.Single 属性的值进行动画处理。

SizeAnimation 在指定的 System.Windows.Media.Animation.Timeline.Duration 上使用线性内插对两个目标值之间的 System.Windows.Size 属性值进行动画处理。

SizeAnimationBase 抽象类，该类在实现时，进行动画处理 System.Windows.Size 值。

SizeAnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.SizeAnimationUsingKeyFrames.KeyFrames 对 System.Windows.Size 属性的值进行动画处理。

StringAnimationBase 抽象类，该类在实现时，进行动画处理 System.String 值。

StringAnimationUsingKeyFrames 根据指定 System.Windows.Media.Animation.Timeline.Duration 内的一组 System.Windows.Media.Animation.StringAnimationUsingKeyFrames.KeyFrames，对 System.String 属性值进行动画处理。

Vector3DAnimation 通过在两个值之间使用线性内插，对 Vector3D 属性的值进行动画处理。

Vector3DAnimationBase 抽象类表示的动态 System.Windows.Media.Media3D.Vector3D 值。

Vector3DAnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.Vector3DAnimationUsingKeyFrames.KeyFrames 对 System.Windows.Media.Media3D.Vector3D 属性的值进行动画处理。

VectorAnimation 在指定的 System.Windows.Media.Animation.Timeline.Duration 上使用线性内插对两个目标值之间的 System.Windows.Vector 属性值进行动画处理。

VectorAnimationBase 抽象类，该类在实现时，进行动画处理 System.Windows.Vector 值。

VectorAnimationUsingKeyFrames 根据一组 System.Windows.Media.Animation.VectorAnimationUsingKeyFrames.KeyFrames 对 System.Windows.Vector 属性的值进行动画处理。

posted @ 2019-08-14 09:43 胡正阅读(1039) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

胡先生的博客

两个黄鹂鸣翠柳，一行代码上青天