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、具体代码示例:设置固定大小,加载图片显示。
<StackPanel Orientation="Horizontal"><!--FlowDirection默认值为LeftToRight--><Image x:Name="img" Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill" FlowDirection="LeftToRight" Cursor="ScrollAll" Opacity="0.7"/><!--FlowDirection流动方向设置为RightToLeft--><Image x:Name="img2" Width="150" Height="100" Margin="10" Source="pack://application:,,,/huahua.png"Stretch="Fill" FlowDirection="RightToLeft" Cursor="Hand"/><!--Source的路径不建议使用磁盘地址--><Image x:Name="img3" Width="150" Height="100" Margin="10" RenderTransformOrigin="0.5,0.5"Source="Pack://application:,,,/WPFControlsTest;component/huahua.png" Stretch="Fill" ><Image.RenderTransform><TransformGroup><RotateTransform Angle="180" CenterX="0" CenterY="0"/><ScaleTransform ScaleX="1.1" ScaleY="1.1"/><TranslateTransform X="50" Y="50"/></TransformGroup></Image.RenderTransform></Image></StackPanel>
代码示例中,第一张图设置了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。
**************************************************************************************************************