Лабораторная работа Разработка под Windows Phone 8: новые возможности



Дата30.12.2016
Размер3.94 Mb.
Просмотров245
Скачиваний0
ТипЛабораторная работа





WPH 201 IIL

Лабораторная работа

Разработка под Windows Phone 8: новые возможности

Содержание


Введение 3

Упражнение 1: Поддержка новых разрешений экрана в Windows Phone 8 4

Ресурсы, зависимые от разрешения 8

Экран заставки (Splash screen) и Тайлы (плитки) 9

Практическая часть 9

Упражнение 2: Живые плитки 11

1.Windows Phone 8 приложения могут закреплять плитки (тайлы) на стартовый экран (при явном разрешении от пользователя). 11

2.Существуют 4 типа живых плиток в Windows Phone 8 приложениях: 11

1.Standard tile: Единственный тип, доступный на Windows Phone 7.5, отображающий иконку и текст. Используйте данный тип плитки для обратной совместимости. Данный тип плитки в отличие от других типов не поддерживает широкий режим. 11

2.Cyclic tile: Цикличное отображение изображений и текста 11

3.Flip tile: Двусторонняя плитка. В отличие от стандартных плиток, поддерживается широкий режим. 11

4.Iconic tile: Статическая плитка с иконкой и числовым бейджем. В широком режиме кроме числового бейджа может быть дополнительно отображен текст. 11

3.Разработчики могут определить какой тип плиток приложение должно создавать в определенных ситуациях. Кроме того, пользователь может вручную изменить размер плиток, задав один из трех: small (малый), medium (средний), или wide (широкий). 12

Добавление переворачиваемой плитки (flip tile) 12

1.Приложение ContosoCookbook позволяет пользователям найти хороший рецепт. В данном примере мы изменим приложение Contoso Cookbook и добавим в него поддержку переворачиваемых (flip) вторичных плиток. 12

2.Для добавления поддержки закрепления вторичных плиток мы изменим функционал класса Common.Features. 12

1.Откройте файл Features.cs. 12

2.Найдите класс Tile. 12

3.Мы будем использовать переворачиваемую плитку для отображения детальной информации о рецепте на обратной стороне плитки. Замените содержимое метода SetTile следующим кодом: 12

a.FlipTileData tileData = new FlipTileData() 12

b.{ 12

c. //Front square data 12



d. Title = item.Title, 12

e. BackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative), 12

f. SmallBackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative), 12

h. //Back square data 12

i. BackTitle = item.Title, 12

j. BackContent = MakeString(item.Ingredients), 12

k. BackBackgroundImage = new Uri(item.Group.GetImageUri(), UriKind.Relative), 12

m. //Wide tile data 12

n. WideBackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative), 12

o. WideBackBackgroundImage = new Uri(item.Group.GetImageUri(),


UriKind.Relative), 12

p. WideBackContent = item.Directions 12

q.}; 13

s.ShellTile.Create(new Uri(navDataSource, UriKind.Relative), tileData, true); 13



u.Предыдущая версия метода использовала стандартную плитку. 13

v.Обратите внимание на свойства WideBackgroundImage, WideBackBackgroupImage и WideBackContent. С помощью них мы отображаем нужную информации на передней и обратной стороне плитки, а также на обратной стороне плитки, когда она отображается в широком режиме. 13

w.Если бы мы обновляли основную плитку приложения, можно было бы воспользоваться следующим кодом: 13

4.В методе SetTile используется метода MakeString для создания строкового представления рецепта. Добавьте код данного метода в класс: 13

a.private static string MakeString(ObservableCollection ingredients) 13

b.{ 13


c. string res = ""; 13

e. foreach (var ingredient in ingredients) 13

f. { 13

g. res += ingredient + "\n"; 13



h. } 13

j. return res; 13

k.} 13

l.Также добавьте необходимое пространство имен: 13



m.using System.Collections.ObjectModel; 13

5.Мы добавили поддержку переворачиваемых плиток. Протестируйте работу приложения: 14

1.Запустите приложение в эмуляторе. 14

a. 14


b.Figure 1 14

c.Recipe Group Page 14

1.Выберите одну из групп рецептов 14

d. 15


e.Figure 2 15

f.German Recipe Group Page 15

2.Выберите пункт Recipes в элементе управления Pivot. Если вы видите кнопку "Buy this App", нажмите на неё для отображения рецептов. 15

g. 15


h.Figure 3 15

i.German Recipes 15

j.Выберите рецепт. 15

k.
16

l.Figure 4 16

m.Saure Zipfel Recipe 16

3.Нажмите на кнопку "…" внизу экрана. Откроется панель приложения. 16

4.Нажмите на кнопку “pin" и закрепите вторичную плитку на стартовом экране. 16

5.Закрепите другой рецепт на стартовом экране 16

n.Проверьте наличие плиток с рецептами. 16

o.
17

p.Figure 5 17

q.Flip Tiles on the Start Screen 17

r.Нажмите на плитку и удерживайте до тех пор, пока не появятся иконки управления пликой. 17

s.
18

t.Figure 6 18

u.Editing a Flip Tile on the Start Screen 18

6.Вы можете изменить размер плитки. Протестируйте разные размеры плиток. 18

v. 18

w.Figure 7 18



x.Small Flip Tile on the Start Screen 19

y. 19


z.Figure 8 19

aa.Wide Flip Tile on the Start Screen 19

Упражнение 3: Фон экрана блокировки 19

6.На экране блокировки приложения могут отобразить следующую информацию: 19

7.Внимание: Иконка приложения, счетчик и текст, отображаемые на экране блокировки, берутся напрямую из основного тайла приложения. 19

8. 20


9.Figure 20

10.Windows Phone 8 Lock Screen 20

Практическая часть 20

1.В папке Sources\03\Source\Begin откройте в Visual Studio проект ContosoCookbook.sln. 21

2.Запустите приложение и посмотрите как оно работает. 21

a.Главная страница приложения MainPage.xaml позволяет пользователям выбрать группу рецептов. За отображение групп рецептов отвечает страница GroupDetailPage.xaml, которая использует элемент управления Pivot с двумя PivotItems для отображения информации о группе рецептов и самих рецептов в группе. 21

b.Когда пользователь выбирает рецепт, открывается страница RecipeDetailPage.xaml, отображающая информацию о рецепте. На этой странице есть панель приложения, по нажатию на одну из кнопок которой мы будем изменять фон экрана блокировки. 21

3.В окне Solution Explorer в Visual Studio выберите папку Properties, а в ней файл манифеста приложения WMAppManifest.xml. 21

4.В контекстном меню файла WMAppManifest.xml, выберите “Open with”. 21

c. 21


d.Figure 21

e.Opening the Application Manifest 21

5.Выберите “XML (text) Editor”, и нажмите OK. 22

6.Добавьте новый элемент в секцию манифеста. Этот элемент будет декларировать то, что приложение является провайдером фона экрана блокировки. Если в файле нет секции добавьте всю секцию, приведенную ниже. 22

f.XML 22

g. 22

h.

i.ExtensionName="LockScreen_Background" 22

j.ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" 22

k.TaskID="_default" /> 22

l. 22

m.Внимание Секция должна находиться ниже секции . 22

2.Внимание: В приложении ContosoCookbook изменение фона экрана блокировки инициируется действием пользователя. Другим приложениям может потребоваться периодическое изменение фона экрана блокировки. Этого можно достичь с использованием фонового агента. 22

3.Мы изменим существующую реализацию кнопки “Favorite” на панели приложения для смены фона экрана блокировки при её нажатии. 22

a. 23

b.Figure 3 23



c.Favorite Recipe Button 23

1.Откройте файл RecipeDetailPage.xaml.cs. 23

2.Найдите метод btnPinToStart_Click. 23

3.Замените комментарий “Setup lock screen” на следующий код: 23

d.C# 23

e. // Setup lock screen. 23



f. if (!LockScreenManager.IsProvidedByCurrentApplication) 23

g. { 23


h. //If you're not the provider, this call will prompt the user for permission. 23

i. //Calling RequestAccessAsync from a background agent is not allowed. 23

j. await LockScreenManager.RequestAccessAsync(); 23

k. } 23


m. if (LockScreenManager.IsProvidedByCurrentApplication) 24

n. { 24


o. Uri imageUri = new Uri("ms-appx://" + item.ImagePath.LocalPath, 24

p.UriKind.RelativeOrAbsolute); 24

q. LockScreen.SetImageUri(imageUri); 24

r.} 24


s.
Свойство LockScreenManager.IsProvidedByCurrentApplication проверяет является ли текущее приложение поставщиком фона экрана блокировки. Если не является, то выполняется явный запрос с помощью метода LockScreenManager.RequestAccessAsync. 24

t.В конце метод LockScreen.SetImageUri меняет фон экрана блокировки. 24

u.Внимание: Вызывать метод RequestAccessAsync следует только если приложение не является поставщиком фона экрана блокировки. 24

1.В Visual Studio, откройте меню Tools. 24

2.Выберите пункт Simulation Dashboard. Откроется окно Simulation Dashboard. 24

v. 25


w.Figure 4 25

x.Simulation Dashboard Tool Window 25

y.Это окно позволяет эмулировать различную скорость сети, открывать и закрывать экран блокировки, а также вызывать оповещения. Переключая режимы “Locked” и “Unlocked” вы можете открывать и закрывать экран блокировки. 25

3.Запустите приложение ContosoCookbook. 25

4.Выберите рецепт. 25

5.В панели приложения нажмите на кнопку, “Favorite” (иконка с сердцем): 25

z. 26

aa.Figure 5 26



ab.Favorite (Heart) Button in the Application Bar 26

6.Разрешите приложению изменять экран блокировки. 26

ac. 27

ad.Figure 27



7.Вернитесь к окну Simulation Dashboard в Visual Studio. 27

8.Выберите режим Locked и вернитесь к эмулятору. Фон экрана блокировки изменится. 27

ae. 27

af.Figure 7 27



ag.Lock Screen with Background Provided by Contoso Cookbook 27

Упражнение 4: Ассоциация с типом файлов 27

4.Файлы – один из способов обмена данными между приложениями. Приложение декларирует файлы каких типов оно может открывать, а операционная система перенаправляет запросы на открытия данного типа файлов приложению. 27

5.Добавим в приложение ContosoCookbook поддержку типов файлов “.recipe” и “.rcp”. 27

Декларирование поддержки расширений “.recipe” и “.rcp”: 28

1.Откройте проект ContosoCookbook.sln из папки Sources/04/EX1/Begin. 28

1.Откройте XML разметку манифеста приложения WMAppManifest.xml. 28

2.Добавьте в секцию Extensions следующий код до тега


: 28

a.XML 28


a.Вы можете добавить до 20 файловых расширений (Extensions). Каждое расширение FileTypeAssociation представляет собой не просто расширение файла, а является набором расширений, использующих одинаковый логотип и другие параметры. 28

b.Мы указали только несколько атрибутов: Name, TaskID and NavUriFragment. Атрибут Name является опциональным. 28

c.После задания атрибутов можно указать логотипы. Логотипы не являются обязательными. Но, если они указываются, необходимо обязательно задать логотипы для 3х размеров: 28

d.Далее приведен пример задания логотипов:


28

e.XML 28


g.Важно: Существуют зарезервированные файловые расширения, которые вы не можете использовать в своих приложениях 29

Добавление кода обработки файловых ассоциаций: 29

1.В папке Common проекта приложения находится файл CookbookUriMapper.cs. 29

В нём содержится код класса CookbookUriMapper для Uri Mapper. CookbookUriMapper устанавливается в качестве Uri Mapper в файле App.xaml.cs: 29

RootFrame.UriMapper = new CookbookUriMapper(); 29

2.Добавьте в класс CookbookUriMapper следующее поле: 29

a.C# 29

3.Найдите метод MapUri и добавьте следующий код: 29



a.C# 29

b.if (tempUri.Contains("/FileTypeAssociation")) 29

c.{ 29

e. if (tempUri.Contains("fileToken")) 29



f. { 29

g. return GetFileMappedUri(tempUri); 29

h. } 29

i.Данный код проверяет, является ли запрос запросом файловой ассоциации п передает управление функции GetFileMappedUri для обработки запроса. 29



4.Добавьте в класс функцию GetFileMappedUri: 29

a.C# 29


b.private Uri GetFileMappedUri(string uri) 29

c.{ 29


d. string fileToken = ""; 30

f. // Extract parameter values from URI. 30

g. if (uri.IndexOf(FileTemplate) > -1) 30

h. { 30


i. int groupIdLen = uri.IndexOf("=", 0); 30

j. fileToken = uri.Substring(groupIdLen + 1); 30

k. } 30

m. string NewURI = String.Format("/{0}?ID={1}&Command=HandleFile", 30



n. TargetPageName, fileToken); 30

p. return new Uri(NewURI, UriKind.Relative); 30

q.} 30

r.Этот код обрабатывает запрос и передает управление странице RecipeDetailPage.xaml, которая обрабатывает содержимое файла. 30



5.Откройте файл RecipeDetailPage.xaml.cs и найдите метод OnNavigateTo который вызывается потому, что класс UriMapper перенаправляет запрос данной странице. Замените метод OnNavigatedTo на следующий код: 30

a.C# 30


31

1.Запустите приложение для регистрации файловой ассоциации 31

2.Существуют 3 сценария тестирования файловой ассоциации: 31

Тестирование файловой ассоциации с помощью другого приложения: 31

2.Создайте новое Windows Phone приложение. 31

1.Для тестирования файловой ассоциации приложение должно иметь соответствующие файлы в изолированном хранилище. Добавьте новый текстовый файл в приложение и назовите его 1003.rcp или 1003.recipe. 31

2.Добавьте следующий код в файл: 31

a.XML 31


3.Откройте свойства файла (панель Properties). 31

4.Установите build action в значение Content. 31

5.Добавьте на странице MainPage.xaml кнопку. 31

6.В обработчик нажатия кнопки добавьте следующий код: 31

a.C# 31

b.StorageFolder local = Windows.Storage.ApplicationData.Current.LocalFolder; 32



c. 32

d.if (local != null) 32

e.{ 32

f. await WriteFiles(); 32



h. var filenames = await local.GetFilesAsync(); 32

i. StorageFile recipeFile = await local.GetFileAsync("1003.rcp"); 32

k. if (recipeFile != null) 32

l. { 32


m. var res = await Windows.System.Launcher.LaunchFileAsync(recipeFile); 32

n. } 32


o.} 32

p.Данный код вызывает метод WriteFiles, который загружает файл 1003.rcp в изолированное хранилище. А после этого файл открывается с помощью функции Launcher.LaunchFileAsync. 32

q.Добавьте метод WriteFiles: 32

r.C# 32


s.private async Task WriteFiles() 32

t.{ 32


u. StreamReader stream = new 32

v. StreamReader(TitleContainer.OpenStream("1003.rcp")); 32

x. StorageFolder local = Windows.Storage.ApplicationData.Current.LocalFolder; 32

y. var file = await local.CreateFileAsync("1003.rcp", 32

z. CreationCollisionOption.ReplaceExisting); 32

aa. 32


ac. string fileAsString = stream.ReadToEnd(); 32

ad. byte[] fileBytes = System.Text.Encoding.UTF8.GetBytes(fileAsString); 32

af. var s = await file.OpenStreamForWriteAsync(); 33

ag. s.Write(fileBytes, 0, fileBytes.Length); 33

ai. stream.Close(); 33

aj. s.Close(); 33

ak.} 33

7.Добавьте ключевое слово “async” в обработчик события нажатия кнопки. 33



a.C# 33

b.private async void Button_Click_1(object sender, RoutedEventArgs e) 33

c.{ 33

d.... 33




Введение


Описание целей лабораторной

Виртуальной среды запска

Учетных данных для входа в виртуальные машины

Имя инструктора


Упражнение 1: Поддержка новых разрешений экрана в Windows Phone 8


Операционная система Windows Phone 8 поддерживает 3 разрешения экрана: WVGA, WXGA, и 720p. Это отличает её от Windows Phone 7.x, которая поддерживала только одно WVGA разрешение (800 на 480 пикселей). Хотя изначально задумывалось, что и в версии 7.x будет поддерживаться несколько разрешений, устройства с другими разрешениями так и не появились.
Поддерживаемые в Windows Phone 8 разрешения экрана приведены в таблице:

Разрешение

Разрешение

Соотношение сторон (Aspect ratio)

Разница по сравнению с Windows Phone OS 7.x

Масштабированное разрешение

WVGA

480 × 800

15:9

Нет. Данное разрешение поддерживалось в WP7.x

480 × 800

WXGA

768 × 1280

15:9

1.6x (масштабирование)

480 × 800

720p

720 × 1280

16:9

1.5x (масштабирование), Высота больше на 53 пикселя после масштабирования

480 × 853



Важно отметить, что у WVGA и WXGA экранов соотношение сторон 15:9, а у экранов с разрешением 720p соотношение сторон 16:9. Разница в соотношении сторон наглядно видна на следующем рисунке. Экран с разрешением 720p (720x1280) немного уже экрана с WXGA разрешением (768 x 1280). За счет этого кажется, что он вытянут по высоте.



Для того, чтобы поддерживать разные соотношения сторон, не стоит жестко задавать ширину и высоту элементов в XAML разметке или C# коде. Лучше использовать менеджеры размещения, такие как Grid, и проценты, а также * или Auto при задании размеров.

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

Поэтому при любом физическом разрешении экрана логическое разрешение будет составлять 480 единиц по горизонтали (также как и на Windows Phone 7.x).

В зависимости от экрана, логическое разрешение по вертикали может составлять 800 единиц (как и на Windows Phone 7.x) в случае WVGA и WXGA экранов, или 853 единицы в случае 720p экранов.

Ещё раз хочется отметить, что с программной точки зрения разрешение экрана может быть либо 480x800 единиц, либо 480x853 единицы. С физическими разрешениями экрана при создании XAML разметки вам работать не требуется.

Допустим, вы запускаете Windows Phone 8 приложение. В этом случае, если экран телефона имеет WVGA разрешение (480 × 800), то приложение запускается “как есть”. Один логический пиксель в приложении будет равен одному физическому пикселю на экране. Если экран телефона имеет разрешение WXGA (768 × 1280), то интерфейс приложения масштабируется в 1.6 раза. При этом один логический пиксель будет равен 1.6 физическому пикселю (дробные значения округляются). Если экран телефона имеет разрешение 720p, то приложение масштабируется в 1.5 раза, при этом добавляются 53 логических пикселя по высоте. Так как приложения имеет по большей части векторный интерфейс, это не должно стать проблемой.

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

При разработке Windows Phone приложений в Visual Stduio на панели Device можно выбрать какое разрешение будет использоваться для визуального дизайнера.

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




Ресурсы, зависимые от разрешения


Не все ресурсы являются векторными. Фотографии, растровые иконки, видео имеют конкретное разрешение. Кроме того, данные ресурсы имеют большой размер и обычно они занимают существенную долю размера пакета приложения, устанавливаемого на телефоны пользователей. Было бы слишком расточительно включать в приложение несколько версий тяжелых изображений и других ресурсов для разных разрешений, как это рекомендуется делать в случае с Windows Sore приложениями для Windows 8.

Устройства под управлением Windows Phone имеют более скромные технические характеристики, чем устройства под управлением Windows 8. Поэтому с случае с Windows Phone рекомендуется включать только ресурсы для WXGA разрешения (768 × 1280). Таким образом ресурсы будут иметь максимальное качество и будут автоматически масштабироваться под меньшие разрешения.

Например, какое-либо изображение в приложении имеет физические размеры 160 на 160 пикселей. При этом при работе с ним в приложении указывается, что размер данного изображения – 100 на 100 логических единиц:

<Image Width="100" Height="100" Source="Image.png">Image>

При отображении на WXGA экране 100 логических единиц будут умножены на 1.6 и изображение будет иметь размер 160 на 160 физических пикселей. При этом на WVGA экране изображение будет масштабировано и займет 100 на 100 физических пикселей. А на экране с разрешением 720p изображение займет 150 на 150 физических пикселей.

Так как поддерживаемые экраны имеют разное соотношение сторон, иногда могут потребоваться разные фоновые изображения в зависимости от разрешения. Вы можете с помощью C# кода установить нужное изображение.

Чтобы узнать текущее физическое разрешение экрана необходимо проверить фактор масштабирования. Если фактор масштабирования равен 100% – разрешение экрана WVGA, если 160% – разешение экрана WXGA. А если 150%, то разрешение экрана 720p. Для проверки фактора масштабирования используется свойство Application.Current.Host.Content.ScaleFactor.



Uri imgUri = null;
if (Application.Current.Host.Content.ScaleFactor == 100)

{

//WVGA

imgUri = new Uri("Assets/Image.Screen-WVGA.png", UriKind.Relative);

}

else if (Application.Current.Host.Content.ScaleFactor == 150)

{

//720p

imgUri = new Uri("Assets/Image.Screen-720p.png", UriKind.Relative);

}

else if (Application.Current.Host.Content.ScaleFactor == 160)

{

//WXGA

imgUri = new Uri("Assets/Image.Screen-WXGA.png", UriKind.Relative);

}

Экран заставки (Splash screen) и Тайлы (плитки)


Для тайлов (плиток) и иконок всегда используйте изображения для WXGA разрешения. Для создания экрана заставки вы также можете использовать один файл SplashScreenImage.jpg разрешением 768 на 1280 пикселей. Система автоматически произведёт масштабирование для других разрешений как в случае изображений для плиток, так и в случае экрана заставки.

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



  • SplashScreenImage.Screen-WVGA.jpg

  • SplashScreenImage.Screen-WXGA.jpg

  • SplashScreenImage.Screen-720p.jpg

Практическая часть


Для демонстрации возможностей определения параметров экрана, создайте новое Windows Phone приложение, используя шаблон Windows Phone App. Назовите приложение PhoneScaleApp.

В XAML разметке страницы MainPage.xaml замените менеджер размещения Grid:



<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
Grid>

На разметку для отображения параметров экрана:



<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<StackPanel Orientation="Horizontal">

<TextBlock Style="{StaticResource PhoneTextNormalStyle}">HeightTextBlock>

<TextBlock x:Name="TextHeight"

Style="{StaticResource PhoneTextNormalStyle}">TextBlock>

StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Style="{StaticResource PhoneTextNormalStyle}">WidthTextBlock>

<TextBlock x:Name="TextWidth"

Style="{StaticResource PhoneTextNormalStyle}">TextBlock>

StackPanel>
<StackPanel Orientation="Horizontal">

<TextBlock Style="{StaticResource PhoneTextNormalStyle}">ScaleTextBlock>

<TextBlock x:Name="TextScale"

Style="{StaticResource PhoneTextNormalStyle}">TextBlock>

StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Style="{StaticResource PhoneTextNormalStyle}">ResolutionTextBlock>

<TextBlock x:Name="TextResolution"

Style="{StaticResource PhoneTextNormalStyle}">TextBlock>

StackPanel>

StackPanel>

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



public partial class MainPage

{

public MainPage()

{

InitializeComponent();
TextHeight.Text = Application.Current.Host.Content.ActualHeight.ToString();

TextWidth.Text = Application.Current.Host.Content.ActualWidth.ToString();

TextScale.Text = Application.Current.Host.Content.ScaleFactor.ToString();
switch (Application.Current.Host.Content.ScaleFactor)

{

case 100:
TextResolution.Text = "WVGA";

break;

case 150:

TextResolution.Text = "720P";

break;

case 160:

TextResolution.Text = "WXGA";

break;

}

}

}

Запустите приложение и протестируйте его работу под эмуляторами с разным разрешением.




Упражнение 2: Живые плитки


1.Windows Phone 8 приложения могут закреплять плитки (тайлы) на стартовый экран (при явном разрешении от пользователя).

2.Существуют 4 типа живых плиток в Windows Phone 8 приложениях:



    1. Standard tile: Единственный тип, доступный на Windows Phone 7.5, отображающий иконку и текст. Используйте данный тип плитки для обратной совместимости. Данный тип плитки в отличие от других типов не поддерживает широкий режим.

    2. Cyclic tile: Цикличное отображение изображений и текста

    3. Flip tile: Двусторонняя плитка. В отличие от стандартных плиток, поддерживается широкий режим.

    4. Iconic tile: Статическая плитка с иконкой и числовым бейджем. В широком режиме кроме числового бейджа может быть дополнительно отображен текст.

3.Разработчики могут определить какой тип плиток приложение должно создавать в определенных ситуациях. Кроме того, пользователь может вручную изменить размер плиток, задав один из трех: small (малый), medium (средний), или wide (широкий).

Добавление переворачиваемой плитки (flip tile)


1.Приложение ContosoCookbook позволяет пользователям найти хороший рецепт. В данном примере мы изменим приложение Contoso Cookbook и добавим в него поддержку переворачиваемых (flip) вторичных плиток.



Задача 1 – Поддержка переворачиваемых плиток

2.Для добавления поддержки закрепления вторичных плиток мы изменим функционал класса Common.Features.



    1. Откройте файл Features.cs.

    2. Найдите класс Tile.

3.Мы будем использовать переворачиваемую плитку для отображения детальной информации о рецепте на обратной стороне плитки. Замените содержимое метода SetTile следующим кодом:

      1. C#

a.FlipTileData tileData = new FlipTileData()

b.{

c. //Front square data

d. Title = item.Title,

e. BackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative),

f. SmallBackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative),

g.

h. //Back square data

i. BackTitle = item.Title,

j. BackContent = MakeString(item.Ingredients),

k. BackBackgroundImage = new Uri(item.Group.GetImageUri(), UriKind.Relative),

l.

m. //Wide tile data

n. WideBackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative),

o. WideBackBackgroundImage = new Uri(item.Group.GetImageUri(),
UriKind.Relative),

p. WideBackContent = item.Directions

q.};

r.

s.ShellTile.Create(new Uri(navDataSource, UriKind.Relative), tileData, true);

t.

u.Предыдущая версия метода использовала стандартную плитку.



v.Обратите внимание на свойства WideBackgroundImage, WideBackBackgroupImage и WideBackContent. С помощью них мы отображаем нужную информации на передней и обратной стороне плитки, а также на обратной стороне плитки, когда она отображается в широком режиме.

w.Если бы мы обновляли основную плитку приложения, можно было бы воспользоваться следующим кодом:



      1. C#

  1. var first = ShellTile.ActiveTiles.First();

  2. if (first != null)

  3. {

  4. first.Update(tileData);

  5. }

4.В методе SetTile используется метода MakeString для создания строкового представления рецепта. Добавьте код данного метода в класс:

      1. C#

a.private static string MakeString(ObservableCollection<string> ingredients)

b.{

c. string res = "";

d.

e. foreach (var ingredient in ingredients)

f. {

g. res += ingredient + "\n";

h. }

i.

j. return res;

k.}

l.Также добавьте необходимое пространство имен:



      1. C#

m.using System.Collections.ObjectModel;



Задача 2 – Тестирование вторичных плиток

5.Мы добавили поддержку переворачиваемых плиток. Протестируйте работу приложения:



    1. Запустите приложение в эмуляторе.

a.

b.Figure 1

c.Recipe Group Page


    1. Выберите одну из групп рецептов

d.

e.Figure 2

f.German Recipe Group Page


    1. Выберите пункт Recipes в элементе управления Pivot. Если вы видите кнопку "Buy this App", нажмите на неё для отображения рецептов.

g.

h.Figure 3

i.German Recipes

j.Выберите рецепт.

k.

l.Figure 4

m.Saure Zipfel Recipe


    1. Нажмите на кнопку "…" внизу экрана. Откроется панель приложения.

    2. Нажмите на кнопку “pin" и закрепите вторичную плитку на стартовом экране.

    3. Закрепите другой рецепт на стартовом экране

n.Проверьте наличие плиток с рецептами.

o.

p.Figure 5

q.Flip Tiles on the Start Screen

r.Нажмите на плитку и удерживайте до тех пор, пока не появятся иконки управления пликой.

s.

t.Figure 6

u.Editing a Flip Tile on the Start Screen



    1. Вы можете изменить размер плитки. Протестируйте разные размеры плиток.

v.

w.Figure 7

x.Small Flip Tile on the Start Screen

y.

z.Figure 8

aa.Wide Flip Tile on the Start Screen






Упражнение 3: Фон экрана блокировки


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

6.На экране блокировки приложения могут отобразить следующую информацию:

Фоновое изображение

Иконка приложения

Счетчик

Текст


7.Внимание: Иконка приложения, счетчик и текст, отображаемые на экране блокировки, берутся напрямую из основного тайла приложения.

8.

9.Figure

10.Windows Phone 8 Lock Screen

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

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

Цели

Изменим фон экрана блокировки программно

Протестируем изменение фона экрана блокировки на симуляторе





Практическая часть


В этом упражнении мы изменим приложение ContosoCookbook, чтобы можно было изменить фон экрана блокировки, когда пользователь выбирает любимый рецепт.

Задача 1 – Изменение манифеста приложения

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


    1. В папке Sources\03\Source\Begin откройте в Visual Studio проект ContosoCookbook.sln.

    2. Запустите приложение и посмотрите как оно работает.

a.Главная страница приложения MainPage.xaml позволяет пользователям выбрать группу рецептов. За отображение групп рецептов отвечает страница GroupDetailPage.xaml, которая использует элемент управления Pivot с двумя PivotItems для отображения информации о группе рецептов и самих рецептов в группе.

b.Когда пользователь выбирает рецепт, открывается страница RecipeDetailPage.xaml, отображающая информацию о рецепте. На этой странице есть панель приложения, по нажатию на одну из кнопок которой мы будем изменять фон экрана блокировки.



    1. В окне Solution Explorer в Visual Studio выберите папку Properties, а в ней файл манифеста приложения WMAppManifest.xml.

    2. В контекстном меню файла WMAppManifest.xml, выберите “Open with”.

c.

d.Figure

e.Opening the Application Manifest


    1. Выберите “XML (text) Editor”, и нажмите OK.

    2. Добавьте новый элемент в секцию манифеста. Этот элемент будет декларировать то, что приложение является провайдером фона экрана блокировки. Если в файле нет секции добавьте всю секцию, приведенную ниже.

f.XML

g.

h.

i.ExtensionName="LockScreen_Background"

j.ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}"

k.TaskID="_default" />

l.>

m.Внимание Секция должна находиться ниже секции .





Задача 2 – Добавление кода изменения фона экрана блокировки

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

2.Внимание: В приложении ContosoCookbook изменение фона экрана блокировки инициируется действием пользователя. Другим приложениям может потребоваться периодическое изменение фона экрана блокировки. Этого можно достичь с использованием фонового агента.

3.Мы изменим существующую реализацию кнопки “Favorite” на панели приложения для смены фона экрана блокировки при её нажатии.

a.

b.Figure 3

c.Favorite Recipe Button


    1. Откройте файл RecipeDetailPage.xaml.cs.

    2. Найдите метод btnPinToStart_Click.

    3. Замените комментарий “Setup lock screen” на следующий код:

d.C#

e. // Setup lock screen.

f. if (!LockScreenManager.IsProvidedByCurrentApplication)

g. {

h. //If you're not the provider, this call will prompt the user for permission.

i. //Calling RequestAccessAsync from a background agent is not allowed.

j. await LockScreenManager.RequestAccessAsync();

k. }

l.

m. if (LockScreenManager.IsProvidedByCurrentApplication)

n. {

o. Uri imageUri = new Uri("ms-appx://" + item.ImagePath.LocalPath,

p.UriKind.RelativeOrAbsolute);

q. LockScreen.SetImageUri(imageUri);

r.}

s.
Свойство LockScreenManager.IsProvidedByCurrentApplication проверяет является ли текущее приложение поставщиком фона экрана блокировки. Если не является, то выполняется явный запрос с помощью метода LockScreenManager.RequestAccessAsync.

t.В конце метод LockScreen.SetImageUri меняет фон экрана блокировки.

u.Внимание: Вызывать метод RequestAccessAsync следует только если приложение не является поставщиком фона экрана блокировки.





Задача 3 – Тестирование приложения

Эмулятор Windows Phone интегрирован с Visual Studio, что позволяет тестировать возможности, связанные с экраном блокировки.



    1. В Visual Studio, откройте меню Tools.

    2. Выберите пункт Simulation Dashboard. Откроется окно Simulation Dashboard.

v.

w.Figure 4

x.Simulation Dashboard Tool Window

y.Это окно позволяет эмулировать различную скорость сети, открывать и закрывать экран блокировки, а также вызывать оповещения. Переключая режимы “Locked” и “Unlocked” вы можете открывать и закрывать экран блокировки.



    1. Запустите приложение ContosoCookbook.

    2. Выберите рецепт.

    3. В панели приложения нажмите на кнопку, “Favorite” (иконка с сердцем):

z.

aa.Figure 5

ab.Favorite (Heart) Button in the Application Bar


    1. Разрешите приложению изменять экран блокировки.

ac.

ad.Figure




Figure Lock Screen Request

Lock Screen Background Provider Prompt

    1. Вернитесь к окну Simulation Dashboard в Visual Studio.

    2. Выберите режим Locked и вернитесь к эмулятору. Фон экрана блокировки изменится.

ae.

af.Figure 7

ag.Lock Screen with Background Provided by Contoso Cookbook





Упражнение 4: Ассоциация с типом файлов


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

Задача 1 – Изменение в манифесте приложения

5.Добавим в приложение ContosoCookbook поддержку типов файлов “.recipe” и “.rcp”.

Декларирование поддержки расширений “.recipe” и “.rcp”:


    1. Откройте проект ContosoCookbook.sln из папки Sources/04/EX1/Begin.

1.Откройте XML разметку манифеста приложения WMAppManifest.xml.

2.Добавьте в секцию Extensions следующий код до тега :

a.XML



  1. NavUriFragment="fileToken=%s">



  2. .rcp

  3. .recipe







a.Вы можете добавить до 20 файловых расширений (Extensions). Каждое расширение FileTypeAssociation представляет собой не просто расширение файла, а является набором расширений, использующих одинаковый логотип и другие параметры.

b.Мы указали только несколько атрибутов: Name, TaskID and NavUriFragment. Атрибут Name является опциональным.

c.После задания атрибутов можно указать логотипы. Логотипы не являются обязательными. Но, если они указываются, необходимо обязательно задать логотипы для 3х размеров:

Small. 33 X 33 используется в аттачах электронной почты.

Medium. 69 X 69 используется в хабе Office.

Large. 176 X 176 используется браузером.

d.Далее приведен пример задания логотипов:


e.XML







  1. SmallFileIcon.png

  2. MediumFileIcon.png

  3. LargeFileIcon.png





  4. .rcp

  5. .recipe





f.

g.Важно: Существуют зарезервированные файловые расширения, которые вы не можете использовать в своих приложениях

Задача 2 – Uri Mapper и File Reader

Для обработки расширений файлов создаётся новый Uri Mapper (наследуемый от UriMapperBase).


Добавление кода обработки файловых ассоциаций:


1.В папке Common проекта приложения находится файл CookbookUriMapper.cs.

В нём содержится код класса CookbookUriMapper для Uri Mapper. CookbookUriMapper устанавливается в качестве Uri Mapper в файле App.xaml.cs:

RootFrame.UriMapper = new CookbookUriMapper();

2.Добавьте в класс CookbookUriMapper следующее поле:

a.C#

private static string FileTemplate = "/FileTypeAssociation?fileToken=";

3.Найдите метод MapUri и добавьте следующий код:

a.C#

b.if (tempUri.Contains("/FileTypeAssociation"))

c.{


tempUri = HttpUtility.UrlDecode(tempUri);

d.

e. if (tempUri.Contains("fileToken"))



f. {

g. return GetFileMappedUri(tempUri);

h. }

}

i.Данный код проверяет, является ли запрос запросом файловой ассоциации п передает управление функции GetFileMappedUri для обработки запроса.



4.Добавьте в класс функцию GetFileMappedUri:

a.C#

b.private Uri GetFileMappedUri(string uri)

c.{


d. string fileToken = "";

e.

f. // Extract parameter values from URI.



g. if (uri.IndexOf(FileTemplate) > -1)

h. {


i. int groupIdLen = uri.IndexOf("=", 0);

j. fileToken = uri.Substring(groupIdLen + 1);

k. }

l.

m. string NewURI = String.Format("/{0}?ID={1}&Command=HandleFile",



n. TargetPageName, fileToken);

o.

p. return new Uri(NewURI, UriKind.Relative);



q.}

r.Этот код обрабатывает запрос и передает управление странице RecipeDetailPage.xaml, которая обрабатывает содержимое файла.

5.Откройте файл RecipeDetailPage.xaml.cs и найдите метод OnNavigateTo который вызывается потому, что класс UriMapper перенаправляет запрос данной странице. Замените метод OnNavigatedTo на следующий код:

a.C#



protected override async void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

{

string UniqueId = "";
if (NavigationContext.QueryString.ContainsKey("Command"))

{

string fileToken = NavigationContext.QueryString["ID"];

var filename = SharedStorageAccessManager.GetSharedFileName(fileToken);
var file = await SharedStorageAccessManager.CopySharedFileAsync(Windows.Storage.ApplicationData.Current.LocalFolder,

fileToken + ".rcp", Windows.Storage.NameCollisionOption.ReplaceExisting,

fileToken);
var content = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

DataReader dr = new DataReader(content);

await dr.LoadAsync((uint)content.Size);
//Get XML from file content

string xml = dr.ReadString((uint)content.Size);
//Load XML dpocument

XDocument doc = XDocument.Parse(xml);

XName attName = XName.Get("ID");

XAttribute att = doc.Root.Attribute(attName);

//Get UniqueId from file

UniqueId = att.Value;

System.Diagnostics.Debug.WriteLine("ID = " + UniqueId);

}

else

UniqueId = NavigationContext.QueryString["ID"];
if (!App.Recipes.IsLoaded)

await App.Recipes.LoadLocalDataAsync();
NavigateToRecipe(UniqueId);
base.OnNavigatedTo(e);

}

1.


    1. Запустите приложение для регистрации файловой ассоциации

a.

Задача 3 – Тестирование файловой ассоциации

2.Существуют 3 сценария тестирования файловой ассоциации:

Сообщение электронной почты содержит вложение с нужным типом файлов.

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

Другое приложение открывает файл нужного типа.


Тестирование файловой ассоциации с помощью другого приложения:


    1. Создайте новое Windows Phone приложение.

1.Для тестирования файловой ассоциации приложение должно иметь соответствующие файлы в изолированном хранилище. Добавьте новый текстовый файл в приложение и назовите его 1003.rcp или 1003.recipe.

2.Добавьте следующий код в файл:

a.XML








3.Откройте свойства файла (панель Properties).

4.Установите build action в значение Content.

5.Добавьте на странице MainPage.xaml кнопку.

6.В обработчик нажатия кнопки добавьте следующий код:

a.C#

b.StorageFolder local = Windows.Storage.ApplicationData.Current.LocalFolder;

c.

d.if (local != null)



e.{

f. await WriteFiles();

g.

h. var filenames = await local.GetFilesAsync();



i. StorageFile recipeFile = await local.GetFileAsync("1003.rcp");

j.

k. if (recipeFile != null)



l. {

m. var res = await Windows.System.Launcher.LaunchFileAsync(recipeFile);

n. }

o.}


p.Данный код вызывает метод WriteFiles, который загружает файл 1003.rcp в изолированное хранилище. А после этого файл открывается с помощью функции Launcher.LaunchFileAsync.

q.Добавьте метод WriteFiles:

r.C#

s.private async Task WriteFiles()

t.{

u. StreamReader stream = new



v. StreamReader(TitleContainer.OpenStream("1003.rcp"));

w.

x. StorageFolder local = Windows.Storage.ApplicationData.Current.LocalFolder;



y. var file = await local.CreateFileAsync("1003.rcp",

z. CreationCollisionOption.ReplaceExisting);

aa.

ab.


ac. string fileAsString = stream.ReadToEnd();

ad. byte[] fileBytes = System.Text.Encoding.UTF8.GetBytes(fileAsString);

ae.

af. var s = await file.OpenStreamForWriteAsync();



ag. s.Write(fileBytes, 0, fileBytes.Length);

ah.


ai. stream.Close();

aj. s.Close();

ak.}

7.Добавьте ключевое слово “async” в обработчик события нажатия кнопки.



a.C#

b.private async void Button_Click_1(object sender, RoutedEventArgs e)



c.{

d....


Запустите приложение и нажмите на кнопку. В приложении ContosoCookbook отобразится рецепт.

Поделитесь с Вашими друзьями:


База данных защищена авторским правом ©nethash.ru 2017
обратиться к администрации

войти | регистрация
    Главная страница


загрузить материал