Image 类

定义

public ref class Image sealed : FrameworkElement

/// [Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class Image final : FrameworkElement

[Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public sealed class Image : FrameworkElement

Public NotInheritable Class Image
Inherits FrameworkElement

<Image .../>

继承

Object Platform::Object IInspectable DependencyObject UIElement FrameworkElement Image

属性

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

示例

WinUI 3 示例集应用程序包括大多数 WinUI 3 控件、特性和功能的交互式示例。 从 Microsoft 应用商店 获取应用，或在 GitHub 上获取源代码。

注解

图像文件格式

图像可以显示以下图像文件格式：

• 联合摄影专家组（JPEG）
• 可移植网络图形 （PNG）
• 位图 (BMP)
• 图形交换格式 （GIF）
• 标记的图像文件格式 （TIFF）
• JPEG XR
• 图标 （ICO）
• 可缩放的向量图形 (SVG)

Image 元素支持动画图形交换格式（GIF）图像。 使用 BitmapImage 作为图像 源时，可以访问 BitmapImage API 来控制动画图形交换格式（GIF）图像的播放。 有关详细信息，请参阅 BitmapImage 类页上的“备注”。

Image 元素通过 SvgImageSource 支持静态可缩放矢量图形（SVG）图像。 SvgImageSource 支持 SVG 规范中的安全静态模式，不支持动画或交互。 Direct2D 提供基础 SVG 呈现支持，有关特定 SVG 元素和属性支持的详细信息，请参阅 SVG 支持。 若要详细了解如何在应用中插入 SVG，请访问 SvgImageSource 类页。

设置 Image.Source

若要设置图像显示的图像源文件，可以在 XAML 或代码中设置其 Source 属性。 下面是在 XAML 中设置 源 的简单示例：

<Image Width="200" Source="Images/myimage.png"/>

此用法通过统一资源标识符（URI）设置 源 ，这是 XAML 启用的快捷方式。 请注意，此处的统一资源标识符（URI）似乎是相对统一资源标识符（URI）：支持部分统一资源标识符（URI）是另一个 XAML 快捷方式。 此统一资源标识符（URI）的根目录是应用项目的基文件夹。 这通常是从中加载包含图像标记的 XAML 文件所在的位置。 在此示例中，图像源文件位于应用的文件结构内的 Images 子文件夹中。

设置 Source 属性本质上是一个异步操作。 因为它是一个属性，所以没有可等待的语法，但在大多数情况下，你不需要与图像加载的异步方面进行交互。 框架将等待图像源返回，并在图像源文件可用并解码时启动布局周期。

将源设置为无法解析为有效图像源文件的统一资源标识符（URI）值不会引发异常。 而是触发 ImageFailed 事件。 可以编写 ImageFailed 处理程序并将其附加到 Image 对象，并可能在事件数据中使用 ErrorMessage 来确定失败的性质。 解码错误也可以触发 ImageFailed。 如果要验证图像源文件是否已正确加载，则可以处理 Image 元素上的 ImageOpened 事件。

通常使用作为应用下载包一部分包含的图像源文件。 对于大型文件，如果在首次使用源时对图像源文件进行解码，则可能存在非常小的延迟。 有关应用资源以及如何在应用包中打包图像源文件的详细信息，请参阅 定义应用资源。

还可以使用不属于应用的图像源文件，例如来自外部服务器的图像。 这些映像由内部 HTTP 请求下载，然后解码。 如果图像源文件是一个大文件，或者存在连接问题，则可能会在图像元素中显示外部图像之前出现延迟。

使用代码设置 Image.Source

如果使用代码创建 Image 对象，请调用默认构造函数，然后设置 Image.Source 属性。 设置 Image.Source 属性需要 BitmapImage 类的实例，还必须构造该实例。 如果图像源是统一资源标识符（URI）引用的文件，请使用采用统一资源标识符（URI）参数的 BitmapImage 构造函数。 引用本地内容时，必须在用作 BitmapImage 构造函数参数的绝对统一资源标识符（URI）中包含 ms-appx：方案。 在代码中，无法获取用于合并相对统一资源标识符（URI）部分和 ms-appx 的 处理快捷方式：如果将 Source 指定为 XAML 属性，则会自动实现的方案。 相反，必须使用适当的方案显式构造绝对统一资源标识符（URI）。 通常使用 ms-appx： 方案作为应用的一部分打包的图像文件。

下面是在 C# 中设置 Image.Source 的示例。 在此示例中，Image 对象是在 XAML 中创建的，但没有源或任何其他属性值;而是在从 XAML 加载图像时在运行时提供这些值。

void Image_Loaded(object sender, RoutedEventArgs e)
{
    Image img = sender as Image; 
    BitmapImage bitmapImage = new BitmapImage();
    img.Width = bitmapImage.DecodePixelWidth = 80; //natural px width of image source
    // don't need to set Height, system maintains aspect ratio, and calculates the other
    // dimension, so long as one dimension measurement is provided
    bitmapImage.UriSource = new Uri(img.BaseUri,"Assets/StoreLogo.png");
    img.Source = bitmapImage;
}

对图像源使用流源

如果图像源是流，则必须编写用于设置图像实例以使用该流的代码。 这不能单独在 XAML 中完成。 构造要使用的映像，或引用现有映像实例（该实例可能已在 XAML 标记中定义，但没有源）。 然后使用 BitmapImage 的 async SetSourceAsync 方法定义流中的图像信息，传递要用作 streamSource 参数的流。 对图像源使用流相当常见。 例如，如果应用允许用户使用 FileOpenPicker 控件选择图像文件，则你获取的对象表示用户选择的文件可以作为流打开，但不提供对文件的统一资源标识符（URI）引用。

在此示例中，代码已可等待，因为它正在等待用户选择文件，并且仅在发生该文件后运行。 要使用的流来自 StorageFile.OpenAsync 后，从异步选取器操作返回 StorageFile 实例。

FileOpenPicker open = new FileOpenPicker(); 
// Open a stream for the selected file 
StorageFile file = await open.PickSingleFileAsync(); 
// Ensure a file was selected 
if (file != null) 
{ 
    using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read)) 
    { 
        // Set the image source to the selected bitmap 
         BitmapImage bitmapImage = new BitmapImage(); 
         bitmapImage.DecodePixelWidth = 600; //match the target Image.Width, not shown
         await bitmapImage.SetSourceAsync(fileStream); 
         Scenario2Image.Source = bitmapImage; 
    } 
}

