Работа с растровыми изображениями в Silverlight

Дополнительные материалы к занятию можно скачать здесь.

В Silverlight элемент Image используется для отображения растровых изображений точно так же, как элемент TextBlock используется для отображения текста. Изображение несколько отличается от обеспечиваемого приложением на XNA, и дело не только в заголовках. По умолчанию элемент Image расширяет или растягивает растровое изображение максимально, как только возможно, для заполнения контейнера (сетки для содержимого), сохраняя при этом его пропорции. Особенно это заметно, если задать атрибуту SupportedOrientations начального тега PhoneApplicationPage значение PortraitOrLandscape и повернуть телефон на бок.

Создаем приложение Silverlight Windows Phone 7. Назовем его p15. Для хранения изображений мы создадим папку Image. Для этого нажмем правой кнопкой мыши по имени проекта, выберем пункт Add New Folder Images.

После этого поместите в папку Images графическое изображение test.png. Далее, это изображение нужно подключить к проекту. Для этого щелкаем правой кнопкой мыши по папке Images -> Add -> Existing Item -> test.png.

Теперь можно добавить элемент управления Image, связанный с картинкой test.png:

<Image x:Name="img" Source="Images/test.png"/>
    

Полный текст файла MainPage.xaml:

<phone:PhoneApplicationPage 
    x:Class="p15.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="728" d:DesignHeight="480"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Landscape"  Orientation="Landscape"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Размещение" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="картинки" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Image x:Name="img" Source="Images/test.png"/>
        </Grid>
    </Grid>
 

</phone:PhoneApplicationPage>
    

Результат: