WPF 使用Image控件显示图片

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;
}

其中,

BitmapSource.Create

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

width 图像宽
height 图像高
96, 96, pf, null, DPI相关设置
rawImage 生成图像的数组
rawStride 行偏移量

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/28477.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux:基础IO(二.缓冲区、模拟一下缓冲区、详细讲解文件系统)

上次介绍了&#xff1a;Linux&#xff1a;基础IO&#xff08;一.C语言文件接口与系统调用、默认打开的文件流、详解文件描述符与dup2系统调用&#xff09; 文章目录 1.缓冲区1.1概念1.2作用与意义 2.语言级别的缓冲区2.1刷新策略2.2具体在哪里2.3支持格式化 3.自己来模拟一下缓…

FFMpeg解复用流程

文章目录 解复用流程图复用器与解复用器小结 解复用流程图 流程图&#xff0c;如上图所示。 复用器与解复用器 复用器&#xff0c;就是视频流&#xff0c;音频流&#xff0c;字幕流&#xff0c;其他成分&#xff0c;按照一定规则组合成视频文件&#xff0c;视频文件可以是mp4…

Linux各目录的作用

Linux各目录的作用 目录作用~登录用户对应的目录.当前工作目录$PATH环境变量/根目录/boot启动Linux使用的文件&#xff0c;例如Linux内核&#xff0c;包括连接文件和镜像文件&#xff0c;&#xff08;删了就启动不了了&#xff09;/bin(/usr/bin,/usr/local/bin)Binary&#x…

如何在vector中插入和删除元素?

在C的std::vector中插入和删除元素通常使用其成员函数来完成。以下是如何在std::vector中插入和删除元素的示例&#xff1a; 插入元素 在末尾插入元素&#xff1a;使用push_back函数。 cpp复制代码 #include <vector> int main() { std::vector<int> v; v.push_…

实现贪吃蛇小游戏【简单版】

1. 贪吃蛇游戏设计与分析 1.1 地图 我们最终的贪吃蛇大纲要是这个样子&#xff0c;那我们的地图如何布置呢&#xff1f; 这里不得不讲⼀下控制台窗口的⼀些知识&#xff0c;如果想在控制台的窗口中指定位置输出信息&#xff0c;我们得知道该位置的坐标&#xff0c;所以首先介…

CPN Tools学习——从平面网构建分层 PN

1.先创建平面petri网 创建如下petri网&#xff1a; CPN ide创建petri网真的舒服很多&#xff0c;但是教程又是CPN Tools的&#xff0c;我的想法是看两个版本能不能互通&#xff0c;在前者创建&#xff0c;在后者运行学习。 新增定义&#xff1a; colset E unit with e; 但…

nginx全解

一、Nginx配置文件 1.1 主配置文件 主配置文件位置&#xff1a;nginx.conf tip&#xff1a;安装方式不同&#xff0c;路径不同 #主配置文件格式 ​ main block&#xff1a;主配置段&#xff0c;即全局配置段&#xff0c;对http,mail都有效 ​ #配置Nginx服务器的事件模块相…

深度学习 --- stanford cs231学习笔记三(卷积神经网络CNN)

卷积神经网络CNN 1&#xff0c;有效的利用了图像的空间信息/局部感受野 全连接神经网络中的神经是由铺平后的所有像素计算决定。 由于计算时是把图像的所有像素拉成了一条线&#xff0c;因此在拉伸的同时也损失了图像像素之间固有的空间信息。 卷积层中的神经只由5x5x3(假设fil…

57.Linux/Unix 系统编程手册(下) -- SOCKET : Unix domain

https://blog.51cto.com/u_15567199/5204540 【linux网络编程】容错处理文件 wrap.h、wrap.c_wx623c6c9. // 容错处理 wrap.h #ifndef _WRAP_H_ #define _WRAP_H_#include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <error.h> #i…

LViT: 语言与视觉Transformer在医学图像分割中的应用| 文献速递-深度学习结合医疗影像疾病诊断与病灶分割

