Создание первого приложения для Магазина Windows с помощью Blend, часть 1: эталонная страница (XAML & C#)

Статья
06/05/2015

Можно разрабатывать приложения для Магазина Windows быстрее и эффективнее, используя инструменты разработки на XAML в Blend для Visual Studio. В процессе изучения этого руководства будет собрано простое приложение, PickaFlick, в котором можно будет просматривать список новых фильмов. Список создается с помощью API Rotten Tomatoes. Для выполнения заданий этого руководства необходимо зарегистрироваться и получить ключ API, который вставляется в код.

Кроме того, вам потребуется полная или пробная версия Microsoft Visual Studio Professional, Premium или Ultimate, чтобы установить NuGet. Расширение NuGet недоступно для Visual Studio Express. Для использования NuGet требуется действующая лицензия разработчика приложений для Магазина Windows.

Домашняя страница приложения PickaFlick

Приложение PickaFlick в Blend

В части 1 этого руководства будет создана домашняя страница приложения. В процессе создания страницы вы научитесь следующему.

Загрузив этот проект из галереи примеров, можно просмотреть не только код, но и все ресурсы этого проекта, одновременно с этим продолжая работу и собирая проект.

Для изучения этого руководства не требуется опыт разработки на XAML и C#. Однако навыки работы с XAML и C# среднего уровня облегчат использование Blend.

Создание проекта из шаблона проекта

Blend и Visual Studio предоставляют те же шаблоны проектов, которые помогут приступить к разработке приложения для Магазина Windows. Дополнительные сведения о шаблонах, доступных в Blend и Visual Studio для разработки других видов приложений, см. в разделе Шаблоны, ускоряющие разработку приложений.

Создание проекта

В Blend в меню Файл выберите команду Создать проект.

В левой части диалогового окна Создание проекта отображается список типов проектов. При выборе типа проекта щелчком связанные с этим типом шаблоны проектов отображаются справа.
В списке типов проектов щелкните XAML (Магазин Windows).
В списке шаблонов проектов выберите пункт Пустое приложение (XAML).
В текстовом поле Имя введите PickaFlick.
В текстовом поле Расположение проверьте расположение проекта.
В списке Язык выберите Visual C#.
В списке Версия выберите 8.1. Нажмите кнопку ОК.

Просмотр отражения изменений приложения в ИП Blend

Рабочая область Blend по умолчанию представляет собой графический интерфейс для сборки приложений для Магазина Windows: поверхность разработки, панели, конфигурации рабочей области, представления разработки и меню. Дополнительные сведения см. в разделе Рабочая область приложения Blend (XAML).

При работе над проектом изменения, внесенные в одну область приложения, отражаются во всем интерфейсе.

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

Ссылки. Содержит ссылки проекта и файлы, в частности файлы DLL.
Активы. Содержит активы проекта, в том числе используемые по умолчанию графические активы приложения для Магазина Windows.
Свойства. Содержит общие сведения о сборке.
App.xaml. Объявляет общие ресурсы и обрабатывает глобальные события уровня приложения. Файл App.xaml необходим для отображения пользовательского интерфейса.
MainPage.xaml. Используемая по умолчанию начальная страница приложения.
Package.appxmanifest. Содержит метаданные, которые описывают приложение, в том числе отображаемое имя, эмблемы, описание приложения, объявления, возможности и упаковку развертывания.

Панель проектов в Blend

Дополнительные сведения см. в разделе Панель "Проекты" (XAML).

Под панелью Проекты в левой нижней части интерфейса находится панель Объекты и временная шкала. На этой панели представлена структура файла MainPage.xaml.

Здесь пользователь может просмотреть иерархию объектов страницы, над которой работает. На панели Объекты и временная шкала можно быстро и легко изменять иерархию объектов.

Дополнительные сведения см. в разделе Объекты и временная шкала (XAML).

В представлении Разделить отображаются одновременно поверхность разработки и код файла MainPage.xaml. При изменении элементов на поверхности разработки код автоматически обновляется. Если код MainPage.xaml не отображается, щелкните значок Разделить в правом верхнем углу поверхности разработки.

В этой мы добавим цвет фона в MainPage.xaml и проверим, что в процессе работы код обновляется.

Изменение фона MainPage.xaml

На панели Объекты и временная шкала выберите Сетка.
На панели Свойства в категории Кисть щелкните значок Одноцветная кисть .
В текстовом поле Шестнадцатеричное значение введите #D5BF9A и нажмите клавишу ВВОД.

В окне кода у тега Grid появится атрибут Background="#FFD5BF9A" (значение Alpha по умолчанию — 100 % или FF), а на поверхности разработки изменится цвет фона.

Добавление изображений в проект

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

Следующие изображения включены в пример проекта.

ChickenSprite
FilmStrip
MainLogo
SmallLogo-Chicken
Temp

Изображения можно добавить в проект следующими способами.

Использование команды Добавить существующий элемент в меню Проект
Копирование и вставка
Перетаскивание

В этом примере будут копироваться и вставляться изображения.

Добавление изображений в проект

Если загружен пример проекта, откройте папку PickaFlick Assets, нажмите клавиши Ctrl+A, а затем — Ctrl + C.
В Blend на панели Проекты щелкните правой кнопкой мыши папку Активы и выберите команду Вставить.

Теперь можно добавить изображения на поверхность разработки для изменения стиля приложения.

Настройка стиля изображений и элементов

Визуальное представление MainPage.xaml формируют три изображения: эмблема (щит), фоновое изображение (зеленая кинолента) и кнопка (цыпленок). Каждое изображение имеет свою реализацию. Первое, эмблема (MainLogo.png) — это простой элемент управления Image. Второе, кинолента (FilmStrip.png) — это узкое изображение, которое дублируется для создания эффекта более крупного изображения. Кинолента реализуется с помощью выполняемого кода C#. Третье, кнопка с цыпленком (ChickenSprite.png) — изначально является элементом управления Image, но мы преобразуем его в элемент управления Button с помощью параметра Преобразование в элемент управления.

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

Панель "Свойства" в Blend — Упорядочить по

При выборе варианта "Упорядочить по категории" свойства группируются по категориям, а категории сортируются по алфавиту. При выборе варианта "Упорядочить по имени" все доступные свойства сортируются по алфавиту. При выборе варианта "Упорядочить по источнику" свойства группируются по категориям Локальный, привязка и ресурс или Другое и сортируются по алфавиту внутри категорий.

Добавление элемента управления Image и настройка его стиля

В следующей процедуре мы добавим главную эмблему приложения PickaFlick, а затем с помощью элемента управления Image настроим ее стиль.

Добавление основной эмблемы и настройка ее стиля

На панели Проекты дважды щелкните MainLogo.png, чтобы добавить его на поверхность разработки.

Изображение появится на поверхности разработки, а элемент управления Image будет добавлен на панель Объекты и временная шкала.

Обратите внимание, что на панели Свойства в категории Общие атрибут Source элемента управления Image имеет значение Assets/MainLogo.png.
Чтобы было удобнее работать с элементом управления Image, содержащим изображение главной эмблемы, на панели Свойства в текстовом поле Имя введите MainLogo. Обратите внимание, что на панели Объекты и временная шкала элемент управления Image был переименован в MainLogo.
На панели Свойства в категории Макет справа от элемента Поле щелкните индикатор Дополнительные свойства и выберите Сброс.

Совет

Метка индикатора Дополнительные свойства изменяется в зависимости от привязок данных и ресурсов.В этом примере метка индикатора — Локальные.
В категории Общие в списке Растяжение выберите Нет.

Главная эмблема будет отображаться в центре поверхности разработки.

Добавление изображения, которое отрисовывается во время выполнения

Кинолента (FilmStrip.png) — это узкое изображение, которое дублируется для создания эффекта более крупного изображения. Приложения для Магазина Windows не поддерживают свойство TileBrush.TileMode, которое осуществляет мозаичное заполнение. Поэтому в приложении PickaFlick используется код C#, размещающий элементы управления Image в контейнере макета, в данном случае — в элементе управления Сетка с именем FilmStrip.

Создание контейнера макета киноленты

Поскольку инструмент Blend не оптимизирован для работы с кодом, основа сетки создается в Blend, а код — в Visual Studio.

Создание контейнера изображения киноленты

Выберите элемент Сетка на панели Объекты и временная шкала, затем дважды щелкните Сетка на панели Активы, чтобы добавить элемент управления Grid на поверхность разработки.

Совет

Найдите элемент управления Grid, указав Grid в поле Поиск, или откройте Элементы управления, щелкните Панели и выберите Grid.
На панели Объекты и временная шкала щелкните элемент управления Grid и переименуйте его в FilmStrip.
Выберите элемент FilmStrip, затем на панели Свойства в категории Макет задайте свойству Ширина значение 2560 (чтобы изображение заполняло более широкие экраны), а свойству Высота — значение 218 (высота FilmStrip.png).

Обратите внимание, что графика элемента управления выходит за верхний край поверхности разработки.
В категории Макет задайте свойству VerticalAlignment значение По центру .

Обратите внимание, что графика элемента управления разместилась по центру поверхности разработки.

Переключение к Visual Studio и обратно

Итак, вы создали сетку киноленты. Теперь вы можете перейти в Visual Studio, чтобы написать код.

Можно свободно переключаться между Blend и Visual Studio во время работы над проектом. Кроме того, один и тот же файл проекта может быть открыт одновременно в Blend и Visual Studio на одном компьютере. При сохранении изменений в файле в одном средстве и переходе к средство достаточно перезагрузить файл, чтобы обновить представление проекта.

Важно!

Можно копировать и вставить код в Blend или Visual Studio.Однако для работы с кодом C# рекомендуется пользоваться Visual Studio.В этом шаге показано, как можно легко переключаться между Blend и Visual Studio даже при работе над одним проектом.

При добавлении новых файлов в проект во время работы в Visual Studio необходимо сохранить проект с помощью команды Сохранить все (Ctrl+Shift+S) или выполнить сборку и запуск приложения, прежде чем вернуться к Blend.При переключении на Blend будет получен запрос о необходимости перезагрузки проекта.Щелкните Да, и новые файлы будут добавлены в проект в Blend.

Затем перейдите в Visual Studio, чтобы создать код, который будет отрисовывать изображение киноленты при загрузке главной страницы приложения.

Создание нового класса

В этой процедуре мы создадим файл класса с именем TileCanvas.cs. Это код, который размещает последовательности элементов управления Image в элементе Grid (FilmStrip), созданном в Blend.

Создание файла TileCanvas.cs

Щелкните правой кнопкой мыши проект на панели Проекты в Blend и выберите Изменить в Visual Studio.
В окне Обозреватель решений Visual Studio щелкните правой кнопкой мыши проект, выберите Добавить, затем Класс.
В диалоговом окне Добавление нового элемента выберите пункт Класс. В текстовом поле Имя введите TileCanvas.cs и нажмите кнопку Добавить.

Добавьте в файл TileCanvas.cs следующие операторы using после оператора using System.Threading.Tasks;:

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Media.Imaging;
using Windows.Foundation;

Замените class TileCanvas {} следующим кодом. Код создан на основе файла TileCanvas.cs Роба Фонсеки-Энсора, размещенного по адресу https://gist.github.com/robfe/3077863#file-tilecanvas-cs, и используется с разрешения автора, в соответствии с условиями лицензии Apache 2.0.

public class TileCanvas : Canvas
    {
        public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(TileCanvas), new PropertyMetadata(null, ImageSourceChanged));

        private Size lastActualSize;

        public TileCanvas()
        {
            LayoutUpdated += OnLayoutUpdated;
        }

        public ImageSource ImageSource
        {
            get { return (ImageSource)GetValue(ImageSourceProperty); }
           set { SetValue(ImageSourceProperty, value); }
        }

        private void OnLayoutUpdated(object sender, object o)
        {
            var newSize = new Size(ActualWidth, ActualHeight);
            if (lastActualSize != newSize)
            {
                lastActualSize = newSize;
                Rebuild();
            }
        }

        private static void ImageSourceChanged(DependencyObject o, DependencyPropertyChangedEventArgs args)
        {
            TileCanvas self = (TileCanvas)o;
            var src = self.ImageSource;
            if (src != null)
            {
                var image = new Image { Source = src };
                image.ImageOpened += self.ImageOnImageOpened;
                image.ImageFailed += self.ImageOnImageFailed;

                //add it to the visual tree to kick off ImageOpened
                self.Children.Add(image);
            }
        }

        private void ImageOnImageFailed(object sender, ExceptionRoutedEventArgs exceptionRoutedEventArgs)
        {
            var image = (Image)sender;
            image.ImageOpened -= ImageOnImageOpened;
            image.ImageFailed -= ImageOnImageFailed;
            Children.Add(new TextBlock { Text = exceptionRoutedEventArgs.ErrorMessage, Foreground = new SolidColorBrush(Colors.Red) });
        }

        private void ImageOnImageOpened(object sender, RoutedEventArgs routedEventArgs)
        {
            var image = (Image)sender;
            image.ImageOpened -= ImageOnImageOpened;
            image.ImageFailed -= ImageOnImageFailed;
            Rebuild();
        }

        private void Rebuild()
        {
            var bmp = ImageSource as BitmapSource;
            if (bmp == null)
            {
                return;
            }

            var width = bmp.PixelWidth;
            var height = bmp.PixelHeight;

            if (width == 0 || height == 0)
            {
                return;
            }

            Children.Clear();
            for (int x = 0; x < ActualWidth; x += width)
            {
                for (int y = 0; y < ActualHeight; y += height)
                {
                    var image = new Image { Source = ImageSource };
                    Canvas.SetLeft(image, x);
                    Canvas.SetTop(image, y);
                    Children.Add(image);
                }
            }
            Clip = new RectangleGeometry { Rect = new Rect(0, 0, ActualWidth, ActualHeight) };
        }
    }

