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

Запустим Visual Studio Express 2013 for Windows. В меню выберем File->New Project... Перед нами откроется окно создания проекта:

В левой части окна выберем Visual C#->Store Apps-> Windows Phone Apps. А среди шаблонов нового проекта выберем Blank App (Windows Phone), дадим какое-нибудь название проекту, например, назовем его HelloApp. И нажмем ОК.

И Visual Studio создаст новый проект:

Проект по шаблону Blank App по умолчанию имеет следующие узлы:

• Каталог Assets, содержащий используемые файлы изображений

• App.xaml и App.xaml.cs - файл ресурсов приложения на xaml и файл кода приложения на c# соответственно

• MainPage.xaml и MainPage.xaml.cs - файл графического интерфейса окна приложения и файл кода окна на c# соответственно

• Package.appxmanifest - файл манифеста приложения

На данном начальном этапе пока для нас ценность представляют файлы MainPage.xaml и MainPage.xaml.cs. Откроем файл MainPage.xaml, который представляет графический интерфейс:

Слева в виде телефона у нас будет окно графического дизайнера. Справа - окно разметки графического интерфейса на языке xaml. Графический интерфейс в данном случае представлен классом MainPage, который представляет собой отдельную страницу. Все изменения по интерфейсу, которые мы сделаем, тут же будут отображаться в графическом дизайнере, который даст нам визуальное понимание того, как в итоге будет все выглядеть.

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

<Page
    x:Class="HelloApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <TextBox x:Name="textBox1" Width="200" PlaceholderText="Введите сумму" />
        <Button x:Name="button1" Content="Считать" Width="150" VerticalAlignment="Top" 
                Margin="140 60 0 0"/>
        <TextBlock x:Name="textBlock1" Width="150" Height="40" FontSize="24"
                   VerticalAlignment="Top" Margin="40 120 20 0" />
    </Grid>
</Page>

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

Мы добавили текстовое поле (элемент TextBox) для ввода некоторого значения, кнопку для инициации действия, и элемент TextBlock для вывода результата действия.

С помощью атрибутов элементов мы задаем их внешний вид и позиционирование. Например, с помощью атрибута Margin задаются отступы от внешнего края. Более подробно об атрибутах и прочих элементах языка xaml мы поговорим в дальнейшем.

После добавления элементов и их атрибутов у нас автоматически обновится и окно дизайнера:

Теперь изменим код кнопки следующим образом:

<Button x:Name="button1" Content="Считать" Width="150" VerticalAlignment="Top" 
                Margin="140 60 0 0" Click="button1_Click"/>

С помощью выражения Click="button1_Click" мы добавили обработчик события Click. Таким образом, по нажатию кнопки будет срабатывать метод button1_Click. Теперь определим этот метод.

Откроем файл MainPage.xaml.cs, который содержит логику страницы. По умолчанию он имеет следующий код:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
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;

namespace HelloApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            this.NavigationCacheMode = NavigationCacheMode.Required;
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}

В класс MainPage добавим новый метод:

private void button1_Click(object sender, RoutedEventArgs e)
{
    double capital;
    if(Double.TryParse(textBox1.Text,out capital))
    {
        capital+=capital * 0.12;
        textBlock1.Text = capital.ToString() + " долларов";
    }
    else
    {
        textBlock1.Text="Некорректное значение";
    }
}

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

Запустим на выполнение:

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

При запуске приложения на смартфоне важно, чтобы смартфон не находился в состоянии блокировки. Итак, запустим:

Введем в текстовое поле какое-нибудь число и нажмем на кнопку:

При тестировании через смартфон важно помнить, что при запуске приложение автоматически устанавливается на телефон, и мы можем его найти в списке всех приложений:

И при необходимости потом, отключившись от компьютера, также сможем его запустить, либо удалить.

На этом создание первого приложения завершено.