Xamarin.Forms 创建移动应用程序的基础知识 7 - Image

简介

演示如何显示图像。

1. 在 XAML 中创建 Xamarin.Forms Image 。
2. Image 基本属性。
3. Image 图片引用。

创建 Image

1. 打开已有项目 AwesomeApp。
2. 添加新项 ImagePage.xaml。
3. 编辑 ImagePage.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"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="AwesomeApp.ImagePage">
	<ContentPage.Content>
		<StackLayout Margin="20,32">
			<Image Source="https://avatar.csdnimg.cn/F/3/D/1_weixin_42456421_1583375444.jpg"
               HeightRequest="300" />
		</StackLayout>
	</ContentPage.Content>
</ContentPage>

Image.Source 属性是 ImageSource 类型，可以是文件、URI 或本地资源

*Image 默认保持图像的纵横比

4. 编辑 App.xaml.cs：

public App()
{
	InitializeComponent();
	MainPage = new ImagePage();
}

5. 调试 Android 上的应用：
   

   *Image 自动将下载的图像缓存 24 小时

Image 基本属性

1. 编辑 ImagePage.xaml：

<Image Source="https://avatar.csdnimg.cn/F/3/D/1_weixin_42456421_1583375444.jpg"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=300, Android=250}"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />

• Aspect 图像的缩放模式
• OnPlatform 标记扩展可每个平台自定义值

2. 调试 Android 上的应用：
   

Image 图片引用

1. 本地图片引用：

• Android
  
  
• IOS
  
  

  选择文件

重命名资源为文件名，保险与 Android 本地资源名称一致。

• 编辑 ImagePage.xaml：

<Image Source="csdn_logo"
       Aspect="Fill"
       HeightRequest="{OnPlatform iOS=88, Android=88}"
       WidthRequest="{OnPlatform iOS=180, Android=180}"
       HorizontalOptions="Center" />

Source 本地资源 Android 引用直接使用文件名称 *使用 OnPlatform 标记可分别定义

• 调试 Android 上的应用：
  

2. 嵌入资源引用：
   

• 编辑 ImagePage.xaml：

<Image x:Name="imgIcon" />

• 编辑 ImagePage.xaml.cs：

public ImagePage()
{
	InitializeComponent();
	imgIcon.Source = ImageSource.FromResource("AwesomeApp.Icons.delete.png");
}

使用 ImageSource.FromResource 查找嵌入资源 *路径：资源所在程序集命名空间.文件夹.文件名.文件类型

• 调试 Android 上的应用：