Учебник по Image в Xamarin.Forms

Статья
Developer (Начальный уровень)
10 мин до завершения

Прежде чем работать с этим учебником, вы должны выполнить:

Краткое руководство Создание первого Xamarin.Forms приложения.
Руководство по StackLayout.

В этом руководстве описано следующее:

Создайте Xamarin.FormsImage в XAML.
Настраивать внешний вид Image.
Отображать локальный файл изображения из проекта каждой платформы.

С помощью Visual Studio 2019 или Visual Studio для Mac вы создадите простое приложение, демонстрирующее, как отображать изображение и настраивать его внешний вид. На следующих снимках экрана показано готовое приложение.

Вы также будете использовать Горячую перезагрузку XAML для Xamarin.Forms, чтобы просматривать изменения пользовательского интерфейса без перестроения приложения.

Создание Image

Осталось 9 мин

Visual Studio
Visual Studio для Mac

Для работы с этим руководством у вас должен быть последний выпуск Visual Studio 2019 с установленной рабочей нагрузкой Разработка мобильных приложений на .NET. Кроме того, вам потребуется компьютер Mac для сборки учебного приложения на iOS. Сведения об установке платформы Xamarin см. в статье Установка Xamarin. Сведения о подключении Visual Studio 2019 к узлу сборки Mac см. в статье Связывание с Mac при разработке для Xamarin.iOS.

Запустите Visual Studio и создайте пустое приложение Xamarin.Forms с именем ImageTutorial.

Внимание

Для фрагментов кода на C# и XAML в этом руководстве необходимо решение с именем ImageTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
В обозревателе решений дважды щелкните файл MainPage.xaml в проекте ImageTutorial, чтобы открыть его. В 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>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из Image в StackLayout. Свойство Image.Source задает отображаемый образ с помощью универсального кода ресурса (URI). Свойство Image.Source типа ImageSource позволяет такие источники образов, как файлы, универсальные коды ресурса (URI) или ресурсы. Дополнительные сведения см. в разделе Отображение изображений в руководстве по изображениям в Xamarin.Forms.

Свойство HeightRequest указывает высоту Image в аппаратно-независимых единицах.

Примечание.

В этом примере нет необходимости задавать свойство WidthRequest. Это обусловлено тем, что Image по умолчанию сохраняет пропорции изображения.
На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном удаленном симуляторе iOS или эмуляторе Android.

Примечание.

Просмотр Image автоматически кэширует скачанные изображения на 24 часа. Дополнительные сведения см. в разделе Кэширование скачанного изображения в руководстве по изображениям в Xamarin.Forms.

Для работы с этим руководством вам нужно установить Visual Studio для Mac (последний выпуск) с поддержкой платформ Android и iOS. Кроме того, вам потребуется Xcode (последний выпуск). Дополнительные сведения об установке платформы Xamarin см. в статье Установка Xamarin.

Запустите Visual Studio для Mac и создайте пустое приложение Xamarin.Forms с именем ImageTutorial.

Внимание

Для фрагментов кода на C# и XAML в этом руководстве необходимо решение с именем ImageTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.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>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из Image в StackLayout. Свойство Image.Source задает отображаемый образ с помощью универсального кода ресурса (URI). Свойство Image.Source типа ImageSource позволяет такие источники образов, как файлы, универсальные коды ресурса (URI) или ресурсы. Дополнительные сведения см. в разделе Отображение изображений в руководстве по изображениям в Xamarin.Forms.

Свойство HeightRequest указывает высоту Image в аппаратно-независимых единицах.

Примечание.

В этом примере нет необходимости задавать свойство WidthRequest. Это обусловлено тем, что Image по умолчанию сохраняет пропорции изображения.
На панели инструментов Visual Studio для Mac нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном симуляторе iOS или эмуляторе Android:

Примечание.

Просмотр Image автоматически кэширует скачанные изображения на 24 часа. Дополнительные сведения см. в разделе Кэширование скачанного изображения в руководстве по изображениям в Xamarin.Forms.

Настройка внешнего вида

Осталось 6 мин

Visual Studio
Visual Studio для Mac

В 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 позволяет настраивать внешний вид пользовательского интерфейса для каждой платформы. В этом примере расширение разметки используется для установки свойств HeightRequest и WidthRequest равным 300 независимым от устройства единицам на iOS и 250 независимым от устройства единицам на Android. Дополнительные сведения о расширении разметки OnPlatform см. в разделе Расширение разметки OnPlatform в руководстве Использование расширений разметки XAML.

Кроме того, свойство HorizontalOptions указывает, что изображение будет отцентрировано по горизонтали.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android:

В Visual Studio остановите приложение.

В 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 позволяет настраивать внешний вид пользовательского интерфейса для каждой платформы. В этом примере расширение разметки используется для установки свойств HeightRequest и WidthRequest равными 300 в iOS и 250 в Android. Дополнительные сведения о расширении разметки OnPlatform см. в разделе Расширение разметки OnPlatform в руководстве Использование расширений разметки XAML.

