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

Презентацию к данной лекции Вы можете скачать здесь.

8.1. Улучшение приложения

Управление свойствами элементов

Визуальные элементы Silverlight фактически являются классами в коде, и можно настроить их отображение, изменяя свойства отдельных экземпляров этих элементов. Свойства элементов Silverlight можно задать в области свойств в Visual Studio или в XAML-коде, в котором описываются все элементы страницы. Эти настройки можно задать при создании программы, а также можно устанавливать свойства элементов и во время работы программы, например:

resultTextBlock.Text = result.ToString();

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

Обработка ошибок. На текущий момент в разработанной на прошлых лекциях программе Сумматор не осуществляется обработка ошибок. Если пользователь введет произвольный текст в элемент TextBox, то программа попытается использовать метод Parse, чтобы преобразовать этот текст в число, и это может завершиться неудачей (рис. 8.1).

Такая ошибка возникает, поскольку программный код не производит проверку на допустимость введенных значений:

float v1 = float.Parse(firstNumberTextBox.Text);

Если в элемент firstNumberTextBox ввести текст, который не может быть преобразован в число (например, "один"), то возникнет исключение. Можно изменить код, используя другую версию метода Parse:

float v1 = 0;
if (!int.TryParse(firstNumberTextBox.Text, out v1))
{
    // Код для обработки ввода недопустимого значения
}  

Этот код использует метод TryParse, который возвращает значение false, если элемент firstNumberTextBox будет содержать недопустимый текст.

Изменение цвета текста. При возникновении ошибки можно выделить текст элемента TextBox красным цветом. Silverlight использует кисти для отрисовки элементов на экране. Этот мощный механизм позволяет нарисовать текст, используя изображения или текстуры, и применить некоторые дополнительные эффекты. В Silverlight есть набор стандартных цветов, и можно сделать текст элемента TextBox красным, сделав основную кисть непрерывной красной заливкой:

float v1 = 0;

if (!float.TryParse(firstNumberTextBox.Text, out v1))
{
    firstNumberTextBox.Foreground = new SolidColorBrush(Colors.Red);
    return;  
}

Теперь, если пользователь введет недопустимое значение, основной цвет текстового поля станет красным (рис. 8.2), и выполнение метода завершится без вычисления результата. Однако, программа должна выдавать сообщение об ошибке, если пользователь введет недопустимый текст не только в первое, но и во второе текстовое поле.

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

private SolidColorBrush errorBrush = new SolidColorBrush(Colors.Red);
private Brush correctBrush = null;
      
private void calculateResult()
{
    bool errorFound = false;

    if (correctBrush == null)
        correctBrush = firstNumberTextBox.Foreground;

    float v1 = 0;

    if (!float.TryParse(firstNumberTextBox.Text, out v1))
    {
        firstNumberTextBox.Foreground = errorBrush;
        errorFound = true;
    }
    else
        firstNumberTextBox.Foreground = correctBrush;

    float v2 = 0;

    if (!float.TryParse(secondNumberTextBox.Text, out v2))
    {
        secondNumberTextBox.Foreground = errorBrush;
        errorFound = true;
    }
    else
        secondNumberTextBox.Foreground = correctBrush;

    if (errorFound)
        resultTextBlock.Text = "Ошибка при вводе!";
    else
    {
        float result = v1 + v2;
        resultTextBlock.Text = result.ToString();
    }
}

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

Редактирование XAML-кода элементов Silverlight

XAML является декларативным языком и используется для описания и настройки объектов Silverlight. Например, можно настроить режим ввода для элементов TextBox для ввода чисел.

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

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

<TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0"
    Name="firstNumberTextBox" Text="0" VerticalAlignment="Top" Width="460"
    TextAlignment="Center">
  <TextBox.InputScope>
    <InputScope>
      <InputScopeName NameValue="Digits" />
    </InputScope>
  </TextBox.InputScope>
</TextBox>

Это описание указывает Silverlight положение элемента TextBox на экране, размер элемента, его имя и некоторую информацию о выравнивании текста. Каждое из значений, заключенных в блок <TextBox ... /> является атрибутом текстового поля. Атрибуты — это простые элементы, которые не являются структурированными и представляют собой пары "имя—значение".

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

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

<InputScopeName NameValue="Digits" />

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

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

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

<TextBox InputScope="Number" Height="72" HorizontalAlignment="Left"
    Margin="144,44,0,0" Name="startHourTextBox" Text="00" VerticalAlignment="Top"
    Width="104" TextAlignment="Center" />

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

<TextBox HorizontalAlignment="Left" Margin="8,175,0,0" Name="secondNumberTextBox"
    Text="0" VerticalAlignment="Top" Width="460" TextAlignment="Center">
  <TextBox.Height>72</TextBox.Height>
</TextBox>

В этом описании высота элемента TextBox указана не как атрибут, а как вложенный элемент. Имя элемента должно содержать название типа элемента, частью которого является это свойство. При этом нельзя указать в качестве имени элемента просто Height, а нужно указать TextBox.Height. Это не ограничение XML, а требование XAML.

С точки зрения XAML не важно, какая из этих форм используется в описании. Для простых пар "имя—значение" можно использовать атрибуты, но для более сложных структур лучше использовать вложенные элементы.

Настройка свойств C#. В коде на языке C# установка значений свойств выглядит так:

// Создание нового элемента InputScope
InputScope digitScope = new InputScope();

// Создание нового элемента InputScopeName
InputScopeName digits = new InputScopeName();
// Установка свойства name в значение Digits
digits.NameValue = InputScopeNameValue.Digits;

// Добавление элемента InputScopeName в элемент InputScope
digitScope.Names.Add(digits);

// Присвоить элементу TextBox созданное свойство
firstNumberTextBox.InputScope = digitScope;

Этот код создает все элементы, представленные в описанном выше коде XAML.

