WPF 控件专题 Image控件详解

最新推荐文章于 2024-04-24 11:22:26 发布

^@^lemon tea^@^

最新推荐文章于 2024-04-24 11:22:26 发布

阅读量5.3k

点赞数 1

分类专栏： # WPF 控件专题文章标签： wpf WPF Image控件详解 Image控件详解 WPF Image

本文链接：https://blog.csdn.net/BYH371256/article/details/125327082

版权

WPF 控件专题专栏收录该内容

53 篇文章 88 订阅

订阅专栏

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、代码示例效果图，第三张图像是，添加了图像的渲染，角度、旋转、平移的设置。