Нажмите клавиши CTRL+S, чтобы сохранить изменения.

Изменение файла MainPage.xaml.cs

Добавив на страницу ссылку на пространство имен Windows.UI.Xaml.Media.Imaging, можно будет ссылаться на источник изображения с помощью URI. Этот URI будет указывать на FilmStrip.png.

Добавление ссылки на пространство имен Windows.UI.Xaml.Media.Imaging

В окне Обозреватель решений разверните узел MainPage.xaml и дважды щелкните файл MainPage.xaml, чтобы его открыть. Добавьте следующий оператор после оператора using Windows.UI.Xaml.Navigation;:
```
using Windows.UI.Xaml.Media.Imaging;
```

Добавление события PageLoaded

TileCanvas.cs предоставляет код, который заполняет сетку FilmStrip элементами управления Image. Добавив ссылку на пространство имен Windows.UI.Xaml.Media.Imaging, можно будет указывать URI конкретного изображения. Чтобы завершить работу над кодом, добавьте событие Page_Loaded, которое вызывает TileCanvas.cs и определяет URI изображения при загрузке MainPage.xaml.

Добавление события PageLoaded в файл MainPage.xaml

В окне Обозреватель решений дважды щелкните файл MainPage.xaml, чтобы его открыть.
В представлении XAML щелкните внутри заголовка Page в верхней части страницы. На панели Свойства нажмите кнопку События .
Дважды щелкните внутри текстового поля Загружен, чтобы добавить в MainPage.xaml событие Page_Loaded.