Вывод окна с сообщением

Silverlight содержит класс MessageBox, который можно использовать для сообщения пользователю об ошибке:

MessageBox.Show("Недопустимый ввод");

Эта команда выведет в верхнюю часть экрана сообщение и выдаст звуковой сигнал.

Если нужно отправить пользователю телефона сообщение с большим объемом текста, можно вывести на экран сообщение в несколько строк:

MessageBox.Show("Недопустимый ввод" + System.Environment.NewLine +
    "Пожалуйста, повторите ввод");

Элемент System.Environment.NewLine вставит символ новой строки, принятый в целевой платформе. Класс MessageBox можно использовать, если нужно убедиться в том, что пользователь принял сообщение перед продолжением работы. При выводе сообщения на экран выполнение программы будет приостановлено.

Окно сообщения с выбором. Можно предложить пользователю сделал выбор в окне MessageBox:

if (MessageBox.Show("Вы действительно хотите это сделать?", "Выполнение действия",
    MessageBoxButton.OKCancel) == MessageBoxResult.OK)
{
    // Действия, если пользователь нажмет "ok"
}
else
{
    // Действия, если пользователь нажмет "отмена"
}

Этот код выводит на экран сообщение с возможностью отмены действия, представленное на рис. 8.3. Блок if позволяет выполнять разные действия в зависимости от ответа пользователя.

Добавление и использование ресурсов

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

При использовании изображений в приложении важно помнить, что целевое устройство не содержит большой объем памяти или экран высокого разрешения. Самое высокое разрешение для Windows Phone составляет 800*480 пикселей, поэтому нет необходимости использовать фоновое изображение большего размера.

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

Свойство ресурса "Действие при построении". При построении проекта в Visual Studio существует несколько способов добавления ресурсов к программе. Часто используются два способа: добавление ресурса как элемент контента или как части сборки.

По умолчанию при построении проекта ресурс встраивается в сборку. В этом случае свойство Действие при построении имеет значение Внедренный ресурс.

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

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

Использование в программе изображения как часть содержимого. Ресурс, который является элементом контента, доступен в приложении в виде файла, который находится в одной папке с программой. Чтобы вывести на экран изображение из файла, нужно добавить строку в код XAML содержащую путь к этому файлу с изображением:

<Image Height="611" HorizontalAlignment="Left" Margin="8,0,0,0"
    Name="gearBackgroundImage" Stretch="Fill" VerticalAlignment="Top" Width="472"
    Source="AddingGears.jpg" />

Элемент Image выводит на экран страницы изображение. В нем описан атрибут Source, который определяет файл с изображением. Если ввести имя файла в качестве источника, то при запуске программы изображение будет загружаться из файла и выводиться на экран. Silverlight выводит элементы на экран в том порядке, в котором они описаны в XAML-файле. Если эту строку разместить перед объявлением элемента Grid, содержащего элементы страницы, то изображение будет выведено на заднем плане.

Использование в программе изображения как внедренный ресурс. Если в приложении используется изображение, встроенное в сборку, XAML-код для обращения к этому изображению может выглядеть так:

<Image Height="611" HorizontalAlignment="Left" Name="gearBackgrounds" Stretch="Fill"
    VerticalAlignment="Top" Width="472"
    Source="/AddingMachine;component/Images/AddingGears.jpg" />

Во время работы программы изображение будет выглядеть одинаково, независимо от способа его использования в программе. Разница заключается в расположении ресурса и в коде для обращения к нему.

Выбор способа размещения ресурсов. При создании приложений для Windows Phone важно понять разницу между элементами контента и внедренными ресурсами приложения.

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

Внедренный ресурс сохраняется в сборке программы, и ее размер увеличивается. Когда устройство Windows Phone загружает программу, оно просматривает всю сборку программы и выполняет некоторые проверки кода. Чем больше размер программы, тем больше времени занимают проверки. Если загрузка программы занимает слишком много времени, ее выполнение будет прервано операционной системой Windows Phone. Поэтому нужно с осторожностью внедрять большие по объему ресурсы в сборку программы.

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

Рекомендуется придерживаться следующих рекомендаций:

8.2. Изменение и отображение данных

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

Событие TextChanged

Ранее мы использовали событие элемента Button, которое происходит при нажатии на кнопку. С точки зрения программы событие является вызовом метода. Код XAML, описывающий кнопку, может выглядеть так:

<Button Content="сумма" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0"
    Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click"
    />

При нажатии на кнопку вызывается указанный обработчик события. В нашем случае в нем вызывается метод calculateResult.

private void equalsButton_Click(object sender, RoutedEventArgs e)
{
    calculateResult();
}

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

Для элемента firstNumberTextBox можно создать обработчик события TextChanged, дважды щелкнув в строке TextChanged в пустом поле справа, и вызвать в нем метод calculateResult:

private void firstNumberTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    calculateResult();
}

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

Однако, возникает проблема с проверкой допустимости введенных значений. Если пользователь введет текст вместо числа, то программа это обнаружит и выведет на экран сообщение. Однако, это сообщение будет выводиться на экран по два раза при вводе недопустимого символа. То есть, событие происходит дважды — и это известная проблема для приложений Windows Phone. Обойти эту проблему можно, проверяя, были ли изменены данные при последовательных вызовах событий с теми же данными:

string oldFirstNumber = "";

private void firstNumberTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    if (firstNumberTextBox.Text == oldFirstNumber)
        return;

    oldFirstNumber = firstNumberTextBox.Text;

    calculateResult();
}

Этот обработчик вызывает метод calculateResult, только если текст в элементе TextBox действительно изменился.

Привязка данных

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

