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

Статья
06/05/2015

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

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

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

Примечание

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

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

Добавление в проект шаблона элементов

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

Мы добавим в существующий проект приложения PickaFlick шаблон элемента "Пустая страница". Эта страница будет страницей воспроизведения фильма.

Добавление шаблона элемента "Пустая страница"

На панели Проекты щелкните правой кнопкой мыши файл проекта и выберите Создать элемент.

Откроется диалоговое окно Создать элемент.
В списке шаблонов элементов выберите Пустая страница.
В текстовом поле Имя введите MovieDisplay.xaml и нажмите кнопку ОК, чтобы добавить шаблон элемента.

Теперь мы изменим фон MovieDisplay.xaml.

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

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

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

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

Приложения для Магазина Windows, написанные на C#, используют объекты .NET. Чтобы преобразовать объекты JSON в объекты .NET, приложению PickaFlick требуется сериализатор JSON. Вы можете загрузить сериализатор JSON с помощью Диспетчера пакетов NuGet в Microsoft Visual Studio или создать его самостоятельно. Для выполнения этой задачи перейдите из Blend в Visual Studio.

В этой процедуре мы перейдем в Visual Studio, чтобы загрузить Json.NET — сериализатор JSON, сохраним изменения и вернемся в Blend, чтобы продолжить работу.

Установка Json.NET с помощью Диспетчера пакетов NuGet

На панели Проекты щелкните правой кнопкой мыши PickaFlick и выберите Редактировать в Visual Studio.

В Visual Studio откроется проект PickaFlick. При появлении запроса о перегрузке файлов нажмите Обновить все.

Совет

Мы открыли Visual Studio в части 1 руководства, поэтому программа может быть скрыта Blend, после того как мы нажали Изменить в Visual Studio.
В окне Обозреватель решений щелкните правой кнопкой мыши файл проекта и выберите Управление пакетами NuGet.
В диалоговом окне Управление пакетами NuGet в текстовом поле Поиск введите Json.Net. Нажмите клавишу ВВОД.
В списке Результаты нажмите кнопку Установить справа от Json.NET.
Когда установка пакета будет завершена, нажмите Закрыть.

Домашняя страница Json.NET отобразится в окне документа, а ссылка на файл Newtonsoft.Json появится в папке Ссылки в окне Обозреватель решений.

Добавление в проект кода PickaFlick

Код для приложения PickaFlick извлекает данные с веб-сайта Rotten Tomatoes и выполняет сборку объектов .NET из извлеченных данных. Эти объекты можно будет напрямую использовать в приложении.

Добавление кода в проект

Щелкните правой кнопкой мыши Обозреватель решений, выберите Добавить, затем Новая папка.
В окне Обозреватель решений щелкните новую папку и введите DataModel.
Щелкните правой кнопкой мыши папку DataModel, выберите Добавить, затем Создать элемент или нажмите клавиши CTRL+SHIFT+A.
В диалоговом окне Добавление нового элемента щелкните элемент Класс и введите MovieData.cs. Нажмите кнопку Добавить.

В файле MovieData.cs замените class MovieData {} следующим кодом:

// This class represents a movie. It contains properties the describe the movie.
    public class MovieData
    {
        public MovieData(string title, string summary, string image)
        {
            this.Title = title;
            this.Summary = summary;
            this.Image = image;

        }
        public string Title { get; set; }
        public string Summary { get; set; }
        public string Image { get; set; }
    }

Нажмите клавиши CTRL+SHIFT+A. Убедитесь, что выбран элемент Класс. В диалоговом окне Добавление нового элемента щелкните элемент Класс и введите PickaFlickQuery.cs. Нажмите кнопку Добавить.

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

using System.IO;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using System.Collections.ObjectModel;
using System.Net;
using System.Net.Http;
using Newtonsoft.Json;
using System.IO.Compression;

Замените class PickaFlickQuery {} следующим кодом:

    public class PickaFlickQuery
    {
        protected Uri Uri { get; private set; }
        // A collection class used to store a list of MovieData objects.
        public ObservableCollection<MovieData> results = new ObservableCollection<MovieData>();
        private bool hasExecutedQuery;

        public PickaFlickQuery(Uri uri)
        {
            this.Uri = uri;
        }

        // Executes a query to obtain information about movies.
        // This property also stores the movies in a collection class.
        public ObservableCollection<MovieData> Results
        {
            get
            {
                if (!hasExecutedQuery)
                {
                    this.ExecuteQuery();
                }

                return this.results;
            }
        }

        // Calls a service to obtain a list of movies. This method stores each movie
        // in a collection object.
        private async void ExecuteQuery()
        {
            try
            {          
                HttpClient httpClient = new HttpClient();

                var response = await httpClient.GetAsync(this.Uri);

                string responseText = "";

                IEnumerable<string> headerValues = Enumerable.Empty<string>();

                if (response.Content.Headers.TryGetValues("Content-Encoding", out headerValues))
                {
                    foreach (string headerValue in response.Content.Headers.GetValues("Content-Encoding"))
                    {
                        if (headerValue == "gzip")
                        {
                            using (var responseStream = await response.Content.ReadAsStreamAsync())
                            using (var decompressedStream = new GZipStream(responseStream, CompressionMode.Decompress))
                            using (var streamReader = new StreamReader(decompressedStream))
                            {
                                responseText = streamReader.ReadToEnd();
                            }
                        }
                    }   
                }
                if (responseText == "")
                {
                    var stream = await response.Content.ReadAsStreamAsync();
                    var streamReader = new StreamReader(stream);
                    responseText = streamReader.ReadToEnd();
                }

            
                // Convert the stream to JSON so that it is easier to iterate through
                // each item in the stream.
                dynamic myObj = JsonConvert.DeserializeObject(responseText);
                dynamic movies = myObj.movies;

                // Iterate through the collection of JSON objects to obtain information
                // each movie in the collection.
                foreach (dynamic movie in movies)
                {
                    string title = movie.title;
                    string summary = movie.synopsis;
                    string image = movie.posters.detailed;

                    // Create a Moviedata object by using movie information and add 
                    // that object to a collection.
                    results.Add(new MovieData(title, summary, image));
                 }
             
                hasExecutedQuery = true;
            }
            catch (Exception)
            {
                hasExecutedQuery = false;
                showErrorMessage();
            }
        }
        private async void showErrorMessage()
        {
            var msg = new Windows.UI.Popups.MessageDialog
                ("The service is unavailable or there was a problem with the service.");

            msg.Commands.Add(new Windows.UI.Popups.UICommand("Try again?"));

            msg.Commands.Add(new Windows.UI.Popups.UICommand("I'll try again later."));

            msg.DefaultCommandIndex = 0;
            msg.CancelCommandIndex = 1;

            var results = await msg.ShowAsync();

            if (results.Label == "I'll try again later.")
            {
                hasExecutedQuery = true;
                this.Results.Clear();
            }
            else
            {
                hasExecutedQuery = false;
                this.Results.Clear();
            }


        }

    }

Нажмите клавиши CTRL+SHIFT+A. Убедитесь, что выбран элемент Класс. В диалоговом окне Добавление нового элемента щелкните элемент Класс и введите PickaFlickViewModel.cs. Нажмите кнопку Добавить.

В файле PickaFlickViewModel.cs замените class PickaFlickViewModel {} следующим кодом:

// Provides an object that returns movie data. You can bind to this class in the designer.
    // For example, by referencing this class in the ItemSource property of a GridView control. 
    public class PickaFlickViewModel
    {
// A Rotten Tomatoes API key is required. See https://go.microsoft.com/fwlink/?LinkId=313841 
        private static readonly string apikey = "Insert API Key Here";
        private static readonly string baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
        private static readonly string moviesSearchUrl = baseUrl + "/lists/movies/box_office.json?apikey=" + apikey;

        private static readonly Uri uri = new Uri(moviesSearchUrl);

        private readonly PickaFlickQuery query = new PickaFlickQuery(uri);
        
        // Property that returns a collection of MovieData objects. 
        public PickaFlickQuery Query
        {
            get
            {
                return this.query;
            }
        }
    }

Важно!

При наличии ключа API Rotten Tomatoes укажите вместо текста "Insert API Key Here" ключ.При отсутствии ключа приложение будет выполнено с ошибками.

Нажмите клавишу Ctrl+Shift+S, чтобы сохранить все изменения, а затем переключитесь обратно в Blend.
В Blend появится сообщение с запросом о перезагрузке проекта. Нажмите кнопку Да.

Задание DataContext

Задавая DataContext, вы указываете исходные данные для отображаемых в приложении объектов.

Как задать DataContext

Нажмите клавиши CTRL+B, чтобы выполнить сборку проекта. Тогда изменения, сделанные в Visual Studio, будут доступны в Blend.
Убедитесь, что файл MovieDisplay.xaml открыт, щелкнув вкладку MovieDisplay.xaml в верхней части окна документов. На панели Объекты и временная шкала выберите Сетка.
На панели Свойства справа от элемента DataContext щелкните Создать.
В диалоговом окне Выбор объекта щелкните PickaFlickViewModel. Нажмите кнопку ОК.

Совет

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

Создание представления данных

Чтобы создать элемент GridView с привязкой к данным, отображающий данные приложения для работы с фильмами, перетащите узел Results из раздела DataContext на панели Данные на поверхность разработки. Программа автоматически создаст элемент GridView и связанный с ним шаблон DataTemplate и отобразит данные на поверхности разработки.

В приложении PickaFlick не используется элемент управления GridView. В нем используется элемент управления FlipView, позволяющий быстро пролистывать элементы списка. Чтобы создать это представление, добавьте в проект элемент управления FlipView, а затем перетащите узел Результаты непосредственно на элемент FlipView на панели Объекты и временная шкала.

Примечание

Если создать представление данных в виде сетки, а затем его удалить, исходный шаблон DataTemplate останется в файле XAML.Если снова создать представление данных в виде сетки, будет создан еще один шаблон DataTemplate, а к значению x:Key добавится число.Например, если первый атрибут DataTemplate x:Key — MovieTemplate, то второй атрибут DataTemplate x:Key — MovieTemplate1.

Создание представления данных с помощью элемента управления FlipView

На панели Активы выберите Элементы управления и дважды щелкните FlipView.
В разделе Контекст данных панели Данные щелкните элемент Результаты: (MovieData) и перетащите его на элемент управления FlipView на панели Объекты и временная шкала.

Совет

Если узел Результаты не отображается, его можно найти, развернув узлы раздела Контекст данных.

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

Совет

Если на поверхности разработки появилось сообщение об исключении несанкционированного доступа, проверьте, что в коде правильно указан ключ API.

Настройка стиля представления данных

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

Настройка шаблона элемента

При перетаскивании панели Результаты на элемент управления FlipView программа автоматически создала шаблон данных. Его можно настроить так, чтобы он был больше похож на данные, отображаемые в законченном примере приложения.

Изменение созданного шаблона

Щелкните правой кнопкой мыши элемент FlipView на панели Объекты и временная шкала, выберите Правка дополнительных шаблонов, затем Правка созданных элементов (ItemTemplate) и нажмите Изменить текущий.
Удерживая клавишу CTRL, выберите на панели Объекты и временная шкала элементы Граница и StackPanel. Щелкните правой кнопкой мыши и выберите Удалить.
На панели Объекты и временная шкала выберите Сетка. На панели Свойства в разделе Макет справа от свойства Ширина выберите Задать Авто . Повторите это действие со свойством Высота.
Справа от свойства Поле щелкните Дополнительные свойства и выберите Сброс.

Теперь можно приступить к разработке пользовательского шаблона.

Создание сетки макета

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