Откроется файл MainPage.xaml.cs и на страницу добавится следующий код:
```
private void Page_Loaded(object sender, RoutedEventArgs e) {}
```

Вставьте следующий код между фигурными скобками после private void Page_Loaded(object sender, RoutedEventArgs e):

            TileCanvas tc = new TileCanvas();
            BitmapImage img = new BitmapImage();
            Uri baseUri = new Uri("ms-appx:///");
            img.UriSource = new Uri(baseUri, "Assets/FilmStrip.png");
            tc.ImageSource = img;
            FilmStrip.Children.Add(tc);

Нажмите клавиши CTRL+SHIFT+S, чтобы сохранить все изменения проекта.

Вернитесь в Blend. Появится сообщение с запросом о перезагрузке проекта. Нажмите кнопку Да.
Нажмите клавишу F5 для сборки и запуска проекта. Обратите внимание, что кинолента, как и ожидалось, заполняет область отображения приложения, но закрывает главную эмблему. Нажмите сочетание клавиш ALT+F4, чтобы закрыть приложение.
Обратите внимание, что в Blend на панели Объекты и временная шкала в иерархии объектов FilmStrip находится под MainLogo. Расположение объектов (также называемое ZIndex) в файле XAML определяется порядком в иерархии. Поместите объект FilmStrip над объектом MainLogo в иерархии, перетащив его мышью.

Совет

Либо вы можете определить свойство ZIndex на панели Свойства, а затем упорядочить элементы на панели Объекты и временная шкала по свойству с ZIndex, нажав Расположить по Z-порядку в левом нижнем углу панели.

Совет

Точка вставки обозначается синим графическим элементом.
Нажмите клавишу F5 для сборки и запуска приложения. Обратите внимание, что теперь кинолента находится за главной эмблемой. Нажмите сочетание клавиш ALT+F4, чтобы закрыть приложение.

Создание кнопки с цыпленком

Третье изображение в приложении PickaFlick — это изображение кнопки (ChickenSprite.png). Чтобы быстро создать кнопку из изображения, добавьте элемент управления Image на поверхность разработки и преобразуйте изображение в пользовательский элемент управления Button. Затем можно преобразовать шаблон Button, генерируемый автоматически при создании элемента управления Button.

Преобразование изображения в пользовательский элемент управления

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

Создание элемента управления ChickenButton

Убедитесь, что на панели Объекты и временная шкала выбран элемент Сетка. На панели Проекты откройте папку Активы и дважды щелкните файл ChickenSprite.png, чтобы добавить его на поверхность разработки.
На панели Объекты и временная шкала щелкните элемент управления Image и переименуйте его в ChickenSprite. Нажмите клавишу ВВОД.
В меню Инструменты выберите пункт Преобразование в элемент управления.