Привязка данных может работать в любом направлении. Можно связать текст элемента TextBox с приложением таким образом, чтобы при изменении текста в этом текстовом поле приложение было об этом уведомлено. Также можно связать элемент TextBlock с объектом так, чтобы при изменении свойства объекта содержимое элемента TextBlock соответственно обновлялось. Это пример двунаправленной привязки, когда программа может сама изменить элемент и отреагировать на изменения в этом элементе. Можно задать однонаправленную привязку, чтобы программа только выводила на экран результаты при изменении свойства объекта. Наконец, можно связать любые свойства объектов так, чтобы программа могла переместить элемент Silverlight по экрану при изменении свойств X и Y объекта игры.

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

Можно создать класс AdderClass, имеющий следующую структуру:

public class AdderClass
{
    private int topValue;
    public int TopValue
    {
        get
        {
            return topValue;
        }
        set
        {
            topValue = value;
        }
    }

    private int bottomValue;
    public int BottomValue
    {
        get
        {
            return bottomValue;
        }
        set
        {
            bottomValue = value;
        }
    }

    public int AnswerValue
    {
        get
        {
            return topValue + bottomValue;
        }
    }
}

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

Добавление функций уведомления. Для того чтобы класс можно было связать с объектом Silverlight, в нем должен быть реализован интерфейс INotifyPropertyChanged:

public interface INotifyPropertyChanged
{
    //  Событие происходит при изменении значений свойства
    event PropertyChangedEventHandler PropertyChanged;
}

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

public event PropertyChangedEventHandler PropertyChanged;

Класс PropertyChangedEventHandler используется элементами Silverlight для управления сообщениями событий. Он описан в пространстве имен System.ComponentModel. Если компонент Silverlight нужно связать с каким-либо свойством класса, можно добавить к этому событию делегаты.

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

public class AdderClass : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private int topValue;

    public int TopValue
    {
        get
        {
            return topValue;
        }
        set
        {
            topValue = value;

            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("AnswerValue"));
            }  
        }
    }

    // то же самое для свойства BottomValue
  
    public int AnswerValue
    {
        get
        {
            return topValue + bottomValue;
        }
    }  
}

Класс AdderClass теперь содержит свойство PropertyChanged. Каждый раз при изменении значения свойства он должен проверить значение свойства PropertyChanged. Если оно не равно null, то оно связано с делегатом. Можно рассматривать свойство PropertyChanged как список рассылки. Процесс может подписаться на рассылку и получать уведомления об интересующих событиях, которые происходят в AdderClass. Если никто не подписан на список рассылки (то есть значение PropertyChanged равно null), то нет точки вызова метода для описания изменений. Однако, если оно не равно null, это означает, что есть объект, который интересуют изменения, происходящие в AdderClass.

Вызов метода, который генерирует событие, выглядит следующим образом:

PropertyChanged(this, new PropertyChangedEventArgs("AnswerValue"));

Первый параметр является ссылкой на объект, который генерирует событие. Вторым параметром является значение аргумента, которое содержит имя свойства, значение которого изменилось. Элемент Silverlight использует технологию отражения (т.е. он будет считывать публичные свойства класса AdderClass), чтобы узнать, какие свойства доступны. Если он получит уведомление, что значение свойства AnswerValue изменилось, то он будет обновлять все свойства визуальных элементов, связанные со свойством этого класса.

Когда программа сгенерирует событие, на экран будет выведено обновленное значение свойства AnswerValue. При вызове кода секции get свойства AnswerValue он вычисляет и возвращает результат.

public int AnswerValue
{
    get
    {
        return topValue + bottomValue;
    }
}

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

Добавление пространства имен на страницу MainPage. Для того чтобы связать созданный объект с данными, нужно связать код объекта с XAML-кодом, описывающим пользовательский интерфейс. Необходимо добавить в код XAML пространство имен, содержащее класс AdderClass:

xmlns:local="clr-namespace:AddingMachine"

Этот атрибут корневого элемента в XAML-файле для страницы MainPage.xaml делает доступными любые классы пространства имен AddingMachine для использования в XAML-коде. Как и в программе на C# в начале файла должны указываться все директивы using, так и в начале файла XAML также должны указываться все используемые пространства имен.

После добавления пространства имен нужно объявить имя класса, который описан в этом пространстве имен и используется в качестве ресурса:

<phone:PhoneApplicationPage.Resources>
  <local:AdderClass x:Key="AdderClass" />
</phone:PhoneApplicationPage.Resources>

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

<Grid x:Name="LayoutRoot" Background="Transparent"
    DataContext="{StaticResource AdderClass}">

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

Привязка элемента Silverlight к свойству объекта. Теперь класс AdderClass доступен в контексте данных элементам на странице. При этом создается связь между страницей Silverlight и объектом, в котором описано поведение.

Теперь нужно привязать свойства каждого элемента к свойствам объекта. Для этого можно использовать область свойств для каждого элемента. Нужно связать текст элемента firstNumberTextBox со свойством TopValue класса AdderClass. Если щелкнуть по элементу TextBox в редакторе Visual Studio, откроется область свойств для этого элемента, в которой для свойства Text в контекстном меню нужно выбрать пункт Применить привязку данных…. После этого откроется окно, в котором нужно указать, с каким свойством какого объекта требуется связать выбранное свойство элемента.

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

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

После установки привязки программа будет работать. При этом содержимое файла MainPage.xaml.cs с кодом программы не изменится. Вся работа теперь выполняется в классе, который соединен с визуальными элементами. Изменение содержимого элементов TextBox, используемых для ввода значений, приведет к возникновению события класса AdderClass, которые приведут к изменению содержимого класса AnswerValue, связанного с элементом ResultTextBlock.

Привязка данных через свойство DataContext

Для установки привязки к данным потребовалось проделать большую работу. Однако, существует способ упростить выполнение этих действий.

Установка привязки данных в XAML. Можно просто связать свойство объекта со свойством элемента в XAML-коде, и Silverlight выполнит привязку.

<TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0"
    Name="firstNumberTextBox" Text="{Binding TopValue, Mode=TwoWay}"
    VerticalAlignment="Top" Width="460" TextAlignment="Center" />

В этом коде указана привязка текста элемента к свойству TopValue объекта. Режим привязки установлен в значение TwoWay, чтобы изменения в программе (при вычислении результата) отображались на экране. Если нужно использовать визуальный элемент только для того, чтобы показать значение (например, результат вычисления), можно использовать режим привязки OneWay.

Установка свойства DataContext. Теперь остается создать экземпляр класса AdderClass и присвоить его свойству DataContext элемента, содержащего элемент firstNumberTextbox. Это можно сделать в конструкторе для основной страницы.

// Конструктор
public MainPage()
{
    InitializeComponent();

    AdderClass adder = new AdderClass();
    ContentGrid.DataContext = adder;
}

Свойство DataContext элемента Silverlight идентифицирует объект, который содержит все свойства, связанные с элементом и с теми элементами, которые в нем содержатся. Элемент ContentGrid содержит элементы TextBox и TextBlock, и теперь каждая привязка, которую эти элементы содержат, будет отображаться на созданный экземпляр класса AdderClass.

В этом примере вся тяжелая работа с областью свойств и ресурсами заменена на небольшое количество XAML-кода и одну строку кода.

8.3. Управление ориентацией страницы приложения

Альбомная и книжная ориентация

Существует два варианта ориентации устройства: альбомная (устройство расположено горизонтально) и книжная (устройство расположено вертикально). Телефон может определить ориентацию, и некоторые встроенные приложения правильно обрабатывают изменение ориентации телефона.

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

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

SupportedOrientations="Portrait" Orientation="Portrait"

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

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

С этими настройками при изменении ориентации телефона приложение также будет изменять ориентацию (рис. 8.4).

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

<TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0"
    Name="firstNumberTextBox" Text="0" VerticalAlignment="Top" Width="460"
    TextAlignment="Center" />

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

Существует два способа исправления подобной ошибки. Один способ заключается в изменении параметров расположения элементов при изменении ориентации телефона.

Событие OrientationChanged. Класс PhoneApplicationPage включает событие OrientationChanged, которое происходит при изменении ориентации страницы. Как и для других событий, для него можно создать метод-обработчик, в который нужно добавить код для обработки изменения ориентации экрана:

private void PhoneApplicationPage_OrientationChanged(object sender,
    OrientationChangedEventArgs e)
{
    if (e.Orientation == PageOrientation.PortraitUp)
    {
        setPortrait();
    }
    else
    {
        setLandscape();
    }
}

Этот код использует параметр, значение которого определяет новую ориентацию, и вызывает соответствующий метод. Методы изменяют значения отступов от краев элементов, чтобы разместить их подходящим для определенной ориентации образом:

private void setLandscape()
{
    firstNumberTextBox.Margin = new Thickness(8, 19, 0, 0);
    firstNumberTextBox.Width = 207;
    secondNumberTextBox.Margin = new Thickness(252, 19, 0, 0);
    secondNumberTextBox.Width = 207;
    plusTextBlock.Margin = new Thickness(221, 35, 0, 0);
    resultTextBlock.Margin = new Thickness(538, 35, 0, 0);
}

Код метода setPortrait аналогичен методу setLandscape. Элементы располагаются в соответствии со значениями свойства Margin. Отступы от краев задаются значением свойства Thickness, которое содержит величину отступа и ширину границы. В нашем случае ширина границы установлена в 0, поэтому граница не будет отображаться. После добавления этих методов приложение будет работает в обоих режимах ориентации (рис. 8.5).

Часто приложения при изменении ориентации экрана используют анимацию перемещения элементов. Для создания подобных эффектов рекомендуется использовать инструмент Expression Blend.

Использование контейнеров для группировки элементов

Среди элементов Silverlight есть элементы-контейнеры, которые могут содержать другие элементы. Существует несколько различных типов контейнеров, среди которых есть элемент StackPanel.

Элемент StackPanel содержит последовательность элементов Silverlight. Он позволяет располагать вложенные в него элементы в определенном порядке. Элементы в контейнере могут располагаться вертикально (сверху вниз) или горизонтально (слева направо). Вместо того, чтобы настраивать для визуальных элементов отступы от краев экрана, можно поручить эту работу элементу StackPanel:

<StackPanel>  
    <TextBox InputScope="Digits" Height="72" HorizontalAlignment="Center"
        Name="firstNumberTextBox" VerticalAlignment="Top" Width="460"
        TextAlignment="Center" />
    <TextBlock Height="56" HorizontalAlignment="Center" Name="plusTextBlock" Text="+"
        VerticalAlignment="Top" FontSize="32" Width="25" />
    <TextBox InputScope="Digits" Height="72" HorizontalAlignment="Center"
        Name="secondNumberTextBox" VerticalAlignment="Top" Width="460"
        TextAlignment="Center" />
    <TextBlock Height="46" HorizontalAlignment="Center" Name="resultTextBlock"
        VerticalAlignment="Top" FontSize="30" Width="160" TextAlignment="Center" />
</StackPanel>

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

При таком подходе возникает очень полезный побочный эффект, который заключается в том, что контейнер StackPanel автоматически перестроит элементы при изменении ориентации экрана (рис. 8.6).

Элемент StackPanel можно добавить к проекту, перетащив его с панели инструментов Visual Studio в окно дизайнера или вводя текст XAML вручную. Если элемент StackPanel должен группировать элементы горизонтально, нужно указать соответствующий атрибут:

<StackPanel Orientation="Horizontal">

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

Существуют и другие типы контейнеров. Один из них — элемент Grid. Он позволяет создать прямоугольную сетку из элементов, в каждом из которых может размещаться один или несколько элементов. Фактически в приложении Сумматор экран содержит сетку, состоящую из одного элемента, который занимает всю доступную область экрана.

