Работа с изоражениями в Windows 8 приложениях

Итак, сегодня поговорим от том, как показывать изображения в Windows 8 приложениях. Тема на самом деле не специфична для Windows 8, и практически все из приведенного может быть применено и в WPF и Silverlight приложениях.



 В Metro Style приложениях доступны для работы с ранее созданными изображениями два класса: Image и ImageBrush. Данные классы позволяют загружать изображения в форматах: jpeg, png, bmp, gif, tif.
Для демонстрации примеров, я добавил в приложение картинку в формате jpeg. Для удобства группировки в проекте я создал папку Images и изображение добавил уже в нее.
Первый пример на показ изображения в качестве фона страницы. Для этого, достаточно заменить Background который предлагает Visual Studio по умолчанию, на ImageBrush:

<Grid>

    <Grid.Background>
        <ImageBrush ImageSource="Images/IMG_0523.JPG" />
    Grid.Background>
Grid>
Все, фон будет не черным (как в примерах предыдущих статей, а в виде изображения). Если вы уверены, что пользователь вашего приложения все время on-line, то изображения можно загружать и из веба:
<Grid >
    <Grid.Background>
        <ImageBrush ImageSource="http://i.msdn.microsoft.com/dynimg/IC587773.png" />
    Grid.Background>
Grid>

Основная проблема которая может возникать в этом случае, если пропорции изображения не будут совпадать с пропорциями страницы/компонента в котором вы применяете ImageBrush.
Во втором примере, рассмотрим варианты растягивания изображений. Для сравнения различны способов масштабирования, воспользуемся приложением вот с такой компоновкой четырех изображений:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <Grid.RowDefinitions>
        <RowDefinition Height="200" />
        <RowDefinition Height="1*" />
    Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="1*" />
    Grid.ColumnDefinitions>
    <Rectangle Fill="White" Grid.ColumnSpan="4" />
    <Image Stretch="None" Margin="5" Grid.Column="0" Source="Images/IMG_0523.JPG" />
    <Image Stretch="Uniform" Margin="5" Grid.Column="1" Source="Images/IMG_0523.JPG" />
    <Image Stretch="UniformToFill" Margin="5" Grid.Column="2" Source="Images/IMG_0523.JPG" />
    <Image Stretch="Fill" Margin="5" Grid.Column="3" Source="Images/IMG_0523.JPG" />       
Grid>
При запуске, при горизонтальной ориентации изображения и при его размерах больше чем 200х200. увидим нечто похожее на:

Как видим, в случае None, изображение не трансформируется и т.к. оно больше компонента, то мы видим только часть изображения. В случае применения Uniform, изображение сжимается (или увеличивается, если оно меньше компонента Image) так, чтобы целиком отобразиться в нем, при этом пропорции изображения сохраняются. В данном примере, в связи с тем, что изображение не пропорционально размерам компонента Image появляются белые полосы сверху и снизу. В варианте UniformToFill, изображение также масштабируется пропорционально, но теперь так, чтобы закрыть весь компонент. В результате для данных соотношений размеров изображения и Image, произошло отрезание правой части изображения. Ну и в случае Fill, изображение показывается целиком непропорционально растягиваясь под размеры Image.Ну а в третьем примере, применим масштабирование не всего рисунка. Если нам в приложении придется хранить много изображений, то в случае простых изображений, мы можем сэкономить. Допустим, нам в нескольких местах, необходимо оформить компоненты как прямоугольник с бордюром и сплошной заливкой (понятно, что это можно и отрисовать руками, но допустим мы все таки хотим изображением). Если сделать изображение маленьким (например 6 на 6 пикселей), то при попытке его увеличить, мы получим не очень удачную картинку, т.к. увеличению подвергнется и рамка, которую мы бы не хотели увеличивать. Нет ничего проще, при помощи свойства NineGrid, мы можем задать сколько пикселей от границы рисунков из увеличения исключить. Как это можно задать:

<StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <Image Width="100" Height="100" Stretch="None" Source="Images/6х6.png" Margin="5" HorizontalAlignment="Left" />
    <Image Width="100" Height="100" Stretch="Fill" Source="Images/6х6.png" Margin="5" HorizontalAlignment="Left" />
    <Image Width="100" Height="100" Stretch="Fill" NineGrid="3" Source="Images/6х6.png" Margin="5" HorizontalAlignment="Left" />
StackPanel>
Ну и выглядеть это будет вот так:

Как видно, первое изображение маленькое. При попытке его увеличить начинается пропорциональное увеличение. Ну а в третьем случае граница не увеличилась, а оранжевая середина растянулась именно так как нам надо.