WPF 使用Image控件显示图片

Source属性

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

本地图片路径加载方式

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

csharp 复制代码
<Image Source="/Imgs/1.jpg" Width="200"/>

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

csharp 复制代码
<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的方式如下:

csharp 复制代码
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);
csharp 复制代码
<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属性赋值

csharp 复制代码
ImageViewer1.Source = new BitmapImage(new Uri(@"Images\\VS2015.jpg", UriKind.Relative));

动态加载图片

csharp 复制代码
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);
} 

自动生成随机图片

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

csharp 复制代码
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,   //DPI
        rawImage,           //生成图像的数组 
        rawStride);         //行偏移量

    img.Source = bmp;
}

其中,

BitmapSource.Create

用于创建一个图像,其输入参数如下

width 图像宽

height 图像高

96, 96, pf, null, DPI相关设置

rawImage 生成图像的数组

rawStride 行偏移量

相关推荐
Alive~o.01 分钟前
Go语言进阶&依赖管理
开发语言·后端·golang
花海少爷3 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
手握风云-4 分钟前
数据结构(Java版)第二期:包装类和泛型
java·开发语言·数据结构
喵叔哟24 分钟前
重构代码中引入外部方法和引入本地扩展的区别
java·开发语言·重构
尘浮生30 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
hopetomorrow43 分钟前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
网络安全-杰克1 小时前
网络安全概论
网络·web安全·php
不是二师兄的八戒1 小时前
本地 PHP 和 Java 开发环境 Docker 化与配置开机自启
java·docker·php
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript