Последняя версия мобильной платформы Microsoft предоставляет разработчикам Windows Phone совершенно новое игровое поле. Внешний вид другой. Телефоны разные. Даже название ОС несколько отличается — Windows Phone 7. Однако опыт разработки будет удобно знаком разработчикам .NET в целом и программистам Silverlight в частности.
Как и в случае с любой разработкой устройства, для того, чтобы ваше приложение действительно пело, вам нужно задействовать функции для мобильных устройств, такие как:
- Сервисы определения местоположения
- Отправить уведомление
- акселерометр
Однако даже прежде чем приступить к работе с устройством, вы можете применить свои навыки Silverlight, чтобы быстро запустить и запустить базовое приложение.
Для следующего пошагового руководства вам необходимо установить эти компоненты, все они включены в
пакет средств разработки для Windows Phone (за исключением Framework):
.NET Framework 4
- Visual Studio 2010 Express (в этом пошаговом руководстве используется C #)
- Инструменты Silverlight 4 для Visual Studio
- Эмулятор Windows Phone
- XNA Game Studio 4.0 (не требуется для этого прохождения)
- Microsoft Expression Blend для Windows Phone
Вы можете найти этот пакет и массу другой полезной информации на
сайте разработчиков Microsoft .
Шаг первый: создайте базовое приложение
Цель этого пошагового руководства — запустить и запустить базовое приложение для Windows Phone 7. Оттуда вы можете погрузиться в более продвинутую функциональность. Это приложение позволит вам выбрать эскиз изображения из списка, чтобы увидеть его в увеличенном виде.
Как только ваш пакет инструментов разработчика установлен и готов к работе, запустите Visual Studio 2010 Express для Windows Phone и запустите новый проект. Выберите шаблон «Silverlight для Windows Phone» и выберите «Приложение для Windows Phone».
Если вы уже программист Silverlight, то ваше решение должно показаться вам знакомым. Как вы можете видеть на рисунке 2, у вас уже есть макет файла XAML, похожий на приложение Windows Phone 7.
Как и в случае с любым из шаблонов Visual Studio, технически вы можете запустить это прямо сейчас, но просто для проверки интерактивности сначала добавьте кнопку. На панели инструментов возьмите кнопку и перетащите ее в середину холста. На панели свойств измените содержимое кнопки на «Click Me». Вы должны получить что-то вроде этого:
Дважды нажмите кнопку на холсте. При этом генерируется заглушка метода для события Click, и вы сразу переходите к нему в файле кода для холста (файл называется MainPage.xaml.cs, если вы хотите найти его в обозревателе решений — он свернут с MainPage. XAML). Добавьте следующий код:
MessageBox.Show("Clicked!");
Прежде чем запустить приложение, вам нужно сделать еще одну вещь. К сожалению, как бы ни были хороши эти новые инструменты, они, очевидно, недостаточно умны, чтобы распознавать, подключено ли устройство. Поэтому вам нужно вручную установить целевое значение «Эмулятор Windows Phone 7».
Теперь вы можете запустить приложение (F5). Если все подключено правильно, эмулятор должен запуститься с запущенным приложением. Нажмите кнопку, которую вы добавили, чтобы убедиться, что сообщение всплывает.
Остановите приложение и вернитесь к коду. Удалите кнопку с холста XAML и удалите событие Click из выделенного кода.
Шаг второй: создание средства выбора изображений
На холсте XAML нажмите «МОЯ ЗАЯВКА». Измените текст на «DZONE DEMO APPLICATION». Выберите слова «имя страницы» и измените этот текст на «сборщик изображений».
Из панели инструментов перетащите элемент управления изображения на холст. Это будет целевое изображение, поэтому измените имя элемента управления на imgTarget. Сделайте это приблизительно 400 в ширину на 300 в высоту. Вы можете точно установить размеры, используя свойства Ширина и Высота. Убедитесь, что он находится в центре верхней части сетки содержимого холста. Измените свойство Stretch на «UniformToFill». Обычно вы устанавливаете свойство Source для элемента управления Image, но не в этом случае.
Под imgTarget добавьте три меньших элемента управления Image и назовите их imgThumb1, imgThumb2 и imgThumb3. Сделайте их около 100 на 80. Вы можете использовать направляющие линии для выравнивания элементов управления.
Нажмите на imgThumb1 и выберите Источник. Делать это служит тройной обязанности. Сначала вы копируете изображения из исходного каталога в папку профиля. Во-вторых, вы создаете библиотеку ресурсов, которую можно использовать во всем приложении. В-третьих, вы назначаете изображения для определенных элементов управления изображениями. Поэтому для этого первого изображения нажмите «Добавить» и перейдите в папку «Примеры изображений» (или в любое другое место, из которого вы хотите получить изображения) и выберите три изображения. Вы увидите, что все три добавляются как в Обозреватель решений, так и на панель изображений в диалоговом окне «Выбор изображения». Кроме того, Path теперь ссылается на ресурсы вашего проекта и в данный момент указывает на первое изображение:
Идем дальше и нажимаем ОК, чтобы принять первое изображение. Теперь, когда вы выбираете источник для второго изображения, вы можете выбрать его из ресурсов проекта. Сделайте это для imgThumb2 и imgThumb3. После того как все изображения выбраны, холст должен выглядеть следующим образом:
Нажмите на каждое из новых изображений в обозревателе решений. Действие Build для каждого должно быть установлено на «Resource». Измените свойство «Копировать в вывод» на «Копировать, если новее».
Поскольку в элементе управления Image не реализован обработчик события Click, вам нужно подойти к проблеме немного по-другому. Вместо Click, есть событие MouseLeftButtonDown, которое срабатывает при первоначальном касании объекта. Не пугайтесь термина «мышь» в названии — он будет отлично работать как в эмуляторе, так и на реальном устройстве Windows Phone 7. Однако помните, что это простой пример. По соображениям производительности Microsoft рекомендует использовать манипуляции вместо событий мыши.
Сначала откройте файл XAML для рабочей страницы и убедитесь, что вы указали правильный обработчик события в разметке:
<Image MouseLeftButtonDown="Image_MouseLeftButtonDown"></Image>
В коде вы можете связать его с действием:
private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Uri uri = new Uri("/[solution name];component/Images/[image name].jpg", UriKind.Relative);
ImageSource newSource = new System.Windows.Media.Imaging.BitmapImage(uri);
imgTarget.Source = newSource;
Ваш готовый код должен выглядеть примерно так:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
namespace WP7SilverlightDemo
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Uri uri = new Uri("/[solution name];component/Images/[image name].jpg", UriKind.Relative);
ImageSource newSource = new System.Windows.Media.Imaging.BitmapImage(uri);
imgTarget.Source = newSource;
}
private void btnThumb2_Click(object sender, RoutedEventArgs e)
{
Uri uri = new Uri("/WP7SilverlightDemo;component/Images/Jellyfish.jpg", UriKind.Relative);
ImageSource newSource = new System.Windows.Media.Imaging.BitmapImage(uri);
imgTarget.Source = newSource;
}
private void btnThumb3_Click(object sender, RoutedEventArgs e)
{
Uri uri = new Uri("/WP7SilverlightDemo;component/Images/Lighthouse.jpg", UriKind.Relative);
ImageSource newSource = new System.Windows.Media.Imaging.BitmapImage(uri);
imgTarget.Source = newSource;
}
}
}
Запустите приложение и попробуйте. В результате вы получите что-то вроде рисунка 8 с тремя отзывчивыми миниатюрами:
Следующие шаги
Очевидно, что приложение в его текущем состоянии оставляет желать лучшего. Если вы хотите продолжить в том же духе, вот несколько возможностей для изучения в следующей итерации:
удалите объекты btnThumb и используйте событие MouseLeftButtonUp элемента управления Image, вместо этого сверните
три события Click в один обработчик событий, который использует источник изображения миниатюры
Добавить Распознавание ориентации и создание альбомной версии макета.
Обязательно прочитайте отличную Refcard для Windows Phone 7 от Colin Melia, которая
познакомит вас с более специфичными для устройства функциями.