WPF 图像控件

借助 WPF 的 Image 控件，我们可以在应用程序中显示图像。WPF 的 Image 控件是一个多功能控件。WPF 的 Image 控件会显示图像。为此，我们可以使用 ImageObject 或 ImageBrush 对象。ImageObject 将显示图像，而 ImageBrushObject 将使用图像绘制另一个对象。图像的源是通过引用支持不同格式的图像文件来指定的。

Image 控件支持的格式如下

1. 位图 (BMP)。
2. 标记图像文件格式 (TIFF)。
3. 图标 (ICO)。
4. 联合图像专家组 (JPEG)。
5. 图形交换格式 (GIF)。
6. 便携式网络图形 (PNG)。
7. JPEG XR。

Image 控件中使用的属性

Image 类中使用的事件

我们在 Image 类中使用的事件如下

WPF Image 控件是一个多功能控件。

我们将使用语法添加图像：Image Source 属性。

Source 属性：我们使用 Source 属性来定义要显示的图像。我们在 Image 控件中使用 Source 属性来标识要显示的图像。借助 Source 属性，我们可以轻松定义要在 Image 控件中显示的图像。

现在我们将以 WPF Image 控件为例。

现在，让我们创建一个新的 WPF 项目，项目名称为 WPFImageControl。在这里，我们将使用 Grid.RowDefinition 将屏幕分成两行。很快，我们将拖入三个 Image 控件。在下面的示例中，我们将显示三张图像。第一张，我们将显示一个简单的图像。在第二张图像中，我们将设置不透明度属性。在第三张图像中，我们将图像放入椭圆并使用 ImageBrush 进行绘制。

现在我们将编写代码来添加图像。

MainWindow.XAML

编译上述代码后，我们将获得以下输出

输出

WPF Image 控件是一个多功能控件。

我们将使用语法添加图像：Image Source 属性。

Source 属性：从上面的示例中，我们已经看到 Source 属性用于定义我们要显示的图像。我们在 Image 控件中使用 Source 属性来标识要显示的图像。借助 Source 属性，我们可以轻松定义要在 Image 控件中显示的图像。在上面的示例中，我们使用了远程图像，图像将自动获取并在尽快显示图像。此功能显示了 Image 控件多么通用，但在大多数情况下，我们希望将图像打包到应用程序中，而不是从远程源加载。

我们可以向项目中添加资源文件。资源文件可以在当前的 Visual Studio 中看到，也可以在解决方案资源管理器中看到图像的文件夹。

之后，我们将编译我们的应用程序。我们可以使用 URL 格式来访问资源，因此如果我们在 "images" 文件夹中有一个像 "google.png" 这样的图像。现在语法看起来如下

语法：<Image Source=" WpfTutorialSamples;component/Images/google.png";

我们将这些 URI 称为“Pack of URI's”。

URI： URI 包含两部分。第一部分包含程序集名称，即 "WPFTutorialSample"，应用程序名称与 component 组合。第二部分包含资源的路径，即 "/Images/google.png"。

使用此语法，我们可以轻松地引用应用程序中的资源。我们可以使用简单的 url 添加资源到应用程序，例如：<Image Source="/Images/google.png">。

动态加载图像

有时会需要动态加载图像。例如，根据我们的选择，我们希望将图像加载到应用程序中。我们可以从代码中做到这一点。

为此，我们将编写代码从我们的计算机加载图像，该图像基于我们在 OpenFileDialog 中的选择。

要通过文件显示数据，我们将编写以下代码

这里如果我们注意到我们创建了 **BitmapImage** 的实例，我在其中传递了 URI。我们将从选择的路径中选择它。我们还将使用相同的技术来加载包含应用程序作为资源的图像。

为此，我们将使用与上面相同的相对路径。

要从应用程序中的不同资源加载图像，我们将编写以下代码

MainWindow.XAML

现在我们将编写代码，在单击按钮时从不同的资源添加图像。

MainWindow.XAML.cs

上述代码在从资源加载之前的输出如下

输出

如果我们单击“从文件加载”，它将打开一个新窗口，我们在其中选择要显示在应用程序中的“图像”。单击“从文件加载”后，会打开一个新窗口，我们在其中选择文件，如下图所示

单击“确定”后，图像将如下所示

现在我们想通过资源文件显示图像，如下图所示

Stretch 属性

我们知道，Source 属性很重要，之后第二个最重要的属性是 Stretch 属性。当加载的图像与 Image 控件的尺寸不匹配时，我们将应用 stretch 属性。尺寸不匹配的问题总是会发生，因为窗口的大小由其他人控制，Image 控件的大小也会改变。

借助 Stretch 属性，我们可以控制图像的大小以及它们的外观。

我们将编写 XAML 代码来定义图像的外观，方法是使用 stretch 属性。

MainWindow.xaml

上述代码的输出如下

现在我们将解释 Stretch 属性

在这里，我们看到所有四个图像都显示相同的图像，但包含不同的 stretch 属性值。

现在我们将解释各种模式的工作原理。

• Uniform: Uniform 是默认代码。在 uniform 模式下，图像会调整到图像区域。通过 uniform 模式，图像会在图像区域内自行设置。
• UniformToFill: 在 UniformToFill 模式下，图像会缩放自身，以便图像可以占据图像的整个区域。
• Fill: Fill 模式用于根据图像控件的区域进行填充。我们无法保留纵横比，因为我们可以独立缩放图像的高度和宽度。
• None: None 模式用于图像尺寸较小的场景。如果图像尺寸小于 Image 控件，则无需执行任何操作。如果图像尺寸大于 Image 控件，则图像将被裁剪以适应 Image 控件，这意味着将显示图像的一部分。

总结

借助 WPF Image 控件，我们可以轻松地在应用程序中显示图像。图像的来源可以是远程的、嵌入的或本地计算机的。