8.4. Отображение списков данных

Часто в приложениях необходимо выводить списки каких-либо объектов. Для этого необходимы специальные средства, предусматривающие отображение списочных данных.

В качестве примера рассмотрим создание списка клиентов компании. Информация о клиентах включает: имя клиента, адрес и идентификатор. Класс Customer может выглядеть так:

public class Customer
{
    public string Name { get; set; }
    public string Address { get; set; }
    public int ID { get; set; }

    public Customer(string inName, string inAddress, int inID)
    {
        Name = inName;
        Address = inAddress;
        ID = inID;
    }
}

Этот класс имеет единственный метод, который является конструктором, принимающим три параметра.

Теперь нужно сохранить список клиентов. Лучший способ для хранения списков объектов — использование класса List, который входит в состав языка C#. Можно создать класс Customers, содержащий имя списка клиентов и сам список:

public class Customers
{
    public string Name { get; set; }

    public List<Customer> CustomerList;

    public Customers(string inName)
    {
        Name = inName;
        CustomerList = new List<Customer>();
    }
}

Класс Customers содержит единственный метод, который является конструктором класса. Он определяет имя списка и создает пустой список. Используя этот класс, можно создать новый список таким образом:

Customers mailCustomers = new Customers("Список клиентов");

Теперь нужно заполнить созданный пустой список информацией о клиентах.

Создание данных для списка

Для нашего примера не имеет значение, какие имена будут у клиентов — главное, чтобы информация о клиентах была разной. Обычно такую информацию удобно хранить в базе данных, но мы пока сгенерируем список на основе небольшого количества данных. Создадим метод, который будет возвращать готовый список:

public static Customers MakeTestCustomers()
{
    string[] firstNames = new string[] { "Rob", "Jim", "Joe", "Nigel", "Sally",
        "Tim"};
    string[] lastsNames = new string[] { "Smith", "Jones", "Bloggs", "Miles",
        "Wilkinson", "Brown" };
    Customers result = new Customers("Тестовый список");
    int id = 0;

    foreach (string lastName in lastsNames)
    {
        foreach (string firstname in firstNames)
        {
            // формирование имени клиента
            string name = firstname + " " + lastName;
            // добавление клиента в список
            result.CustomerList.Add(new Customer(name, name + "'s House", id));
            // увеличение значения идентификатора для следующего клиента
            id++;
        }
    }
    return result;
}

В этом коде создается 36 клиентов комбинированием всех заданных имен и фамилий. У каждого клиента свой уникальный идентификационный номер. Метод MakeTestCustomers является статическим, чтобы не нужно было создавать список перед получением тестовых данных. Теперь можно использовать полученный список в программе:

customerList = Customers.MakeTestCustomers();

Использование элемента StackPanel для вывода списка на экран

Следующим шагом будет вывод полученного списка клиентов на экран Windows Phone. Для этого можно поместить имя каждого клиента в отдельный элемент TextBlock. Требуется, чтобы элементы могли размещаться на экране независимо от их количества. Для этого можно использовать элемент StackPanel:

<StackPanel HorizontalAlignment="Left" Margin="0,0,0,0" Name="customersStackPanel"
    VerticalAlignment="Top" />

Элементы TextBlock можно создавать в программе с помощью следующего кода:

customers = Customers.MakeTestCustomers();

foreach (Customer c in customers.CustomerList)
{
    TextBlock customerBlock = new TextBlock();
    customerBlock.Text = c.Name;
    customersStackPanel.Children.Add(customerBlock);
}

В этом коде для каждого клиента создается элемент TextBlock, в котором в текстовое поле записывается имя клиента, после чего этот элемент добавляется customersStackPanel. Как видно из примера, визуальные объекты можно создавать как в XAML-коде, так и в коде программы на C#.

Полученная программа может выводить на экран список любого размера (рис. 8.7).

Однако, некоторые элементы не видны на экране, поскольку находятся за его пределами. Это является существенным недостатком. Решить проблему можно, добавив в программу возможность прокрутки экрана вверх и вниз, чтобы пользователь мог увидеть остальную часть списка. Такую возможность предоставляет элемент ScrollViewer, если в него поместить элемент StackPanel:

<ScrollViewer>
  <StackPanel HorizontalAlignment="Left" Margin="9,6,0,0" Name="customersStackPanel"
      VerticalAlignment="Top" />
</ScrollViewer>

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

Использование элемента ListBox для отображения списка элементов

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

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

<DataTemplate>
  <StackPanel>
    <TextBlock Text="{Binding Name}" />
    <TextBlock Text="{Binding Address}" />
  </StackPanel>
</DataTemplate>

Этот шаблон данных определяет, что информация должна выводиться в элемент StackPanel, который содержит два элемента TextBlock с именами Name и Address. В соответствии с этим шаблоном будут выводиться две строки: в первой строке указывается имя клиента, во второй — его адрес. При этом, в шаблоне не указано значение идентификатора, поскольку нам не нужно выводить это значение на экран.

Использование шаблона DataTemplate для списка. Шаблон данных указывает Silverlight как нужно выводить на экран свойства объекта. Его можно использовать для вывода списка клиентов на экран. Для этого нужно поместить шаблон DataTemplate в секции ItemTemplate элемента ListBox, который выведет на экран информацию о клиентах:

<ListBox Name="customerList">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Address}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Этот код настраивает внешний вид списка данных, вывод которого на экран осуществляет элемент customerList. Теперь нужно указать список данных, которые должны выводиться на экран:

customers = Customers.MakeTestCustomers();
customerList.ItemsSource = customers.CustomerList;

Этот код получает тестовый список клиентов, который присваивается свойству ItemSource элемента customerList. Элемент ListBox выведет на экран каждый объект в наборе как элемент списка (рис. 8.8).

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

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