Согласно этим правилам основная единица измерения приложения для Магазина Windows — 20 на 20 пикселей. Единицы подразделяются на подъединицы 5 на 5 пикселей. Макет создается на основе сетки, которую определяют верхний колонтитул, левое поле и область содержимого. Согласно правилам основными атрибутами сетки являются:

Верхний колонтитул страницы. Направляющая верхнего колонтитула страницы должна иметь отступ 5 единиц или 100 пикселей от верхнего края.
Левое поле. Левое поле должно иметь отступ 6 единиц или 120 пикселей от левого края.
Область содержимого. Верхнее поле должно иметь отступ 7 единиц или 140 пикселей от верхнего края.

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

Задавать размер строк и столбцов в сетке можно тремя способами, каждый из которых влияет на расположение объектов в сетке. Варианты задания размера:

Пиксель. Задается фиксированный размер в пикселях.
Звезда (*). Задается количество звезд, аналогично процентному значению ширины.
Авто. Задается относительная ширина. Размер объектов в сетке изменяется при изменении размера родительского объекта.

В сетке макета ширина столбцов задается как в пикселях, так и в звездах.

Создание столбцов сетки макета

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

Теперь в макете пять столбцов.
В редакторе значений второго столбца введите 1. Свойству Изменение размера задано значение Звезда (*). Не изменяйте его.
В редакторе значений третьего столбца введите 40. Задайте свойству Изменение размера значение Пиксель.
В редакторе значений четвертого столбца введите 1. Свойству Изменение размера задано значение Звезда (*). Не изменяйте его.
В редакторе значений пятого столбца введите 120. Задайте свойству Изменение размера значение Пиксель.

Создание строк макета

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

Вторая линия сетки будет размещена на 40 пикселей ниже первой, на отметке 140 пикселей.

Теперь в макете пять столбцов и три строки.

Сетка макета для PickaFlick в Blend

Можно приступить к добавлению содержимого в сетку. Сперва мы добавим эмблему.

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

Убедитесь, что на панели Объекты и временная шкала выбран элемент Сетка. На панели Проекты откройте папку Активы и дважды щелкните файл SmallLogo-Chicken.png, чтобы добавить его на поверхность разработки.
На панели Свойства в категории Макет задайте свойству HorizontalAlignment значение По центру , а свойству VerticalAlignment — По нижнему краю .
Справа от свойства Поле щелкните Дополнительные свойства и выберите Сброс.
В категории Общие задайте свойству Растяжение значение Нет.

Создание привязок данных и настройка их стиля

Чтобы доработать шаблон, мы добавим в него другие объекты и свяжем с ними данные. Можно настроить отображение объектов, чтобы данные выглядели определенным образом. В зависимости от того, к каким данным выполняется привязка, мы будем использовать разные типы объектов. Например, изображение афиши фильма будет привязано к элементу управления Image, а название и описание — к элементам управления TextBlock.

Добавление названия фильма и задание его положения

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

Объект Textblock будет добавлен в левый верхний угол поверхности разработки. Нажмите клавишу ESC, чтобы выйти из режима редактирования текста.
Чтобы разместить элемент Textblock в нужной ячейке сетки, на панели Свойства в категории Макетзадайте следующие параметры:
- Строка 0
  
  Элемент Textblock будет размещен в верхней строке.
- RowSpan 1
  
  Заголовок должен занимать только одну строку.
- Столбец 1
  
  Поскольку нумерация строк и столбцов начинается с 0, элемент Textblock будет размещен во втором столбце.
- ColumnSpan 3
  
  Объединение нескольких столбцов позволяет размещать более длинные заголовки на одной строке.
Элемент TextBlock отобразится в правой верхней части второго столбца.
Чтобы расположить элемент TextBlock в нужном ряду, задайте параметру VerticalAlignement значение По нижнему краю .

Теперь можно настроить стиль текста в элементе TextBlock. В следующей процедуре мы зададим шрифт, размер и цвет шрифта текста.

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

Согласно Руководству по шрифтам (приложения Магазина Windows), в заголовке приложения Windows 8 должен использоваться шрифт Segoe UI Light, 42pt.

На панели Свойства в категории Текст в списке Шрифт выберите Segoe UI Light.
Выберите размер шрифта в списке справа от списка Шрифт или введите его в редакторе значений. Поскольку это заголовок, укажите 42pt и нажмите клавишу ВВОД.
Обратите внимание, что нижняя часть символов находится над направляющей текстового блока.

Это дополнительное пространство предназначено для подстрочных элементов (нижней части букв нижнего регистра, например "у"). Нам требуется, чтобы основная часть букв находилась на направляющей, а подстрочные элементы — под ней. Чтобы откорректировать направляющую, в категории Макет задайте нижнему полю значение -18.

Теперь текст находится на направляющей.
На панели Свойства в категории Кисть щелкните пипетку выбора цвета .

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

Теперь можно связать данные названия фильма с элементом TextBlock.

Привязка данных названия фильма к объекту TextBlock

В категории Общие справа от свойства Текст щелкните Дополнительные свойства и выберите Создать привязку данных.
В диалоговом окне Создание привязки данных для [TextBlock].Text щелкните Название и нажмите кнопку ОК.

Далее мы добавим иллюстрацию фильма и настроим ее стиль.

Добавление иллюстрации фильма и задание ее положения

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

Новый объект Image, Источник которого — Temp.png, добавляется на поверхность разработки.
На панели Свойства в категории Макет задайте следующие свойства:
- Строка 3
- RowSpan 1
- Столбец 1
- ColumnSpan 1
Задайте свойству HorizontalAlignment значение По центру , а свойству VerticalAlignment — значение По верхнему краю.
Справа от свойства Поле щелкните Дополнительные свойства и выберите Сброс.

Не обращайте внимания на пропорции временного изображения. Мы откорректируем отображение, после того как привяжем изображение фильма к объекту Image.

Привязка иллюстрации фильма к объекту Image

В категории Общие справа от свойства Источник щелкните Дополнительные свойства и выберите Создать привязку данных.
В диалоговом окне Создание привязки данных для [Image].Source щелкните Изображение и нажмите кнопку ОК.
В категории Общие в списке Растяжение выберите Однородное.

Далее мы добавим описание фильма и настроем его стиль. Длинные описания фильмов по высоте могут превышать высоту экрана. Чтобы описание можно было прокручивать, мы добавим в шаблон объект ScrollViewer. Затем для отображения текста мы добавим в объект ScrollViewer элемент TextBlock.

Добавление описания фильма и задание его положения

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

Объект ScrollViewer будет добавлен в левый верхний угол поверхности разработки.
Выберите элемент ScrollViewer на панели Объекты и временная шкала, а затем в категории Макет справа от свойства Ширина выберите Задать Авто . Повторите это действие со свойством Высота.
Чтобы указать положение элемента Textblock, на панели Свойства в категории Макет задайте следующие параметры:
- Строка 2
- RowSpan 1
- Столбец 3
- ColumnSpan 1
Элемент ScrollViewer отобразится в левой верхней части третьей строки второго столбца.
Выберите элемент ScrollViewer на панели Объекты и временная шкала, а затем дважды щелкните элемент TextBlock на панели Активы, чтобы добавить второй элемент TextBlock на поверхность разработки.

Объект Textblock добавляется в объект ScrollViewer. Нажмите клавишу ESC, чтобы выйти из режима редактирования текста.

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

Привязка данных описания фильма к объекту TextBlock

В категории Общие справа от свойства Текст щелкните Дополнительные свойства и выберите Создать привязку данных.
В диалоговом окне Создание привязки данных для [TextBlock].Text щелкните Сводка и нажмите кнопку ОК.

Теперь можно настроить стиль текста описания.

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

Согласно Руководству по шрифтам (приложения Магазина Windows), в основном тексте приложения Windows 8 должен использоваться шрифт Segoe UI Semilight.

На панели Свойства в категории Текст в списке Шрифт выберите Segoe UI Semilight.
Выберите размер шрифта в списке справа от списка Шрифт или щелкните внутри редактора значений и найдите нужный размер шрифта с помощью клавиш СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ. Нажмите клавишу ВВОД. Подберите нужный размер шрифта, просматривая варианты на поверхности разработки.
На панели Свойства в категории Кисть щелкните пипетку выбора цвета и выберите один из представленных цветов или щелкните внутри редактора цвета и выберите цвет из палитры.

Просмотр отображения на разных устройствах

Blend показывает, как приложение выглядит в действительности, поэтому вы можете оценить внешний вид приложения, не запуская его. На панели Устройство вы также можете просмотреть, как приложение будет выглядеть на разных экранах.

Как включить параметр "Экран" на панели устройств

Чтобы включить параметр Экран, закройте режим редактирования шаблона, щелкнув Вернуть для области значение .

Совет

Набор доступных параметров зависит от типа шаблона проекта или элемента.Например, параметры Высокая контрастность и Тема применимы только к некоторым шаблонам проектов или элементов, в частности к шаблонам проектов "Приложение таблицы", "Приложение-концентратор" и "Приложение с разделением" и шаблонам элементов "Разделенная страница", "Страница элементов" и "Страница концентратора".

Некоторые параметры требуется включать в конструкторе манифеста.Например, если задать параметру Минимальная ширина значение 320px, появится сообщение с предупреждением, что этот параметр необходимо включить в манифесте приложения.Дополнительные сведения см. в разделе Настройка пакета приложения с помощью конструктора манифестов.

Панель "Устройство" в Blend

Добавление встроенного поведения

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

Добавление поведения NavigateToPageAction в элемент управления Button

Перейдите к файлу MainPage.xaml. Выберите элемент Кнопка на панели Объекты и временная шкала, а затем на панели Активы в категории Поведения дважды щелкните поведение NavigateToPageAction, чтобы добавить его в элемент Кнопка.

EventTriggerBehavior и NavigateToPageAction появятся на панели Объекты и временная шкала.
На панели Свойства найдите категорию Общие. В раскрывающемся списке TargetPage выберите MovieDisplay.xaml.

Совет

Либо вы можете щелкнуть EventTriggerBehavior на панели Объекты и временная шкала, а затем на панели Свойства нажать кнопку Действия (Коллекция).В диалоговом окне Редактор DependencyObjectCollection: действия в разделе Свойства в раскрывающемся списке TargetPage выберите MovieDisplay.

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

Нажмите сочетание клавиш ALT+F4, чтобы закрыть приложение.

Следующие шаги

Если бы это было настоящее приложение, мы бы перешли к его публикации. Дополнительные сведения о публикации приложения в Магазине Windows см. в разделе Обзор публикации приложения в Магазине Windows.

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

Добавление в проект шаблона элементов

Добавление шаблона элемента "Пустая страница"

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

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

Установка Json.NET с помощью Диспетчера пакетов NuGet

Добавление в проект кода PickaFlick

Добавление кода в проект

Задание DataContext

Как задать DataContext

Создание представления данных

Создание представления данных с помощью элемента управления FlipView

Настройка стиля представления данных

Настройка шаблона элемента

Изменение созданного шаблона

Создание сетки макета

Создание столбцов сетки макета

Создание строк макета

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

Создание привязок данных и настройка их стиля

Добавление названия фильма и задание его положения

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

Привязка данных названия фильма к объекту TextBlock

Добавление иллюстрации фильма и задание ее положения

Привязка иллюстрации фильма к объекту Image

Добавление описания фильма и задание его положения

Привязка данных описания фильма к объекту TextBlock

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

Просмотр отображения на разных устройствах

Как включить параметр "Экран" на панели устройств

Добавление встроенного поведения

Добавление поведения NavigateToPageAction в элемент управления Button

Следующие шаги

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