Embedded images

Встроенные изображения (embedded images) в отличие от выше рассмотренных локальных изображений добавляются непосредственно в разделяемую сборку в качестве ресурса. То есть нам надо добавить файл только в главный проект.

Так, создадим в главном проекте новый каталог Images и добавим в него файл изображения:

После добавления изображения в панели свойств для поля Build Action установим значение Embedded Resources.

Выведем изображение в коде C#:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        Image image = new Image();
        image.Source = ImageSource.FromResource("HelloApp.Images.forest.jpg");
        Content = image;
    }  
}

Для получения ресурса изображения применяется метод ImageSource.FromResource(). Обратите внимание на путь, который в него передается. Этот путь начинается с названия проекта, то есть HelloApp. Дальше идет путь к изображению внутри проекта. Название проекта и название папок в этом пути отделяются точками.

Для XAML по умолчанию подобная возможность отсутствует, и нам надо вручную писать специальное расширение для XAML, которое позволит транслировать строковый путь в нужный нам объект.

Для этого добавим в проект следующий класс:

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace HelloApp
{
    [ContentProperty("Source")]
    public class ImageResourceExtension : IMarkupExtension
    {
        public string Source { get; set; }

        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (Source == null)
            {
                return null;
            }
            var imageSource = ImageSource.FromResource(Source);

            return imageSource;
        }
    }
}

Применим класс для загрузки изображения в коде 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:local="clr-namespace:HelloApp;assembly=HelloApp"
             x:Class="HelloApp.MainPage">
    <Image Source="{local:ImageResource HelloApp.Images.forest.jpg}" />
</ContentPage>

Загрузка из сети

Кроме локальных картинок Xamarin также поддерживает загрузку из сети:

Image image = new Image();
image.Source = new UriImageSource 
{ 
    CachingEnabled = false,
    Uri = new System.Uri("http://www.someserver/someimage.png") 
};

Кроме url изображения также можно задать параметры кэширования. Выражение CachingEnabled = false отключает кэширование. Но мы также можем включить его и установить период кэширования:

Image image = new Image();
image.Source = new UriImageSource 
{ 
    CachingEnabled = true,
    CacheValidity = new System.TimeSpan(2,0,0,0),
    Uri = new System.Uri("http://www.someserver/someimage.png") 
};

Параметр CacheValidity указывает, сколько будет действовать кэширование - в данном случае 2 дня. Без установки параметра по умолчанию кэширование длится 24 часа.

Свойство Aspect

Свойство Aspect позволяет задать принцип масштабирования изображения при его выводе на экран. Это свойство в качестве значения принимает одну из констант из одноименного перечисления Aspect:

• AspectFit: значение по умолчанию. Если стандартное изображение не вписывается в экран (например, его ширина больше ширины экрана), то оно масштабируется с сохранением аспектного отношения (отношение ширины к длине)

• Fill: растягивает изображение по ширине или длине без сохрнения аспектного отношения

• AspectFill: сохраняет аспектное отношение, но вырезает из него ту часть, которая вписывается в экран

Выше на рисунке демонстрировалось значение по умолчанию - AspectFit. Теперь попробуем AspectFill:

<Image Source="forest.jpg" Aspect="AspectFill" />

В итоге результат будет несколько отличаться: