图片效果设置
填充模式
WPF(Windows Presentation Foundation)中的Image控件支持多种填充模式来调整图像的显示方式。
系统支持的方式
以下是常用的填充模式:
None
(无填充):不对图像进行任何填充,直接按原样显示。Uniform
(等比例缩放填充):将图像等比例地缩放到可用空间的最大尺寸,保持图像的原始宽高比。UniformToFill
(等比例缩放并裁剪填充):将图像等比例地缩放到可用空间的最小尺寸,保持图像的原始宽高比,并将超出可用空间的部分裁剪掉。Fill
(填充整个空间):将图像拉伸或收缩以填充整个可用空间,不保持原始宽高比。
可以通过以下代码为Image控件设置填充模式:
1 | <Image Source="image.jpg" Stretch="None" /> |
其中,Stretch属性用于设置填充模式,默认值为Uniform。可以根据需求选择合适的填充模式来显示图像。
宽高和渲染宽高
WPF Image的宽高指的是在布局中显示的宽高,可以通过设置Width和Height属性来进行调整。
而渲染宽高指的是图像在实际显示时的实际像素宽高。
在WPF中,可以通过设置Stretch属性来控制图像的渲染宽高与宽高的关系。Stretch属性有以下几种取值:
- None: 图像以实际渲染宽高显示,与设置的宽高无关。
- Fill: 图像被拉伸或压缩以填充整个Image控件,忽略设置的宽高比例。
- Uniform: 图像保持宽高比例进行显示,保证图像完全显示在Image控件内,可能会有留白。
- UniformToFill: 图像保持宽高比例进行显示,保证Image控件被填充,可能会裁剪图像部分内容。
例如,如果设置了Image的宽度为100像素,高度为200像素,而Stretch属性设置为Uniform,那么图像将以保持宽高比例的方式显示,可能会有一部分被裁剪,但一定能完整显示在100x200像素的区域内。
透明度
1 | <Image Source="image.png" Width="100" Height="100" Opacity="0.5"/> |
图片剪裁
圆形
1 | <Image |
矩形
1 | <Image |
图片旋转
1 | <Image |
高斯模糊
1 | <Image> |
投影
1 | <Image Source="image.png" Width="100" Height="100"> |
加载图片
加载本地文件
1 | using System.IO; |
调用
1 | UserHeadImage.Source = ZImageUtils.GetImage(userPic); |
加载项目下图片
1 | UserHeadImage.Source = new BitmapImage(new Uri("pack://application:,,/Images/RemoteControl/guangbiao.png")); |
加载网络图片
1 | UserHeadImage.Source = new BitmapImage(new Uri("https://www.psvmc.cn/head.jpg")); |
Uri加载图片
WPF引入了统一资源标识Uri(Unified Resource Identifier)
来标识和访问资源。
其中较为常见的情况是用Uri加载图像。
Uri表达式的一般形式为:协议+授权+路径
协议:
pack://
授权:
有两种。
- 一种用于访问编译时已经知道的文件,用
application:///
- 一种用于访问编译时不知道,运行时才知道的文件,用
siteoforigin:///
一般用逗号代替斜杠,也就是改写作application:,,,
和siteoforigin:,,,
路径:
分为绝对路径和相对路径。一般选用相对路径,普适性更强
下面,我们举一个简单的例子:
1 | pack://application:,,,/images/my.jpg |
当然,WPF默认Uri设置有pack://application:,,,
,所以我们也可以直接将其写作:/images/my.jpg
后边写例子程序时,为了让读者更好的了解Uri,我们都采用完整的Uri写法。
下面在讲讲加载图片的两种方式:
- 一种用XAML引用资源。
- 一种用代码引用资源。
加载本项目的图片
用XAML引用资源:
1 | <Image Source="pack://application:,,,/images/my.jpg"/> |
也可以这样
1 | <Image Source="/images/my.jpg"/> |
用代码引用资源:
1 | image2.Source=new BitmapImage(new Uri("pack://application:,,,/images/my.jpg"),UriKind.Relative); |
也可以简写
1 | image2.Source = new BitmapImage(new Uri("/images/my.jpg", UriKind.Relative)); |
加载资源图片
1 | imagePath = "pack://application:,,,/Solution;component/Properties/../images/star/my.jpg"; |
加载外部项目图片
WPF中如果你使用的资源文件不是本程序集的,是另外的程序集,就可以这样做:
引用要用的程序集,pack://application:,,,/程序集名称;component/路径
,其中pack://application:,,,
可以省略
示例:
1 | <Image Source="pack://application:,,,/Skin;component/image/you.png" /> |
或者
1 | <Image Source="/Skin;component/image/you.png" /> |
使用siteoforigin
1 | imgContent.Source = new BitmapImage(new Uri("pack://siteoforigin:,,,/images/my.jpg")); |