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 Store 获取应用，或在 GitHub 上获取源代码。

注解

图像文件格式

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

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

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

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

设置 Image.Source

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

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

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

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

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

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

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

使用代码设置 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;
}

将流源用于图像源

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

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

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 中的属性。

如果要在代码中创建 Image 实例，则可能已创建 BitmapImage 实例作为为 Source 属性提供的值，因此只需在 BitmapImage 实例上设置 DecodePixelWidth (或 DecodePixelHeight) ，然后再设置 UriSource 属性。 DecodePixelType 属性还影响解码操作解释像素值的方式。

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

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

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

图像文件编码和解码

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

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

图像 宽度和高度

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

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

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

NineGrid

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

映像的资源限定和本地化

图像 源文件和缩放

你应该以多个推荐大小创建图像源，以确保你的应用在 Windows 进行缩放时具有良好的外观。 为图像指定 源 时，可以对将正确资源用于特定于设备缩放因子的资源使用命名约定。 这由应用在运行时自动确定。 有关要使用的命名约定的详细信息，请参阅 快速入门：使用文件或图像资源。

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

使用非限定资源

不限定资源是一种可以使用的方法，其中基本资源引用引用为默认资源，资源管理过程可以自动查找等效的本地化资源。 可以使用自动处理来访问具有当前规模和区域性限定符的不限定资源，也可以使用 ResourceManager 和 ResourceMap 以及区域性和缩放限定符来直接获取资源。 有关详细信息，请参阅资源管理系统。

Image 的 FlowDirection

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

Image 类和辅助功能

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

图像资源

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

构造函数

属性

方法

事件

适用于

另请参阅

• FrameworkElement
• BitmapSource
• FlowDirection
• Source
• Image 和 ImageBrush
• XAML 图像示例
• 优化动画和媒体
• Windows.Graphics.Imaging
• windows 10) (XAML) 示例 (动画 GIF 播放