Откроется диалоговое окно Преобразование в элемент управления.
В диалоговом окне Преобразование в элемент управления в списке Элементы управления выберите Кнопка.
В текстовом поле Имя (ключ) введите ChickenButton.
В разделе Определить в будет выбрано Этот документ. В раскрывающемся списке Этот документ отобразится Страница: <без имени>. Нажмите кнопку ОК.

Элемент управления ChickenSprite типа Image преобразован в элемент управления Button. Обратите внимание, что шаблон кнопки теперь отображается на панели Объекты и временная шкала (этот режим также называется режимом редактирования шаблона). Этот шаблон вызывается в верхней части панели (ChickenButton (шаблон кнопки)) и отображается иерархия объектов шаблона (Grid, элемент управления ChickenSprite и ContentPresenter).

Blend — шаблон кнопки — Объекты и временная шкала

Настройка стиля шаблона элемента управления

Теперь можно настроить шаблон элемента управления. Сначала удалите элемент управления ContentPresenter, который отображает текст "Button" на поверхности разработки. Вы измените тип контейнера, а затем отображение, чтобы в контейнере была представлена только верхняя половина изображения. Другая половина изображения будет скрыта.

Изменение шаблона кнопки

Чтобы удалить элемент управления ContentPresenter на панели Объекты и временная шкала, щелкните правой кнопкой мыши [ContentPresenter] и выберите Удалить.
Измените тип контейнера макета. Для этого щелкните правой кнопкой мыши элемент Сетка и выберите Изменить тип макета, затем Viewbox.
Чтобы высота элемента Viewbox была равна половине высоты изображения, на панели Свойства в категории Макет задайте свойству Высота значение 180.
Высота изображения станет равной высоте элемента Viewbox. Чтобы это исправить, на панели Свойства в категории Внешний вид задайте свойству Растяжение значение Нет.

Теперь ширина изображения соответствует ширине элемента управления Viewbox, при этом отображается только верхняя часть изображения.
Чтобы выйти из режима редактирования после изменения шаблона, щелкните значок Вернуть для области значение в верхней части панели Объекты и временная шкала.
Чтобы переместить элемент управления Кнопка в центр области отображения приложения, перейдите к категории Макет справа от категории Поле, щелкните значок Дополнительные свойства и выберите Сброс. Щелкните значок По центру рядом со свойством HorizontalAlignment.

Добавление изменения визуального состояния

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

Чтобы добавить изменение состояния, требуется изменить шаблон ChickenButton.

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

На панели Объекты и временная шкала щелкните правой кнопкой мыши объект Кнопка, выберите Правка шаблона, затем Изменить текущий.

Либо щелкните Шаблон в строке навигации на вкладке документа.
На панели Объекты и временная шкала выберите ChickenSprite.
На панели Состояния выберите PointerOver.
На панели Свойства в категории Макет задайте свойству Поле (верхнее) значение -179.

Предупреждение

Когда свойство Поле (верхнее) имеет значение -180, отображаются верхняя и нижняя половины изображения.
Отключите запись состояний, щелкнув индикатор режима записи в окне конструктора на вкладках документов.
Чтобы выйти из режима редактирования шаблона, щелкните значок Вернуть для области значение в верхней части панели Объекты и временная шкала.

Нажмите клавишу F5 для сборки и запуска приложения. Укажите на изображение цыпленка, чтобы убедиться, что изображение цыпленка переходит из одного состояния в другое. Нажмите сочетание клавиш ALT+F4, чтобы закрыть приложение.

Теперь можно создать страницу сведений. Продолжение см. в разделе Создание первого приложения для Магазина Windows с помощью Blend, часть 2: страница сведений (XAML & C#).

Создание первого приложения для Магазина Windows с помощью Blend, часть 1: эталонная страница (XAML & C#)

Создание проекта из шаблона проекта

Создание проекта

Просмотр отражения изменений приложения в ИП Blend

Изменение фона MainPage.xaml

Добавление изображений в проект

Добавление изображений в проект

Настройка стиля изображений и элементов

Добавление элемента управления Image и настройка его стиля

Добавление основной эмблемы и настройка ее стиля

Добавление изображения, которое отрисовывается во время выполнения

Создание контейнера макета киноленты

Создание контейнера изображения киноленты

Переключение к Visual Studio и обратно

Создание нового класса

Создание файла TileCanvas.cs

Изменение файла MainPage.xaml.cs

Добавление ссылки на пространство имен Windows.UI.Xaml.Media.Imaging

Добавление события PageLoaded

Добавление события PageLoaded в файл MainPage.xaml

Создание кнопки с цыпленком

Преобразование изображения в пользовательский элемент управления

Создание элемента управления ChickenButton

Настройка стиля шаблона элемента управления

Изменение шаблона кнопки

Добавление изменения визуального состояния

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

Дополнительные ресурсы