Начало Windows Phone 8 Development: урок 1. Макет приложения и обработчик событий

Автор оригинала: Bandar Alsharfi
  • Перевод
  • Tutorial
Начало Windows Phone 8 Development: урок 1. Макет приложения и обработчик событий
Начало Windows Phone 8 Development: урок 2. Доступ к локальному хранилищу приложения
Начало Windows Phone 8 Development: урок 3. Навигация по страницам и передача параметров
Начало Windows Phone 8 Development: урок 4. Связь с сервисами и привязка к данным

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

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

И так. Давайте дадим ответ на вопрос, какие есть этапы разработки во время создания приложения? Вот к каким выводам я пришел:

• Application Layout and Events Handing (Макет приложения и обработка событий)
• Access to Application Isolated Local Storage (Доступ к изолированному хранилищу приложения)
• Navigation between Pages and passing Parameters (Навигация по приложению и передача параметров)
• Communicating with Services and Data Binding (Связь с сервисами и данными)
• Threading and Asynchronous Calls (Потоки и асинхронные вызовы)
• Access to Phone Resources like Address Book and GPS (Доступ к ресурсам телефона, таким как телефонная книга и GPS )
• Panorama and Pivot Applications
• Animation and Transitions using Blend for Visual Studio 2012

Для разработки приложений Вам понадобится Windows Phone SDK 8 и Visual Studio 2012, а так же лицензия разработчика. Где их взять и как настроить уже имеется достаточное количество информации в сети интернет.

Некоторые факты перед стартом разработки



— Приложения Windows Phone используют XAML
— XAML используется на страницах приложения для задания макета (Layout), а так же связанные с ними CS или VB, отвечающие за обработку событий.
— XAML схож с HTML5 и отвечает за внешний вид наших страничек.

Создание приложения



Первое

Запускаем Visual Studio и создаем новый проект Windows Phone. Будем использовать C#.

image

Далее у Вас появляется возможность, под какую версию ОС создать проект. 7.1 или 8.0. Выбираем естественно 8.

image

Второе

Сразу после создания проекта у вас открывается как минимум два окна. Слева — предпросмотр страницы, справа — редактор кода. То есть редактирование XAML сразу визуально отражается. Однако я не приверженец визуального редактирования. И в моих уроках он практически не используется.

image

Как описывать страницы приложения используя XAML?



Существует достаточно большое количество элементов управления, таких как Grid(сетка), Canvas (холст), StackPanel и др. Используем StackPanel.

Как работает StackPanel?



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

А теперь ознакомьтесь с кодом ниже. В нем имеется два StackPanel внутри ContentPanel. Один с горизонтальной ориентацией, а другой с вертикальной и каждый в свою очередь содержит по четыре кнопки.

image

Код
        <!--ContentPanel - place additional content here-->
        <Stackpanel х:Name="ContentPanеl" Grid.Row=1 Nargin="12,0,12,0">
            <StackPanel Orientation="Horioontal">
                <Button content="1"></Button>
                <Button content="2"></Button>
                <Button content="3"></Вutton>
                <Button content="4"</Button> 
            </StackPanel>
            <StackPanel Orientation="Vertical">
                <Button content="1"></Buttcn> 
                <Button Content="2"></Buttcn>
                <Button content="3"></Button> 
                <Button content "4"></Button> 
            </StackPanel> 
        </StackPanel> 



А теперь обратите внимание на визуальный редактор страницы.

image

Как видите, XAML очень прост в использовании. Задаете нужные теги и их свойства. Проблем с привыканием возникнуть не должно.

Так, а что же мы сегодня все-таки сделаем?



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

image

Макет достаточно прост. Состоит из двух StackPanels с четырьмя кнопками, как и в примере выше, но вместо кнопок в первом StackPanels имеются два текстовых поля и два поля для ввода. Текстовые поля это TextBlock, поля для ввода это TextBox.

image

Код
        <L-ContentPanel - place additional content here-->
        <StackPanel Orientation="vertical" Gгid.RC''="1" Margin="12,0,12,0">
            <StackPanel Orientation="ноrizontаl">
                  <TextВlock HorizontalAlignment="Left" TextWгapping="Wгap" Text="value of X:" VегticalAlignmеnt="Center"/>
                  <TехtBox x:Name="valueOfX" HorizontаAlignment="Left" Weight="72" Width="100" TextWrapping="Wrap" VerticalAlignmепt="Top" InputScope="Number"/>
                  <TеxtBloсk HorizontalА1ignmеnt="left" TextWrapping="Wrap" Text="value of v:" VerticalAlignment="Center"/>
                  <TextBox x:Name="valueOfY" HorizontalAlignment="Left" Weight="72" Width="100" TextWrapping="Wrap" VerticalAlignment="Top" InputScope="Number"/>
                  <TextBlоck х:Name="Result Block" HorizontalAlignment="Left" TeхtWгаpping="Wгap" VerticalAlignment="Center"/> 
            </StackPanel>
            <Button x:Name="MessаgeboxUpdate" Content="Messagebox" /> 
            <Button x:Name="TextBlockUpdаte" Content="Tеxt Block" />
        </StackPanel> 



