Миниатюры изображения

В этих рекомендациях описано, как использовать миниатюры, чтобы помочь пользователям просматривать файлы в вашем приложении WinUI.

Основные API

• ThumbnailMode

Должно ли мое приложение включать миниатюры?

Если приложение позволяет пользователям просматривать файлы, вы можете отображать эскизы изображений, чтобы пользователи могли быстро просматривать эти файлы.

Используйте эскизы, когда:

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

  

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

  

Полезные советы

• При получении эскизов укажите режим эскизов (PicturesView, ВидеоView, DocumentsView, MusicView, ListView или SingleItem). Это гарантирует, что изображения эскизов оптимизированы для отображения типа файлов, которые пользователи хотят видеть.

  • Используйте режим SingleItem для получения эскиза для одного элемента независимо от типа файла. Другие режимы эскизов предназначены для отображения предварительных версий нескольких файлов.

• Отображение универсальных заполнителей вместо эскизов во время загрузки эскизов. Использование заполнителей помогает приложению повысить скорость реагирования, так как пользователи могут взаимодействовать с предварительными версиями перед загрузкой эскизов.

  Изображения-заполнители должны быть:

  • Зависит от типа элемента, который он обозначает. Например, папки, рисунки и видео должны иметь собственные специализированные заполнители.
  • Тот же размер и пропорции, что и у эскизного изображения, которое оно заменяет.
  • Отображается, пока не загрузится миниатюра изображения.

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

• Если вы не можете получить эскиз, отобразите изображение-заглушку.

• Отображение дополнительных сведений о файле при предоставлении предварительных версий для файлов документов и музыки. Затем пользователи могут определить ключевые сведения о файле, который может быть недоступен только из эскиза. Например, для музыкального файла можно отобразить имя художника вместе с эскизом искусства альбома.

• Не отображайте дополнительные сведения о файлах для изображений и видеофайлов. В большинстве случаев эскиз изображения достаточно для пользователей, просматривающих изображения и видео.

Дополнительные рекомендации по использованию

Рекомендуемые режимы эскизов и их функции:

Отображение предварительных версий для	Режимы эскизов	Особенности извлечённых миниатюр изображений
Pictures Видео	PicturesView ПросмотрВидео	Размер: средний, желательно по крайней мере 190 (если размер изображения равен 190x130) Пропорции: равномерное, широкое соотношение пропорций около 7 (190x130, если размер равен 190) Обрезанный для предварительных версий. Хорошо подходит для выравнивания изображений в сетке благодаря ровным пропорциям.
Documents Музыка	DocumentsView MusicView ListView	Размер: небольшой, желательно по крайней мере 40 x 40 пикселей Соотношение сторон: однородное, квадратное соотношение Хорошо подходит для предварительного просмотра обложки альбома из-за квадратного соотношения сторон. Документы выглядят так же, как и в окне выбора файлов (он использует те же значки).
Любой отдельный элемент (независимо от типа файла)	ЕдиничныйЭлемент	Размер: небольшой, желательно по крайней мере 40 x 40 пикселей Соотношение сторон: однородное, квадратное соотношение Хорошо подходит для предварительного просмотра обложки альбома из-за квадратного соотношения сторон. Документы выглядят так же, как и в окне выбора файлов (он использует те же значки).

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

Тип элемента	При извлечении с помощью: PicturesView ПросмотрВидео	При извлечении с помощью: DocumentsView MusicView ListView	При извлечении с помощью: ЕдиничныйЭлемент
Рисунок	Изображение эскиза использует однородное, широкое соотношение сторон около 0.7 (190 x 130, если предпочтительный размер — 190).	Эскиз обрезается до квадратного соотношения сторон.	Изображение эскиза использует исходное соотношение пропорций файла.
Видео	Миниатюра имеет значок, который отличает её от изображений.	Эскиз обрезается до квадратного формата.	Изображение эскиза использует исходное соотношение пропорций файла.
Music	Миниатюра — это значок на фоне соответствующего размера. Цвет фона определяется цветом фона плитки приложения.	Если файл содержит обложку альбома, тогда превью — это обложка альбома. В противном случае, миниатюра является иконкой на фоне соответствующего размера.	Если файл содержит изображение альбома, эскиз — это изображение альбома с исходным соотношением пропорций файла. В противном случае эскиз является значком.
Документ	Миниатюра — это значок на фоне подходящего размера. Цвет фона определяется цветом фона плитки приложения.	Эскиз — это значок на фоне соответствующего размера. Цвет фона определяется цветом фона плитки приложения.	Эскиз документа, если он существует. В противном случае эскиз является значком.
Folder	Если в папке есть файл рисунка, используется эскиз рисунка. В противном случае эскиз не извлекается.	Изображение превью не получено.	Миниатюра — это значок папки.
Группа файлов	Если в папке есть файл рисунка, используется эскиз рисунка. В противном случае эскиз не извлекается.	Если в группе есть файл с обложкой альбома, миниатюра — это изображение альбома. В противном случае эскиз не извлекается.	Если в группе есть файл с изображением обложки альбома, миниатюра — это изображение альбома, и сохраняются исходные пропорции файла. В противном случае эскиз представляет собой значок, представляющий группу файлов.

Связанные темы

• Перечисление ThumbnailMode
• Класс StorageItemThumbnail
• Класс StorageFile
• Пример эскиза файлов и папок (GitHub)
• Представление списка и сетки