WPF 控件专题 Image控件详解

1、Image 介绍

    Image：表示用于显示图像的控件。

    Image可以加载以下图像类型：.bmp、.gif、.ico、.jpg、.png、.wdp 和 .tiff。但是在显示多帧图像时，仅显示第一个帧，控件不支持Image多帧图像的动画。

    在加载图像内容之前， ActualWidth 控件和 ActualHeight 控件将报告为零，因为图像内容用于确定控件的最终大小和位置。

    对于固定大小控件， Width 可以设置和/或 Height 属性。 但是，若要保留媒体的纵横比，请设置或Height属性，但不能同时设置Width这两者。

**************************************************************************************************************

2、Image常用属性介绍

    Width/Height：控件的宽度和高度。

    Clip：用于定义元素内容轮廓的几何图形。
        
    Cursor：在鼠标指针位于此元素上时显示的光标。

    HorizontalAlignment/VerticalAlignment：设置该元素在父类控件中，水平对齐/垂直对齐方式显示。

    IsMouseOver：获取一个值，该值指示鼠标指针是否位于此元素（包括可视化树中的子元素）的上方。

    Margin：获取或设置元素的外边距。

    Opacity：透明度。        Name：元素的标示名称。        ToolTip：提示信息

    Source：获取或设置图像的ImageSource，是最为重要的属性。

    Stretch：获取或设置一个值，该值描述应如何拉伸Image以填充目标矩形。

    StretchDirection：获取或设置一个值，该值指示如何缩放图像。

    Visibility：控件元素可见性。

    RenderTransform：获取或设置影响此元素的呈现位置的转换信息。

    RenderTransformOrigin：获取或设置由 RenderTransform 声明的任何可能呈现转换的中心点，相对于元素的边界。

**************************************************************************************************************

3、具体代码示例：设置固定大小，加载图片显示。

    代码示例中，第一张图设置了Opacity透明度，实现蒙版效果；Stretch属性：设置为Fill占满空间区域；

    None：内容保持其原始大小。
     
    Fill：调整内容的大小以填充目标尺寸。不保留纵横比。
      
    Uniform：在保留内容原有纵横比的同时调整内容的大小，以适合目标尺寸。

    UniformToFill：在保留内容原有纵横比的同时调整内容的大小，以填充目标尺寸。 如果目标矩形的纵横比不同于源矩形的纵横比，则对源内容进行剪裁以适合目标尺寸。

**************************************************************************************************************

4、代码示例效果图，第三张图像是，添加了图像的渲染，角度、旋转、平移的设置。

**************************************************************************************************************

5、总结和扩展

    对于Image中的Clip属性，详见文章“WPF 控件专题 Clip属性详解”。

    TransformGroup：表示由其他 System.Windows.Media.Transform 对象组成的复合 System.Windows.Media.Transform。

    RotateTransform：在二维 x-y 坐标系内围绕指定点按照顺时针方向旋转对象。
        Angle：顺时针旋转角度，以度为单位。 默认值为 0。
        CenterX/CenterY：旋转中心点的 x 坐标/y 坐标。

    ScaleTransform：在二维 x-y 坐标系内缩放对象。
        ScaleX/ScaleY：x 轴/y 轴的缩放比例。 默认值为 1。

    TranslateTransform：在二维 x-y 坐标系中平移（移动）对象。
        X：沿 x 轴平移（移动）对象的距离，默认值为 0。
        Y：沿 y 轴平移（移动）对象的距离，默认值为 0。

**************************************************************************************************************