【愚公系列】2023年10月 WPF控件专题 Image控件详解

举报
愚公搬代码 发表于 2023/09/30 23:36:27 2023/09/30
【摘要】 WPF控件是Windows Presentation Foundation(WPF)中的基本用户界面元素。它们是可视化对象,可以用来创建各种用户界面。WPF控件可以分为两类:原生控件和自定义控件。

🏆 作者简介,愚公搬代码
🏆《头衔》:华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,阿里云专家博主,腾讯云优秀博主,掘金优秀博主,51CTO博客专家等。
🏆《近期荣誉》:2022年CSDN博客之星TOP2,2022年华为云十佳博主等。
🏆《博客内容》:.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀前言

WPF控件是Windows Presentation Foundation(WPF)中的基本用户界面元素。它们是可视化对象,可以用来创建各种用户界面。WPF控件可以分为两类:原生控件和自定义控件。

原生控件是由Microsoft提供的内置控件,如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。

自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项,以及更好的用户体验。

🚀一、Image控件详解

在WPF中,Image控件用于显示图像。可以通过以下代码添加Image控件:

<Image Source="image.png" Width="200" Height="200"/>

其中,Source属性指定了要显示的图像的路径,Width和Height属性可以指定控件的宽度和高度。

可以在代码中通过设置Image控件的Source属性来更改显示的图像,例如:

Image myImage = new Image();
myImage.Source = new BitmapImage(new Uri("image.png"));

此代码将创建一个新的Image控件,并将其显示为指定路径下的图像。BitmapImage类用于加载图像,并将其设置为Image控件的源。

🔎1.属性介绍

WPF中Image控件的常用属性如下:

  1. Source:设置或获取图像的源。可以是Uri、BitmapImage、BitmapFrame或其他派生自ImageSource的类型。
  2. Stretch:设置或获取在Image控件中如何拉伸图像以适合控件大小。可选值包括None、Fill、Uniform和UniformToFill。
  3. StretchDirection:设置或获取Stretch属性的方向。默认值为Both。可选值为UpOnly和DownOnly。
  4. Width:设置或获取Image控件的宽度大小。
  5. Height:设置或获取Image控件的高度大小。
  6. StretchUnit:设置或获取Stretch属性用于计算的单位。默认值为Pixel。
  7. DecodePixelWidth和DecodePixelHeight:设置或获取解码图像时的宽度和高度。这可用于控制图像的大小,从而节省内存。
  8. IsAsync:设置或获取是否异步加载图像。默认值为False。

除了上述属性,Image控件还具有其他一些属性,如Opacity、OpacityMask、HorizontalAlignment和VerticalAlignment等,可以帮助您更好地控制和定位图像。

🔎2.常用场景

WPF中的Image控件常用于以下场景:

  1. 显示静态图片。Image控件可以加载各种静态图片格式,包括PNG、JPG、BMP、GIF等等。

  2. 显示动态图片。WPF中使用Image控件可以轻松地显示GIF等动态图片格式。

  3. 源图像自适应。Image控件具备自适应大小的能力,可以根据容器大小自动调整图像的大小,从而更好地适应不同的窗口布局。

  4. 显示图形资源。除了加载外部图片文件,Image控件也可以直接加载XAML文件中的图形资源,这些资源可以是由Path、Ellipse、Rectangle或其他形状定义的图形对象,也可以是由Drawing对象定义的复杂图形。

  5. 显示视频帧。Image控件也可以用于显示实时视频流中的帧图像,这对于实现视频预览等功能非常有用。

Image控件在WPF中是非常常用的控件之一,它不仅可以用来展示静态图片和动态图片,还可以用来显示各种图形资源,非常灵活。

🔎3.具体案例

<Grid>
    <!--Stretch 默认 uniform StretchDirection 默认 Both-->
    <Image Name="imgPic" HorizontalAlignment="Left" Height="238" Margin="128,67,0,0" Stretch="Fill"  VerticalAlignment="Top" Width="357"  />
    <Button Content="指定图像" HorizontalAlignment="Left" Margin="427,352,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>

</Grid>
private void Button_Click(object sender, RoutedEventArgs e)
{
    //相对路径
    //imgPic.Source = new BitmapImage(new Uri("imgs/1111.jpg",UriKind.Relative));//Source ---  ImageSource
    //WPF 支持两种授权:application:/// 和 siteoforigin:///。
    // pack URI 方案 pack://授权/路径
    //授权 指定包含部件的程序包的类型,而路径 则指定部件在程序包中的位置。
    //siteoforigin  图片文件  生成:内容     application---资源、内容
    //imgPic.Source = new BitmapImage(new Uri("pack://application:,,,/imgs/1111.jpg", UriKind.Absolute));
    imgPic.Source = new BitmapImage(new Uri(AppDomain.CurrentDomain.BaseDirectory+"/imgs/1111.jpg", UriKind.Absolute));
   
}

🚀感谢:给读者的一封信

亲爱的读者,

我在这篇文章中投入了大量的心血和时间,希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验,我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助,我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担,但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章,是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命,也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作,请扫描下面二维码,您的支持将不胜感激。同时,如果您有任何反馈或建议,也欢迎与我分享。

在这里插入图片描述

再次感谢您的阅读和支持!

最诚挚的问候, “愚公搬代码”

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。