Заметьте, что я добавил InputScope в TextBox, сообщая тем самым, что необходима только цифровая клавиатура а не полная.

image

Касательно кода



Макет мы сверстали. Осталось сообщить приложению, что и как оно должно делать при поступлении данных.

Шаг 1


Создание обработчика события очень просто благодаря Visual Studio. Просто выберите необходимый элемент. В нашем случае это кнопка Messagebox и сделайте на ней двойной щелчок мышью. Второй способ сделать тоже самое, это выбрать элемент и на панели Свойств клацнуть на кнопке с изображением молнии, после чего появится список всех возможных событий. Выберите «Click».

image

Шаг 2


Visual Studio загрузит сопряженный CS файл, в котором и происходит описание событий.

image

Код
        private void MessageboxUpdate_C1ick(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(ValueOfX.Text + "X" + ValuеОfУ.Text + " = " + (double.Parse(VdlueOfX.Text) * double.Parse(ValueOfУ.Text)).ToString()); 
        }



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

image

Код
        (double.Parse(ValueOfX.Text) * double.Parse(ValueOfY.Text)).ToString();



Для более информативного вывода выводим числа, которые умножаются, знак умножения, равно и результат. 2 X 2 = 4.

Заметьте, что я использую метод double.Parse для привидения значений строк из TextBox в числовые, типа double.

Шаг 3


Повторите Шаг1, но в этот раз с другой кнопкой и обновите обработчик событий.

image

Код
        private void Textвlockоpdate_C1ick(object sender, RoutedEventArgs e)
        {
            ResultBlock.Text = (dоuble.Рагse(VаluеОfХ.Tехt) * double.Рагse(ValuеOfY.Text)).ToString(); 
        }



Код является более простым, в силу того, что не используем строки. И просто передаем результат в TextBlock.

Тестируем!



Полезной особенностью SDK является поддержка эмуляции устройства. Однако подробно про это поговорим чуть позже. А сейчас просто построим и запустим проект на эмуляторе нажав ctrl+F5. Этот процесс довольно медлительный. Так что запаситесь терпением и дождитесь полной загрузки. После загрузки введите значения для X и Y. Обратите внимание, что клавиатура имеет только числовые значения.

image

Теперь нажмите на кнопки Messagebox и TextBlock.

image

image

Надеюсь данный урок был полезен. А теперь подведем итоги:

— Windows Phone приложения состоят из страничек, построенных на XAML
— XAML используется для описания визуальной части страницы, а прикрепленный файлы CS или VB – для описания событий.
— Органы управления описываются почти также, как ив HTML — используя теги. А каждый тег состоит из свойств, определяющих его поведение и формат, как например InputScope для TextBox.
— Для создания обработчика события – двойной щелчок в визуальном дизайнере на нужном элементе. Или выбрать в окне свойств элемента нужный.
— Все что вводится/выводится на/из экрана — строка.
— Использовали метод double.Parse для преобразования в число и последующую работу с ним. А метод ToString — для вывода результата на экран.
— Для построения и запуска проекта на эмуляторе использовали комбинацию клавиш ctrl+F5.
  • –1
  • 54,3k
  • 5
Поделиться публикацией

Комментарии 5

    +2
    1) MVVM используют почти все программисты под WP. Не стоит всех учить событиям.
    XAML — ни капли не HTML, а XML.
    Ну и урок непонятно для чего — есть MSDN, есть сайты, есть статьи на хабре.
      0
      Что такое XAML, HTML и XML я хорошо знаю. Это просто перевод. Перевод статьи с MSDN.
      Не все всё сразу знают. Есть те, кому эти статьи помогут.
      Если знаете материалы лучше — поделитесь ссылками. Буду благодарен не только я.
        0
        Даже специальный флаг придумали — Tutorial.
        Что в этом плохого?
          +2
          В том, что события при наличии MVVM лучше не использовать. А тут это как панацея продвигается.
        0
        Спасибо за урок. Очень неплохо для начала.
        Всегда не хватает русских статей на новые технологии. Продолжайте в том же духе!

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

        Самое читаемое