Title 题目 LViT: Language Meets Vision Transformer in Medical Image Segmentatio LViT: 语言与视觉Transformer在医学图像分割中的应用 01 文献速递介绍 医学图像分割是医学图像分析中最关键的任务之一。在临床实践中&#xff0c;准确的分割可以帮助医生诊断疾病&…

js继承,原型链继承,构造函数继承,组合式继承,原型式继承,寄生式继承,组合寄生式继承,extends继承

继承的理解&#xff0c;复用父类的属性和方法并增加新的属性和方法 目录 1. 原型链继承&#xff1a; 2. 构造函数继承 3. 组合式继承 4. 原型式继承 5. 寄生式继承 6. 组合寄生式继承 7. extends继承 1. 原型链继承&#xff1a; 父类构造函数的实例赋值给子类原型 func…

谷粒商城实战(033 业务-秒杀功能4-高并发问题解决方案sentinel 2)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第332p-第p335的内容 熔断降级 开启对Feign远程服务的熔断保护机制 feign.sentinel.enabletrue 这里我们只是调用方加就行 被调用方不用加 正常…

C调用C++中的类

文章目录 测试代码 测试代码 在C语言中调用C类&#xff0c;需要遵循几个步骤&#xff1a; 在C代码中&#xff0c;确保C类的函数是extern “C”&#xff0c;这样可以防止名称修饰&#xff08;name mangling&#xff09;。 使用头文件声明C类的公共接口&#xff0c;并且为这个…

JS如何判断一个对象是否为数组?

在JavaScript中&#xff0c;有多种方法可以判断一个对象是否为数组。以下是一些常用的方法&#xff1a; 使用Array.isArray()方法&#xff1a; 这是ECMAScript 5.1引入的一个方法&#xff0c;专门用于判断一个对象是否为数组。 let obj [1, 2, 3]; console.log(Array.isA…

NetSuite Saved Search 之 Filter By Summary

在某些业务场景中&#xff0c;用户需要一个TOP X的报表。例如&#xff0c;过去一段时间内&#xff0c;最多数量的事务处理类型。这就需要利用Saved Search中的Filter By Summary功能。 这在Criteria下的Summary页签里可以定义。其作用是对Result中Summary类型的结果进行过滤。也…

华为od-C卷200分题目 - 1分月饼

华为od-C卷200分题目 - 1分月饼 题目描述 中秋节&#xff0c;公司分月饼&#xff0c;m个员工&#xff0c;买了n个月饼&#xff0c;m<n&#xff0c;每个员工至少分1个月饼&#xff0c;但可以分多个&#xff0c; 单人分到最多月饼的个数是Max1&#xff0c;单人分到第二多月饼…

Flutter 实现StackAllocator简化FFI局部变量的内存管理

文章目录 前言一、为何简化&#xff1f;1、通常做法2、简化 二、完整代码三、使用示例1、局部内存管理2、支持嵌套 总结 前言 使用Flutter通过FFI调用c库的时候&#xff0c;经常需要传字符串或者一些指针变量&#xff0c;这里变量通常都是局部变量&#xff0c;在一个代码块运行…

Spock mock私有方法

mock私有方法 ‍ 被测试的方法是MiddleGroundAppListBO​类下的getPromptIdKeyAppPromptInfoMap方法 private Map<Long, AppPromptInfoModel> getPromptIdKeyAppPromptInfoMap(String cubeAppIdentity) {List<AppPromptInfoDO> promptByApp knowledgeCubeQueryR…

轻松实现服务器事件主动推送到web端!Spring SseEmitter 详解

SseEmitter 是 Spring Framework 中用于服务器发送事件&#xff08;Server-Sent Events, SSE&#xff09;的类。SSE 是一种允许服务器推送更新到客户端的技术&#xff0c;通常用于实时更新的场景&#xff0c;如股票价格、实时消息、游戏状态等&#xff0c;又或者想要实现像Chat…

Vue52-scoped样式

一、scoped样式的作用 1-1、scoped样式的作用 vue中组件的样式都是汇总到一起的。容易出现一个问题&#xff1a;类名冲突。 示例&#xff1a; school和student组件的类名都叫demo&#xff0c;则student的样式将覆盖school的样式&#xff0c;因为App.vue中&#xff0c;先引入的…