Главная » Разработка для Windows Phone 7 » Изображения более подробно Windows Phone 7

0

Как было показано в главе 4, элемент Image позволяет использовать в приложении на Silverlight растровые изображения в формате JPEG и PNG. Рассмотрим элемент Image более подробно.

Проект ImageExperiment включает папку Images. В этой папке имеется файл BuzzAldrinOnTheMoon.png. Это популярная фотография, сделанная Нилом Армстронгом 21 июля 1969 года с помощью фотоаппарата Hasselblad. Это изображение размером 288х288 пикселов.

Ссылаемся на файл изображения в MainPage.xaml следующим образом:

Проект Silverlight: ImageExperiment Файл: MainPage.xaml (фрагмент)

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,Q,12,Q" Background="{StaticResource PhoneAccentBrush}"> <Image Source="Images/BuzzAldrin0nTheMoon.png" /> </Grid>

Также для сетки для содержимого я задал кисть Background контрастного цвета, просто чтобы фото выглядело несколько отчетливее. Вот как оно отображается в альбомном режиме:

По умолчанию растровое изображение меняет свои размеры, пытаясь максимально занять всю площадь контейнера (в данном случае, сетки для содержимого), но при этом сохраняя собственные пропорции. В зависимости от размеров и пропорций контейнера изображение центрируется по вертикали или по горизонтали. Варьируя значениями свойств HorizontalAlignment и VerticalAlignment, изображение можно перемещать в ту или иную сторону.

Поведением растяжения управляет свойство Stretch элемента Image. В качестве значений этого свойства используются члены перечисления Stretch. Значением по умолчанию является Uniform (Равномерно), которое можно задать явно следующим образом:

<Image Source="Images/BuzzAldrin0nTheMoon.png" Stretch="Uniform" />

«Равномерно» в данном случае означает одинаково во обоих направлениях, чтобы не нарушить пропорции изображения.

Также свойству Stretch можно задать значение Fill (Заполнить). Тогда изображение заполнит весь контейнер без сохранения собственных пропорций.

Теперь изображение и заполняет контейнер полностью, и растянуто равномерно с сохранением пропорций. Как обеспечивается одновременное выполнение обеих задач? Вообще это возможно только за счет обрезки изображения. Задавая свойства HorizontalAlignment и VerticalAlignment, можно определить, какой край изображения будет обрезан. То какие параметры используются, зависит от конкретного изображения.

Четвертое возможное значение – None (Нет). Оно определяет отсутствие растяжения. Изображение будет выведено в исходном размере, в данном случае, 288х288 пикселов.

Если при выводе изображения требуется обеспечить конкретный размер с сохранением исходных пропорций, задайте явно свойство Width или Height. Чтобы растянуть изображение до определенного размера без сохранения пропорций, задайте оба свойства, Width и Height, а также используйте для Stretch значение Fill.

Применять трансформации к элементу Image так же просто, как мы делали это для элементов TextBlock:

Компромиссным вариантом является значение UniformToFill (Равномерно, чтобы заполнить):

<Image Source="Images/BuzzAldrinOnTheMoon.png" RenderTransformOrigin="0.5 0.5"> <Image.RenderTransform>

Вот что получилось:

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

  • Комментарии