Xamarin.Forms 图像教程
开始演练本教程的前提条件为已成功完成以下教程：
- 生成第一个 Xamarin.Forms 应用快速入门。
- StackLayout教程。
在本教程中，你将了解：
- 在 XAML 中创建 Xamarin.Forms
Image。 - 自定义
Image外观。 - 显示每个平台项目的本地图像文件。
你将使用 Visual Studio 2019 或 Visual Studio for Mac 创建一个简单的应用程序，演示如何显示图像并自定义其外观。 以下屏幕截图显示了最终的应用程序：
还将使用适用于 Xamarin.Forms 的 XAML 热重载查看 UI 更改，而无需重新生成应用程序。
创建图像
若要完成本教程，应使用 Visual Studio 2019（最新版本），且安装了“使用 .NET 的移动开发”工作负载。 此外，还需要一个匹配的 Mac，用于在 iOS 上生成教程应用程序。 有关安装 Xamarin 平台的信息，请参阅安装 Xamarin。 有关将 Visual Studio 2019 连接到 Mac 生成主机的信息，请参阅通过“与 Mac 配对”进行 Xamarin.iOS 开发。
启动 Visual Studio，新建名为 ImageTutorial 的 Xamarin.Forms 空白应用。
重要
本教程中的 C# 和 XAML 片段要求将解决方案命名为 ImageTutorial。 使用不同的名称会导致：将本教程中的代码复制到解决方案中时出现生成错误。
有关创建的 .NET Standard 库的详细信息，请参阅 Xamarin.FormsXamarin.Forms 快速入门的深入探讨中的 Xamarin.Forms 应用程序剖析。
在“解决方案资源管理器”的 ImageTutorial 项目中，双击 MainPage.xaml 将其打开 。 然后在 MainPage.xaml 中，删除所有模板代码，替换为以下代码 ：
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ImageTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" HeightRequest="300" /> </StackLayout> </ContentPage>此代码以声明方式定义页面的用户界面，该界面由
StackLayout中的Image组成。Image.Source属性指定要通过 URI 显示的图像。Image.Source属性是ImageSource类型，使用它可以从文件、URI 或资源中获取图像。 有关详细信息，请参阅《Xamarin.Forms 中的图像》指南中的显示图像。HeightRequest属性指定Image的高度（与设备无关的单位）。注意
本示例中不需要设置
WidthRequest属性。 这是因为Image默认保持图像的纵横比。在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选远程 iOS 模拟器或 Android Emulator 内的应用程序 ：
注意
Image视图自动将下载的图像缓存 24 小时。 有关详细信息，请参阅《Xamarin.Forms 中的图像》指南中的下载的图像的缓存。
自定义外观
在 MainPage.xaml 中，修改
Image声明以自定义其外观：<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" Aspect="Fill" HeightRequest="{OnPlatform iOS=300, Android=250}" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />此代码将
Aspect属性设置为Fill，该属性定义了图像的缩放模式。Fill成员在Aspect枚举中定义，并拉伸图像以完全填充视图，而不管图像是否扭曲。 有关图像缩放的详细信息，请参阅《Xamarin.Forms 中的图像》指南中的显示图像。通过
OnPlatform标记扩展可基于每个平台自定义 UI 外观。 在此示例中，标记扩展程序用于将HeightRequest和WidthRequest属性设置为 iOS 上的 300 个与设备无关的单元，以及 Android 上的 250 个与设备无关的单元。 有关OnPlatform标记扩展的详细信息，请参阅使用 XAML 标记扩展指南中的 OnPlatform 标记扩展。此外，
HorizontalOptions属性指定图像将水平居中。如果应用程序仍在运行，请保存对文件所做的更改，应用程序用户界面将自动在模拟器或仿真器中更新。 否则，请在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选远程 iOS 模拟器或 Android Emulator 内的应用程序：
在 Visual Studio 中停止应用程序。
显示本地图像
图像文件可以添加到平台项目中，并从 Xamarin.Forms 共享代码中引用。 当图像特定于平台时，例如在不同平台上使用不同分辨率或稍微不同的设计时，需要这种分发图像的方法。
在本练习中，你将修改 ImageTutorial 解决方案以显示本地图像，而不是从 URI 下载的图像。 本地图像是 Xamarin 徽标，应通过单击下面的按钮下载。
重要
要跨所有平台使用单个图像，必须在每个平台上使用相同的文件名，并且该名称应为有效的 Android 资源名称（即只允许使用小写字母、数字、下划线和句点）。
在“解决方案资源管理器”的“ImageTutorial.iOS”项目中，展开“资产目录”，然后双击“资产”将其打开 。 然后，在“Assets.xcassets“选项卡中，单击”加号“按钮并选择”添加图像集“ ：
在“Assets.xcassets”选项卡中，选择新的图像集，然后将显示编辑器：
将“XamarinLogo.png”从文件系统拖到“通用”类别的“1x”框 ：
在“Assets.xcassets“选项卡中，右键单击新图像集的名称并将其重命名为“XamarinLogo“ ：
保存并关闭“Assets.xcassets“选项卡。
在“解决方案资源管理器”中的“ImageTutorial.Android“项目中，展开“资源”文件夹 。 然后，将“XamarinLogo.png“从文件系统拖动至“可绘制“文件夹 ：
注意
Visual Studio 会自动将图像的生成操作设置为“AndroidResource“。
在“ImageTutorial”项目的“MainPage.xaml”中，修改
Image声明以显示本地“XamarinLogo”文件：<Image Source="XamarinLogo" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />此代码将
Source属性设置为要显示的本地文件。 将WidthRequest属性在 iOS 上设置为 300 个与设备无关的单元，在 Android 上设置为 250 个与设备无关的单元。 此外，HorizontalOptions属性指定图像将水平居中。注意
对于 iOS 上的 PNG 图像，可以从
Source属性中指定的文件名中省略“.png“扩展名。 对于其他图像格式，需要该扩展名。在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android Emulator 内的应用程序：
在 Visual Studio 中停止应用程序。
有关本地图像的详细信息，请参阅《Xamarin.Forms 中的图像》指南中的本地图像。
恭喜！
祝贺你完成了本教程的学习，在本教程中你学习了如何：
- 在 XAML 中创建 Xamarin.Forms
Image。 - 自定义
Image外观。 - 显示每个平台项目的本地图像文件。
后续步骤
若要深入了解使用 Xamarin.Forms 创建移动应用程序的基础知识，请继续学习“网格”教程。
相关链接
你有关于此部分的问题？ 如果有，请向我们提供反馈，以便我们对此部分作出改进。