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可以做到这一点。后续会给大家说。