WPF篇(12)-Image图像控件+GroupBox标题容器控件

Image图像控件

Image也算是独门独户的控件,因为它是直接继承于FrameworkElement基类。

Image控件就是图像显示控件。Image类能够加载显示的图片格式有.bmp、.gif、.ico、.jpg、.png、.wdp 和 .tiff。要注意的是,加载.gif动画图片时,仅显示第一帧。如果要显示gif图片,可以在nuget服务器中下载WpfAnimatedGif组件。

属性成员

  • StretchDirection:枚举型,表示图像缩放的条件,UpOnly表示内容仅在小于父级时缩放;DownOnly表示内容仅大于父级时缩放;Both表示兼容前面两种缩放条件。
  • Stretch:枚举型,表示图像缩放的模式,None表示内容保持其原始大小;Fill表示调整内容大小以填充目标尺寸,且不保留纵横比;Uniform表示在保留纵横比基础上缩放;UniformToFill表示在保留纵横比基础上缩放,同时具有裁剪功能。
  • Source:图像源,其类型为ImageSource。
  • BaseUri:获取或设置基 统一资源标识符 (URI) 为 System.Windows.Controls.Image。

事件成员

  • DpiChanged:显示图像的屏幕的 DPI 发生更改后触发。
  • ImageFailed:在图像中失败时触发。

Image控件分析

Image控件最关键的就是Source属性------即ImageSource类型。ImageSource是一个抽象类,表示具有高度、宽度及ImageMetadata对象的图像数据源。

ImageSource有多个子类,如BitmapFrame、BitmapSource和DrawingImage。所以,我们如果要显示一张图片,需要将图片转化成BitmapSource或DrawingImage实例,赋值给Image控件的Source属性就行了。

常规图片加载

xml 复制代码
        <!-- <Image Source="/Images/R-C.jpg" Width="120" Height="120"/> -->
        <Image Source="pack://application:,,,/Images/R-C.jpg" Width="120" Height="120"/>

统一资源标识Uri

WPF引入了统一资源标识Uri来标识和访问资源。其中较为常见的情况是用Uri加载图像。Uri表达式的一般形式为:协议+授权+路径,协议:pack://,授权:有两种。

  • 一种用于访问编译时已经知道的文件,用application:///
  • 一种用于访问编译时不知道、运行时才知道的文件,用siteoforigin:///

一般用逗号代替斜杠,也就是改写作application:,pack:,

路径:分为绝对路径和相对路径。一般选用相对路径,普适性更强。

注意:

明明Source是ImageSource类型,为什么可以接受一个代表图片路径的字符串呢?因为ImageSource类中有一个ToString()重载成员。

本地图片加载

我们把这个张图片放到Debug目录中,试试用另一种方式加载本地图片。

此时,这张图片并没有导入到项目中,我们来看一下如何加载本地图片。

前端代码

xml 复制代码
         <WrapPanel>
             <Image Source="/Images/R-C.jpg" Width="120" Height="120"/>
             <Image x:Name="image2" Width="120" Height="120"/>
         </WrapPanel>

后端代码

csharp 复制代码
    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();
            var path = Environment.CurrentDirectory + "\\" + "R-C.jpg";
            var imageSource = BitmapFrame.Create(new Uri(path), BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
            image2.Source = imageSource;
        }
    }

在主窗体的构造函数中,我们获取了图片的完整地址,然后利用BitmapFrame类Create方法成员将本地图片加载进来并返回一个BitmapFrame对象,BitmapFrame对象继承于BitmapSource,所以我们可以将这个实例通过C#代码的方式赋值给image2的Source属性。

GroupBox标题容器控件

GroupBox控件的功能是提供一个带标题的内容容器,它继承于HeaderedContentControl类,HeaderedContentControl继承于ContentControl类。通常它用来做一些局部的布局。

xml 复制代码
<GroupBox Header="缩略图" Margin="5">
             <WrapPanel>
                 <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                     <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
                 </Border>
                 <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                     <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
                 </Border>
                 <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                     <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
                 </Border>
                 <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                     <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
                 </Border>
                 <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                     <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
                 </Border>
                 <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                     <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
                 </Border>
                 <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                     <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
                 </Border>
             </WrapPanel>
         </GroupBox>

因为GroupBox的Content属性只能显示一个内容对象如果要显示多个对象,那把给Content一个集合控件,比如上面的WrapPanel控件,这样就可以在WrapPanel控件中放多个子元素了。

在使用上,有一个集合控件与GroupBox类似,因为GroupBox只能显示一个区域,如果区域过大,在有限的窗体无法全部显示出来,该怎么办呢?ScrollViewer可以做到这一点。后续会给大家说。

相关推荐
好好研究2 小时前
学习栈和队列的插入和删除操作
数据结构·学习
新中地GIS开发老师3 小时前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
SH11HF4 小时前
小菜狗的云计算之旅,学习了解rsync+sersync实现数据实时同步(详细操作步骤)
学习·云计算
Frank学习路上4 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
Chef_Chen5 小时前
从0开始学习计算机视觉--Day07--神经网络
神经网络·学习·计算机视觉
X_StarX7 小时前
【Unity笔记02】订阅事件-自动开门
笔记·学习·unity·游戏引擎·游戏开发·大学生
MingYue_SSS7 小时前
开关电源抄板学习
经验分享·笔记·嵌入式硬件·学习
weixin_437398218 小时前
转Go学习笔记(2)进阶
服务器·笔记·后端·学习·架构·golang
慕y2748 小时前
Java学习第十六部分——JUnit框架
java·开发语言·学习
peace..9 小时前
温湿度变送器与电脑进行485通讯连接并显示在触摸屏中(mcgs)
经验分享·学习·其他