当前位置：首页 > news >正文

WPF 使用Image控件显示图片

news 2025/8/14 22:39:07

Source属性

Source属性用来告诉Image组件要展示哪张图片资源的一个入口，通常是图片的路径。也许是本地路径，也许是网络路径。

本地图片路径加载方式

使用相对路径，相对于工程目录的路径，当设置Width属性时，图片会等比例按照宽度进行等比例缩放

<Image Source="/Imgs/1.jpg" Width="200"/>

使用pack uri加载图片。使用pack uri可以应用程序依赖的非可执行文件，例如xaml、图像、视频等。wpf支持对数据文件进行配置、识别及使用。可以轻松引用应用程序中包含的资源。

<Image Name="img1" Source="pack://application:,,,/imgs/2.jpg" Width="100" HorizontalAlignment="Left"/>

绝对Pack URI
文件路径绝对 pack URI
资源文件 — 本地程序集 “pack://application:,/ResourceFile.xaml”
子文件夹中的资源文件 — 本地程序集 “pack://application:,/Subfolder/ResourceFile.xaml”
资源文件 — 所引用的程序集 “pack://application:,/ReferencedAssembly;component/ResourceFile.xaml”
所引用的程序集的子文件夹中的资源文件 “pack://application:,/ReferencedAssembly;component/Subfolder/ResourceFile.xaml”
所引用的版本化程序集中的资源文件 “pack://application:,/ReferencedAssembly;v1.0.0.0;component/ResourceFile.xaml”
内容文件
“pack://application:,/ContentFile.xaml”

子文件夹中的内容文件 “pack://application:,/Subfolder/ContentFile.xaml”
源站点文件 “pack://siteoforigin:,/SOOFile.xaml”
子文件夹中的源站点文件 “pack://siteoforigin:,/Subfolder/SOOFile.xaml”
相对 Pack URI
文件相对 pack URI
本地程序集中的资源文件 “/ResourceFile.xaml”
本地程序集的子文件夹中的资源文件 “/Subfolder/ResourceFile.xaml”
所引用的程序集中的资源文件 “/ReferencedAssembly;component/ResourceFile.xaml”
所引用的程序集的子文件夹中的资源文件 “/ReferencedAssembly;component/Subfolder/ResourceFile.xaml”
内容文件 “/ContentFile.xaml”
子文件夹中的内容文件 “/Subfolder/ContentFile.xaml”
后台加载Pack URI的方式如下：

Uri resourceUri = new Uri("/Imgs/1.jpg", UriKind.Relative);
this.Pic1.Source = new BitmapImage(resourceUri); 
Uri resourceUri1 = new Uri("pack://application:,,,/imgs/2.jpg", UriKind.Absolute);
this.Pic2.Source = new BitmapImage(resourceUri1);

<Window x:Class="WPF002_Image.MainWindow"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:WPF002_Image"mc:Ignorable="d"Title="MainWindow" Height="600" Width="1000"><StackPanel><!--Source属性的值为相对工程根目录的文件夹--><!--<Image Source="/Imgs/1.jpg"/>--><!--当设置图片的宽度但未设置图片的高度的时候，图片的高为以原图片的宽高比进行等比计算--><Image Source="/Imgs/1.jpg" Width="200"/><Image Name="img1" Source="pack://application:,,,/imgs/2.jpg" Width="100" HorizontalAlignment="Left"/><Image Source="https://inews.gtimg.com/newsapp_bt/0/12171811596_909/0" Width="100"/><WrapPanel><Image x:Name="Pic1" Width="200"/><Image x:Name="Pic2" Width="200" /></WrapPanel><Label Content="Strtch属性" FontSize="30" HorizontalAlignment="Center"/><Image /><WrapPanel><!--None: 如果图片小于图片控件，则不执行任何操作。如果它比图片控件大，则会裁剪图片以适合图片控件，这意味着只有部分图片可见。--><Image Source="/Imgs/1.jpg" Width="200" Stretch="None"/><!--Fill: 图片将缩放以适合图片控件的区域。可能无法保留宽高比，因为图片的高度和宽度是独立缩放的。--><Image Source="/Imgs/1.jpg" Width="200" Stretch="Fill"/><!--Uniform: 这是默认模式。图片将自动缩放，以便它适合图片区域。将保留图片的宽高比。--><Image Source="/Imgs/1.jpg" Width="200" Stretch="Uniform"/><!--UniformToFill: 图片将被缩放，以便完全填充图片区域。将保留图片的宽高比。--><Image Source="/Imgs/1.jpg" Width="200" Stretch="UniformToFill"/></WrapPanel></StackPanel>
</Window>

后台代码给Source属性赋值

ImageViewer1.Source = new BitmapImage(new Uri(@"Images\\VS2015.jpg", UriKind.Relative));

动态加载图片

private void btnDynamic_Click(object sender, RoutedEventArgs e)
{// Create Image and set its width and height Image dynamicImage = new Image();dynamicImage.Width = 300;dynamicImage.Height = 200;// Create a BitmapSource BitmapImage bitmap = new BitmapImage();bitmap.BeginInit();bitmap.UriSource = new Uri(@"C:\\Users\\WPF加载图片文件\\WpfApp1\\Images\\VS2015.png");bitmap.EndInit();// Set Image.Source dynamicImage.Source = bitmap;// Add Image to Window sp1.Children.Add(dynamicImage);
}

自动生成随机图片
面的案例用于生成一个随机图像。

private void btnLoad_Click(object sender, RoutedEventArgs e)
{PixelFormat pf = PixelFormats.Bgr32;int width = 400;int height = 200;int rawStride = (width * pf.BitsPerPixel + 7) / 8;byte[] rawImage = new byte[rawStride * height];Random value = new Random();value.NextBytes(rawImage);var bmp = BitmapSource.Create(width, height,      //宽高96, 96, pf, null,   //DPIrawImage,           //生成图像的数组 rawStride);         //行偏移量img.Source = bmp;
}