Преимущество использования встроенных стилей заключается в том, что они используют различные цветовые схемы Windows Phone. К элементам TextBlock в шаблоне DataTemplate можно добавить названия используемых стилей:

<DataTemplate>
  <StackPanel>
    <TextBlock Text="{Binding Name}"
        Style="{StaticResource PhoneTextExtraLargeStyle}" />
    <TextBlock Text="{Binding Address}" 
        Style="{StaticResource PhoneTextSubtleStyle}" />
  </StackPanel>
</DataTemplate>

В этом коде используются встроенные стили ExtraLargeStyle для имени клиента и SubtleStyle для адреса. Теперь список визуально воспринимается гораздо лучше (рис. 8.9).

Выбор элементов списка. Следующим шагом будет добавление в программу возможности редактирования данных. При выборе одного из элементов списка должен отображаться экран для редактирования выбранного элемента (рис. 8.10).

При выборе элемента списка элемент ListBox генерирует событие SelectionChanged, для которого можно создать обработчик. Обработчик может выглядеть так:

private void customerList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // получение содержимого выбранного элемента
    Customer selectedCustomer = customerList.SelectedItem as Customer;

    MessageBox.Show("Выбран элемент " + selectedCustomer.Name);
}

Класс customerList содержит свойство SelectedItem, который является ссылкой на выбранный объект. В этом коде выбранный объект приводится к типу Customer, и программа выводит на экран окно с сообщением, в котором указано имя выбранного клиента.

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

8.5. Навигация по страницам приложения

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

Для добавление новой страницы в приложение нужно выбрать в главном меню Visual Studio пункт Проект -> Добавить новый элемент…. Откроется окно со списком шаблонов, которые можно добавить в проект. Выберем в списке пункт Страница Windows Phone в книжной ориентации и укажем имя новой страницы CustomerDetailPage.xaml. После нажатия на кнопку Добавить в проект будет добавлена новая страница приложения Windows Phone. Работа с новой страницей ничем не отличается от работы со страницей MainPage.

Навигация по страницам

Модель перемещения по страницам Silverlight больше похожа на навигацию в Интернете, чем на приложение Windows Forms. У каждой страница есть свой адрес, который указывается в виде URI (универсальный идентификатор ресурса). Объект NavigationService предоставляет методы для навигации.

// перемещение к странице CustomerDetailPage.xaml
NavigationService.Navigate(new Uri("/CustomerDetailPage.xaml",
    UriKind.RelativeOrAbsolute));

Этот код вызовет переход приложения на страницу CustomerDetailPage. Обратите внимание, что метод Navigate принимает значение URI, которое содержит название страницы и тип URI.

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

Использование кнопки Назад. Пользователи Windows Phone ожидают, что при нажатии на аппаратную кнопку Назад произойдет переход к предыдущей странице. Эта функциональность автоматически поддерживается во всех приложениях для Windows Phone. Если пользователь нажмет кнопку Назад на странице MainPage, то приложение завершит работу.

Иногда необходимо переопределить это поведение, например, чтобы пользователь не переходил на другую страницу, если не сохранил введенные данные. Переопределить поведение кнопки Назад можно в обработчике события BackKeyPress, в котором можно при необходимости отменить переход:

private void PhoneApplicationPage_BackKeyPress(object sender,
    System.ComponentModel.CancelEventArgs e)
{
    e.Cancel = true;
}

Этот метод-обработчик события BackKeyPress отменяет переход к предыдущей странице при нажатии на кнопку Назад.

Если нужно, чтобы пользователь подтвердил намерение перейти на другую страницу, можно использовать класс MessageBox:

private void PhoneApplicationPage_BackKeyPress(object sender,
    System.ComponentModel.CancelEventArgs e)
{
    if (MessageBox.Show("Вы действительно хотите перейти на другую страницу?",
        "Подтверждение перехода", MessageBoxButton.OKCancel) != MessageBoxResult.OK)
    {
        e.Cancel = true;
    }
}

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

Передача данных между страницами

Каждая страница Silverlight работает независимо других страниц, и данные каждой страницы приложения недоступны другим страницам. Но иногда нужно передавать данные из одной страницы в другую. Если данные являются простой строкой текста, самый простой способ передачи — добавить строку к URI целевой страницы. Этот метод похож на отправку запросов на веб-сервер.

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

private void customerList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // получение информации о выбранном клиенте
    Customer selectedCustomer = customerList.SelectedItem as Customer;

    // формирование строки адреса с информацией о клиенте
    NavigationService.Navigate(new Uri("/CustomerDetailPage.xaml?name=" +
        selectedCustomer.Name + "address=" + selectedCustomer.Address,
        UriKind.Relative));
}

Этот метод вызывается, когда пользователь выбирает клиента. Метод получает информацию о выбранном клиенте и формирует URI целевой страницы, в который добавляет информацию о выбранном клиенте. Часть запроса после символа "?" состоит из двух записей вида имя=значение, разделенных символом "".

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

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

Для того чтобы приложение получило управление при перемещении пользователя к странице, нужно переопределить OnNavigatedTo:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    string name, address;
    if (NavigationContext.QueryString.TryGetValue("name", out name))
        nameTextBlock.Text = name;
    if (NavigationContext.QueryString.TryGetValue("address", out address))
        addressTextBlock.Text = address;
}

Этот метод пытается получить из свойства QueryString объекта NavigationContext значения переданных в строке адреса параметров. Каждый раз, когда пользователь переходит к этой странице, этот метод вызывается и выводит на страницу переданные значения параметров. Можно использовать событие OnNavigatedTo для настройки страницы, когда пользователь переходит к ней. При переходе на страницу можно передавать любое количество параметров.

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

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

Однако, в этом коде есть проблема, которая возникает при выполнении следующей последовательности действий:

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

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    customerList.SelectedItem = null;
}

Теперь при повторном выборе того же самого элемента он будет считаться "новым" выбранным элементом. Однако, установка значения выбранного элемента в null также расценивается как выбор элемента, и при попытке обращения к значению этого свойство возникнет исключение. Избежать этого можно, добавив в обработчик события проверку, был ли выбран элемент:

private void customerList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // отмена вызова, если элемент не выбран
    if (customerList.SelectedItem == null)
        return;

    // код метода
}

Совместное использование объектов несколькими страницами

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

Можно легко предоставить совместный доступ к объектам для всех страниц приложения. Для этого используется страница App.xaml, которая автоматически создается при создании проекта приложения. Ее можно считать контейнером для приложения Windows Phone. Эта страница не выводится на экран, но файл App.xaml.cs содержит методы, которые выполняются при запуске приложения.

Можно изменить файл App.xaml.cs и добавить в него свой код. Если нужно хранить какие-либо глобальные данные, которые должны быть доступны всем страницам приложения, их объявления можно разместить здесь.

public partial class App : Application
{
    // объект используется другими страницами приложения
    public Customer ActiveCustomer;  
}

Этот код содержит объявление объекта ActiveCustomer, который будет доступен всем страницам. Объект содержит ссылку на информацию о выбранном клиенте.

Любая страница Silverlight может получить ссылку на объект, размещенный на странице App:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    // получение ссылки на страницу с информацией о текущем клиенте
    App thisApp = Application.Current as App;

    // установка контекста данных для отображения в элементе Grid
    customerDisplayGrid.DataContext = thisApp.ActiveCustomer;
}

Свойство Current класса Application является ссылкой, по которой можно обратиться к объектам в классе Application. При запуске приложения ей присваивается значение адреса текущей страницы.

Класс App.xaml.cs определяет дочерний класс App, который расширяет родительский класс Application. Чтобы получить объекты, определенные в классе App, нужно получить значение свойства Current класса Application и привести ее к типу App. Приведенный выше код запускается на странице customerDetailsPage, когда к ней происходит переход. При этом вызывается объект ActiveCustomer, который устанавливается в качестве контекста данных объекта customerDisplayGrid для обращения к выбранному клиенту.

Все объекты приложения, которые должны быть доступны другим страницам, имеет смысл помещать в класс App.xaml.cs. Здесь также можно добавить код, который при запуске программы будет загружать данные в эти объекты из хранилища.

8.6. Использование классов ViewModel

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

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

<TextBox Name="nameTextBox" Text="{Binding Name, Mode=TwoWay}" />

После этого можно добавить код к классу Customer классу для управления связанными событиями. Этот код при изменении имени клиента должен изменяться текст на экране, и если текст элемента TextBox изменится, то связанное с элементом также должно изменяться автоматически. Но можно сделать это немного иначе, использовав модель, известную под названием Model—View—ViewModel.

Создание класса ViewModel

Можно добавить привязку данных с классом Customer, но есть некоторые причины, почему это не является хорошей идеей. Существует правило проектирования программного обеспечения: обычно класс должен выполнять одно действие, и только одно. Класс Customer должен хранить данные о клиентах, но не должен участвовать в процессе редактирования. При хранении или передаче данных о клиентах мы не должны создавать методы, которые касаются редактирования данных. При передаче объекта, представляющего клиента, на другое устройство или при осуществлении привязки данных любое дополнительное свойство или метод будет лишней тратой пространства, так как не будет использоваться в этом контексте.

Возможность преобразования и проверки допустимости данных. В идеале, при вводе данных пользователем всегда должна осуществляться проверка соответствия вводимых данных определенным правилам. Например, должно соблюдаться правило: "Имя должно содержать только буквы и пробелы". Можно поместить эти правила в класс Customer, но будет намного проще указать их непосредственно в процессе ввода данных, так как они должны использоваться только при вводе данных. Также полезна возможность выполнять преобразование некоторых входных значений, например даты и времени, из текстового формата, в котором они вводятся и выводятся, в формат, в котором значения хранятся.

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

Создание класса ViewModel. Можно избежать этих проблем, создав класс ViewModel. Этот класс предназначен для представления данных и связывания с компонентами формы и также может выполнять необходимые проверки допустимости данных.

Создадим класс ViewModel для представления действий, которые нужно выполнить в пользовательском интерфейсе. Этот класс соединяет пользовательский интерфейс с объектами данных, содержит свойства, которые будут использоваться в пользовательском интерфейсе:

public class CustomerView : INotifyPropertyChanged
{  
    private string name;