Кроме того, свойство HorizontalOptions указывает, что изображение будет отцентрировано по горизонтали.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio для Mac кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном симуляторе iOS или эмуляторе Android:

В Visual Studio для Mac остановите приложение.

Отображение локального изображения

Осталось 4 мин

Файлы изображений могут быть добавлены в проекты платформы и использоваться в общем коде Xamarin.Forms. Этот метод распространения является обязательным для изображений, специфических для платформы, например при использовании разных разрешений на различных платформах или немного разных вариантах изображения.

В этом упражнении вы измените решение ImageTutorial для отображения локального изображения, не скачивая его по URI. Локальное изображение — это логотип Xamarin, который следует скачать, нажав кнопку ниже.

Скачать XamarinLogo.png

Внимание

Для использования одного изображения на всех платформах следует использовать одно и то же имя файла на всех платформах, и оно должно представлять собой допустимое имя ресурса Android (т. е. только строчные буквы, цифры, подчеркивания и точки).

Visual Studio
Visual Studio для Mac

В обозревателе решенийв проекте ImageTutorial.iOS разверните Каталог активов и дважды щелкните Активы, чтобы открыть этот раздел. Затем в Assets.xcassets нажмите кнопку Плюс и выберите команду Добавить набор изображений:
В Assets.xcassets выберите новый набор изображений; отобразится редактор:
Перетащите XamarinLogo.png из файловой системы в поле 1x для универсальной категории:
На вкладке Assets.xcassets щелкните правой кнопкой мыши имя нового набора изображений и переименуйте его в XamarinLogo:

Сохраните и закройте и вкладку Assets.xcassets.
В обозревателе решений в проекте ImageTutorial.Android разверните папку Ресурсы. Затем перетащите XamarinLogo.png из файловой системы в папку drawable:

Примечание.

Visual Studio автоматически задаст действие построения для изображения как AndroidResource.
В проекте ImageTutorial в файле MainPage.xaml измените объявление Image для отображения локального файла XamarinLogo:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Этот код задает в свойстве Source имя локального файла для отображения. Свойство WidthRequest имеет значение 300 аппаратно-независимых единиц в iOS и 250 аппаратно-независимых единиц в Android. Кроме того, свойство HorizontalOptions указывает, что изображение будет отцентрировано по горизонтали.

Примечание.

Для PNG-изображений в iOS расширение .png в имени файла в свойстве Source можно опустить. Для других форматов расширение является обязательным.
На панели инструментов Visual Studio нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном симуляторе iOS или эмуляторе Android:

В Visual Studio остановите приложение.

Дополнительные сведения о локальных изображениях см. в разделе Локальные изображения в руководстве по изображениям Xamarin.Forms.

На Панели решения в проекте ImageTutorial.iOS дважды щелкните Assets.xcassets, чтобы открыть его. Затем в списке ресурсов щелкните правой кнопкой мыши и выберите команду Новый набор изображений:
В списке активов выберите новый набор изображений; отобразится редактор:
Перетащите XamarinLogo.png из файловой системы в поле 1x для универсальной категории:
В списке активов щелкните правой кнопкой мыши имя нового набора изображений и переименуйте его в XamarinLogo:
На Панели решения в проекте ImageTutorial.Android разверните папку Ресурсы. Затем перетащите XamarinLogo.png из файловой системы в папку drawable.
В диалоговом окне Добавление файла в папку нажмите кнопку ОК.

Примечание.

Visual Studio для Mac автоматически задаст действие построения для изображения как AndroidResource.
В проекте ImageTutorial в файле MainPage.xaml измените объявление Image для отображения локального файла XamarinLogo:
```
<Image Source="XamarinLogo"
       WidthRequest="{OnPlatform iOS=300, Android=250}"
       HorizontalOptions="Center" />
```
Этот код задает в свойстве Source имя локального файла для отображения. Свойство WidthRequest имеет значение 300 аппаратно-независимых единиц в iOS и 250 аппаратно-независимых единиц в Android. Кроме того, свойство HorizontalOptions указывает, что изображение будет отцентрировано по горизонтали.

Примечание.

Для PNG-изображений в iOS расширение .png в имени файла в свойстве Source можно опустить. Для других форматов расширение является обязательным.
На панели инструментов Visual Studio для Mac нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном симуляторе iOS или эмуляторе Android:

В Visual Studio для Mac остановите приложение.

Дополнительные сведения о локальных изображениях см. в разделе Локальные изображения в руководстве по изображениям Xamarin.Forms.

Учебник по Image в Xamarin.Forms

Создание Image

Настройка внешнего вида

Отображение локального изображения

Поздравляем!

Следующие шаги

Учебник по Image в Xamarin.Forms

Создание Image

Настройка внешнего вида

Отображение локального изображения

Поздравляем!

Следующие шаги

Дополнительные ссылки