День шестнадцатый. Элемент Panorama

Вступление

Сегодня мы познакомимся с интересным элементом управления Panorama, который является новинкой для программиста. Подобного аналога не было в арсенале разработчика, но, вероятно, вы будете активно использовать его в своих проектах.

Что представляет собой элемент Panorama

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

Создание проекта с использованием Panorama

Попробуем создать собственный проект с использованием элемента управления Panorama. Во всех предыдущих примерах мы использовали для проектов стандартный шаблон Windows Phone Application. Настало время познакомиться с другими шаблонами. Для использования панорамы выберем шаблон Windows Phone Panorama Application:

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

Добавляем элемент Panorama на панель инструментов

Закройте запущенный проект, на основе шаблона Windows Phone Panorama Application, и откройте любой предыдущий проект. На панели инструментов вы не найдете элемент Panorama, чтобы перетащить его на свою страницу. Необходимо сделать несколько предварительных приготовлений. Откройте панель инструментов, щелкните правой кнопкой мыши на вкладке Windows Phone controls и выберите из списка команду Choose Items….

В открывшемся диалоговом окне на вкладе Windows Phone Components можно увидеть список различных элементов управления. Часть из них отмечена флажком. Найдите в списке элемент Panorama и также отметьте его флажком. Кстати, рядом с ним вы можете увидеть элемент Pivot, с которым познакомимся завтра.

После того, как вы отметили флажком элемент Panorama, он появится на панели инструментов. И теперь вы можете добавить его на свою страницу, как обычно вы добавляете кнопки, текстовые поля и т.д.

Удалите со своей страницы все элементы XAML и перетащите элемент Panorama на чистую страницу. В редакторе XAML синтаксис будет выглядеть следующим образом:


<controls:Panorama />

Также будет добавлено описание нового пространства имен в начале проекта:


xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

Это минимум кода, достаточный для работы с панорамой. Далее допиливаем его под свои нужды. Ниже представлена иллюстрация с пояснениями об основных частях панорамы:

Настройка фоновой картинки и заголовка

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

Добавьте картинку в проект и создайте объект ImageBrush, который будет использовать фото как источник. Также можно установить прозрачность картинки, чтобы текст лучше читался на фоне картинки.


<controls:Panorama Title="waiter">
	<controls:Panorama.Background>
		<ImageBrush ImageSource="PanoramaBackground.jpg" Opacity=".5" />
	</controls:Panorama.Background>
</controls:Panorama>

Наполняем информацией

Классно, мы сделали фоновую картинку. Но выглядит приложение некрасиво. Содержимое не прокручивается, нет никаких данных. Пора подумать о наполнении информацией при помощи PanoramaItem, которые являются частью XAML-разметки для Panorama. Добавляя PanoramaItems, мы создаем отдельные секции для панорамы. Каждая секция совершенно независима от других секций. Можете воспринимать их как отдельные страницы с эффектом прокрутки. Для примера давайте создадим три секции PanoramaItem и зададим для каждой секции свой заголовок.


<controls:Panorama Title="Рыжик">
    <controls:Panorama.Background>
        <ImageBrush ImageSource="mirrorcat.jpg" Opacity=".5" />
    </controls:Panorama.Background>
    <controls:PanoramaItem Header="Кушать">

    </controls:PanoramaItem>
    <controls:PanoramaItem Header="Играть">

    </controls:PanoramaItem>
    <controls:PanoramaItem Header="Спать">

    </controls:PanoramaItem>
</controls:Panorama>

Вот как теперь это выглядит на устройстве:

Кот в панораме

Запустите проект и поиграться с примером. Обратите внимание на одну интересную особенность - фоновая картинка прокручивается с небольшим опозданием, чем сам текст. Это сделано специально для создания особого эффекта. Давайте продолжим наполнение элемента информацией:

Начнем со списка ListBox. Список удобен для создания упорядоченного текста для дальнейшего вертикального прокручивания, если текста слишком много. Кроме того сам список легко связать с элементами списка в коде. (почитайте на эту тему материал Scott Guthrie).

Предположим, у нас есть распорядок дня из трех пунктов, который необходимо соблюдать. Выведем их на экран в секции Кушать. Создаем XAML-разметку и располагаем его внутри списка:


<controls:PanoramaItem Header="Кушать">
    <ListBox Margin="0,0,-12,0">
        <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
            <Image Height="100" Width="100" Source="cat-01.png" Margin="12,0,9,0"/>
            <StackPanel Width="311">
                <TextBlock Text="Завтрак"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                <TextBlock Text="Меню на завтрак" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
            </StackPanel>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
            <Image Height="100" Width="100" Source="cat-02.png" Margin="12,0,9,0"/>
            <StackPanel Width="311">
                <TextBlock Text="Обед"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                <TextBlock Text="А компот?" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
            </StackPanel>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
            <Image Height="100" Width="100" Source="cat-03.png" Margin="12,0,9,0"/>
            <StackPanel Width="311">
                <TextBlock Text="Ужин"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                <TextBlock Text="Врагу не отдам!" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
            </StackPanel>
        </StackPanel>
    </ListBox>
</controls:PanoramaItem>

Завтрак для кота

Вот практически и все. Дальше зависит от вашей фантазии.

Заключение

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

Реклама