    public string Name
    {
        get
        {
            return name;
        }
        set
        {
            name = value;

            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("name"));
            }
        }
    }

    // свойство Address создается таким же образом

    private int id;

    public int ID
    {
        get
        {
            return id;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void Load(Customer cust)
    {
        Name = cust.Name;
        Address = cust.Address;
        id = cust.ID;
    }

    public void Save(Customer cust)
    {
        cust.Name = Name;
        cust.Address = Address;
    }
}

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

Работа с данными в классе ViewModel. Класс CustomerView также содержит методы Load и Save, предназначенные для взаимодействия программы с содержимым класса ViewModel. Следующий код выполняется перед началом редактирования информации о клиенте:

// создание экземпляра класса ViewModel для страницы редактирования
CustomerView view = new CustomerView();

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{  
    // получить ссылку на страницу, содержащую информацию об активном клиенте
    App thisApp = Application.Current as App;  

    // загрузить объект с информацией об активном клиенте в класс ViewModel
    view.Load(thisApp.ActiveCustomer);

    // установить контекст данных для отображения
    customerDisplayGrid.DataContext = view;
}

Когда программа переходит на страницу для редактирования информации о клиенте, Silverlight вызывает метод OnNavigatedTo для настройки страницы. Этот метод получает информацию о выбранном клиенте и загружает ее в экземпляр класса CustomerView.

Когда пользователь нажимает кнопку сохранить, программа должна выгрузить содержимое класса ViewModel в редактируемое свойство Customer:

private void saveButton_Click(object sender, RoutedEventArgs e)
{  
    // получить ссылку на страницу, содержащую информацию об активном клиенте
    App thisApp = Application.Current as App;

    // скопировать данные из класса ViewModel в свойство ActiveCustomer
    view.Save(thisApp.ActiveCustomer);

    // вернуться на предыдущую страницу
    NavigationService.GoBack();
}

Навигация по страницам с использованием метода GoBack

Класс NavigationService содержит метод GoBack, который переносит пользователя к предыдущей странице. Это эффективнее, чем использование URI, потому что при этом страница не обновляется. Если перейти на страницу, используя метод Navigate класса NavigationService, будет создана новая страница, и она будет создаваться каждый раз при переходе на нее. Это может замедлить работу приложения и привести к созданию и освобождению большого количества элементов Silverlight. Кроме того, неудобно при каждом переходе на страницу со списком прокручивать ее вниз, поскольку в этом случае при переходе на страницу будет отображаться начало списка.

Однако, использование метода GoBack для перехода к предыдущей странице приводит к возникновению некоторых проблем. Трудность состоит в том, что предыдущая страница не будет содержать изменения данных, которые внесет пользователь. Например, пользователь выполняет следующие действия:

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

Наблюдаемые коллекции

Класс ObservableCollection используется для хранения коллекции элементов и предоставляет поддержку уведомлений так, чтобы при изменении коллекции элемент ListBox можно было связать с событием изменения. Для создания наблюдаемой коллекции можно использовать имеющийся список:

ObservableCollection<Customer> observableCustomers;

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
    // получить ссылку на страницу, содержащую список клиентов
    App thisApp = Application.Current as App;  

    // создать наблюдаемую коллекцию этих клиентов
    observableCustomers = new ObservableCollection<Customer>(
        thisApp.ActiveCustomerList.CustomerList);

    // отображение элементов наблюдаемой коллекции
    customerList.ItemsSource = observableCustomers;
}

Этот код выполняется при запуске главной страницы приложения. Он создает новый список observableCustomers на основе имеющегося списка клиентов и устанавливает этот список в качестве источника данных элемента customerList. Теперь, при изменении значения элементов в списке эти изменения будут отображаться на экране.

Однако, если пользователь обновит имя клиента, это изменение не будет отражено на экране, потому что ObservableCollection реагирует на изменение содержимого списка, но не на изменение данных в элементе списка. Это является очень серьезным недостатком, приводящим к неправильной работе программы.

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

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    // получить ссылку на страницу, содержащую список клиентов
    App thisApp = Application.Current as App;

    if (thisApp.ActiveCustomer != null)
    {
        // найти нужного клиента в списке
        int pos = observableCustomers.IndexOf(thisApp.ActiveCustomer);
        // удалить клиента
        observableCustomers.RemoveAt(pos);
        // вернуть клиента назад
        observableCustomers.Insert(pos, thisApp.ActiveCustomer);
    }
}

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

При использовании класса ViewModel для редактирования информации о клиенте мы создавали методы для загрузки и сохранения информации, которые заносили информацию о клиенте в класс CustomerView и затем возвращали обновленные значения. При использовании класса ObservableCollection необходимо сделать что-то похожее. К счастью, существует много способов получения списка данных из класса ObservableCollection. Например, можно использовать расширяющий метод ToList:

thisApp.ActiveCustomerList.CustomerList = observableCustomers.ToList<Customer>();

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

Краткие итоги

Вопросы

Упражнения

Упражнение 1. Добавление обработки ошибок

Существующая версия программа Калькулятор времени работает при вводе правильных числовых значений, но выдает исключение, если пользователь введет значения, лежащие вне диапазона, или произвольный текст, который не является числом. Необходимо добавить в программу код для обработки следующих ошибок:

В этом упражнении Вы улучшите версию программы, созданную другим программистом.

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

Упражнение 2. Улучшение пользовательского интерфейса

Элементы TextBox в приложении могут генерировать событие TextChanged, когда пользователь вводит новые значения. Связанный с этими событиями код может автоматически обновлять значения на экране.

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

Упражнение 3. Использование привязки данных

Другой программист создал класс TimeClass для приложения. В классе пять свойств:

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

Добавление класса TimeClass в качестве ресурса

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

xmlns:mc = "http://schemas.openxmlformats....

xmlns:local = "clr-namespace:TimeCalculator"

shell:SystemTray.IsVisible="True">

<phone:PhoneApplicationPage.Resources>
  <local:TimeClass x:Key="TimeClass" />
</phone:PhoneApplicationPage.Resources>

DataContext = "{StaticResource TimeClass}"

Связывание данных со свойствами элементов

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

Упражнение 4. Связывание данных со списками

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

Класс Session

Этот класс содержит текстовое описание встречи и ее продолжительность в минутах.

public class Session
{
    public string Description { get; set; }
    public int LengthInMins { get; set; }
  
    public Session(string inDescription, int inLength)
    {
        Description = inDescription;
        LengthInMins = inLength;
    }
}

Класс Customer содержит список встреч с клиентом.

public List<Session> Sessions;

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

Увеличение количества тестовых данных

Для начала нужно изменить метод MakeTestCustomers класса Customers, чтобы создать больше тестовых данных.

int noOfSessions = sessionRand.Next(1,4);

Добавление навигации по страницам

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

NavigationService.Navigate(new Uri("/SessionDetailPage.xaml",
    UriKind.RelativeOrAbsolute));

Добавление привязки данных на страницу Sessions

// получить ссылку на страницу, содержащую информацию о выбранном клиенте
App thisApp = Application.Current as App;

CustomerName.DataContext = thisApp.ActiveCustomer;
SessionList.ItemsSource = thisApp.ActiveCustomer.Sessions;