有关更多示例代码 ，请参阅 XAML 图像示例 。

图像文件和性能

大型图像文件可能会影响性能，因为它们会加载到内存中。 如果你引用了一个图像文件，其中你知道源文件是大型高分辨率图像，但你的应用在 UI 区域中显示它，其大小小于图像的自然大小，则应设置 DecodePixelWidth 属性或 DecodePixelHeight。 通过 DecodePixel* 属性，可以将信息直接传递给特定于格式的编解码器，编解码器可以使用此信息更高效地解码，以及更小的内存占用情况。 将 DecodePixelWidth 设置为希望应用实际显示的区域的相同像素宽度。 换句话说，BitmapImage 源的 DecodePixelWidth 应与显示该源的图像控件的 Width 或 ActualWidth 相同。

可以设置 DecodePixelWidth，也可以设置 DecodePixelHeight。 如果设置这两个属性之一，系统将计算匹配属性以保持正确的纵横比。 还可以设置这两个属性，但通常应使用保持该纵横比的值。 如果要更改纵横比，有更好的方法可以执行此操作，例如使用 TranslateTransform 作为 RenderTransform。

若要在 XAML 中设置 DecodePixelWidth （或 DecodePixelHeight），必须使用稍微更详细的 XAML 语法，该语法将显式 BitmapImage 元素作为属性元素值，如下所示：

<Image>
  <Image.Source>
    <BitmapImage DecodePixelWidth="200" UriSource="images/myimage.png"/>
  </Image.Source>
</Image>

DecodePixelWidth （或 DecodePixelHeight）是 BitmapImage 的属性，因此需要显式 BitmapImage XAML 对象元素才能将 DecodePixel* 属性设置为 XAML 中的属性。

如果要在代码中创建图像实例，则可能已经将 BitmapImage 实例创建为源属性提供的值，因此只需在设置 UriSource 属性之前在 BitmapImage 实例上设置 DecodePixelWidth（或 DecodePixelHeight）。 DecodePixelType 属性还影响解码操作解释像素值的方式。

若要防止图像多次解码，请从统一资源标识符（URI）分配图像源属性，而不是随时使用内存流。 XAML 框架可以将多个位置的同一统一资源标识符（URI）与一个解码的图像相关联，但即使它们包含相同的数据，它也不能对多个内存流执行相同的操作。

可以通过将所有关联的 Image.Source 值设置为 null，从映像缓存中删除图像文件。

有关 Image 类和性能的详细信息，请参阅 优化动画和媒体。

图像文件编码和解码

映像文件的基础编解码器支持由Windows映像组件 （WIC） API 提供。 有关编解码器记录的特定图像格式的详细信息，请参阅 本机 WIC 编解码器。

Image、 BitmapImage 和 BitmapSource 的 API 不包含用于对媒体格式进行编码和解码的任何专用方法。 所有解码操作都内置为在设置或重置源时发生的操作。 这使得类更易于用于构造 UI，因为它们具有一组默认支持的源文件格式和解码行为。 BitmapImage 等类公开一些解码选项和逻辑，作为 ImageOpened 或 ImageFailed 事件的事件数据的一部分。 如果需要高级图像文件解码或图像编码，则应使用 Windows 中的 API。Graphics.Imaging 命名空间。 如果你的应用方案涉及图像文件格式转换，或者操作图像，用户可以将结果另存为文件，则可能需要这些 API。 Windows的Windows映像组件（WIC）组件也支持编码 API。

图像 宽度和高度

Image 类从 FrameworkElement 继承 Width 和 Height 属性，这些属性可能会控制图像控件在 UI 中显示时呈现的大小。 如果未设置 宽度 或 高度，则宽度和高度由图像源的自然大小决定。 例如，如果加载高度为 300 像素且宽为 400 像素的位图图像（如其源文件格式记录），则图像控件计算其自然大小时，这些度量用于宽度和高度。 可以在图像呈现后在运行时检查 ActualHeight 和 ActualWidth 以获取度量信息。 或者，可以在图像呈现之前立即处理 ImageOpened 并检查图像文件属性，例如 PixelHeight 和 PixelWidth 。

如果仅设置一个 Width 或 Height 属性，但不能同时设置这两个属性，则系统可以使用该维度作为指导并计算另一个维度，从而保留纵横比。 如果不确定源文件维度，请选择在布局方案中控制最重要的维度，让系统计算其他维度，然后容器的布局行为通常会调整布局以适应。

如果未设置 Width 和/或 Height，并将图像保留为其自然大小，则图像的 Stretch 属性可以控制图像源文件将填充指定为 Width 和 Height 的空间的方式。 默认 的 Stretch 值为 Uniform，它将图像适合布局容器时保留纵横比。 如果容器的维度没有相同的纵横比，则会有空白空间，该空间仍然是图像的一部分，但不会显示任何图像像素，至少在使用 统 一值 拉伸时。 UniformToFill for Stretch 不会留空空间，但如果尺寸不同，可能会剪辑图像。 Stretch 的填充不会留空空间，但可能会更改纵横比。 可以试验这些值，查看布局方案中最适合图像显示的内容。 此外，请注意，某些布局容器可能会调整没有特定 宽度 和 高度 的图像的大小，以填充整个布局空间，在这种情况下，可以选择在图像或容器上设置特定大小。

NineGrid

如果图像具有不应统一缩放的区域，则使用 NineGrid 技术是调整其大小与显示区域不同的图像的另一个选项。 例如，可以使用一个背景图像，该背景图像的固有边框只应在一个维度中拉伸，而角根本不应该拉伸，但图像中心可以拉伸以适应这两个维度中的布局要求。 有关详细信息，请参阅 NineGrid。

图像的资源限定和本地化

图像 源文件和缩放

你应该以多个建议的大小创建图像源，以确保你的应用在 Windows 缩放时看起来很棒。 为图像指定 源 时，可以为将正确资源用于设备特定缩放因子的资源使用命名约定。 这是由应用在运行时自动确定的。 有关要使用的命名约定的详细信息，请参阅 快速入门：使用文件或映像资源。

有关如何正确设计图像进行缩放的详细信息，请参阅 布局和缩放的 UX 指南。

使用未限定的资源

非限定资源是一种技术，你可以在其中使用基本资源引用默认资源，资源管理过程可以自动查找等效的本地化资源。 可以使用自动处理来访问具有当前规模和区域性限定符的不合格资源，或者可以将 ResourceManager 和 ResourceMap 与区域性和规模限定符配合使用，以便直接获取资源。 有关详细信息，请参阅 资源管理系统。

Image 的 FlowDirection

如果将 FlowDirection 设置为 Image 的 RightToLeft ，则图像的视觉内容水平翻转。 但是，Image 元素不会从任何父元素继承 FlowDirection 值。 通常，你只需要图像翻转行为，这些图像与布局相关，但不一定是嵌入文本或其他组件对右向左受众没有意义翻转的元素。 若要获取图像翻转行为，必须在专门将 Image 元素上的 FlowDirection 元素设置为 RightToLeft，或在代码隐藏中设置 FlowDirection 属性。 请考虑通过 x：Uid 指令标识 Image 元素，并将 FlowDirection 值指定为Windows Runtime资源，以便本地化专家以后无需更改 XAML 或代码即可更改此值。

Image 类和辅助功能

Image 类不是真正的控件类，因为它不是 Control 的后代类。 不能将焦点调用到 Image 元素，也不能将 Image 元素置于选项卡序列中。 有关在 UI 中使用图像和 Image 元素的辅助功能方面的详细信息，请参阅 基本辅助功能信息。

图像资源

资源可以使用资源限定符模式根据特定于设备的缩放来加载不同的资源。 如果应用运行时缩放因子发生更改，则会自动重新评估最初为应用检索的任何资源。 此外，当该资源是 Image 对象的映像源时，将触发其中一个源加载事件（ImageOpened 或 ImageFailed），因为系统请求新资源，然后将其应用到 映像。 当有多个可用时，用户将应用移到其他监视器时，可能会发生运行时规模更改的情况。 因此，当处理缩放更改时， ImageOpened 或 ImageFailed 事件可能发生在运行时，即使在 XAML 中设置 源 的情况下也是如此。

另请参阅

• FrameworkElement
• BitmapSource
• FlowDirection
• Source
• Image 和 ImageBrush
• XAML 图像示例
• 优化动画和媒体
• Windows.Graphics.Imaging（Windows 图形图像处理）
• Animated GIF 播放（XAML）示例（Windows 10）