Повторное использование существующих компонентов Silverlight с Windows Phone 7

<Button Command="{Binding CalculateCommand}"/>

Код для представления можно найти в прилагаемом исходном коде в файле MainPage.xaml.

public class SavingsCalculatorViewModel: INotifyPropertyChanged
{
    private SavingsCalculatorModel _model;

    public int NumberOfYears
    {
        get
        {
            return _model.NumberOfYears;
        }
        set
        {
            _model.NumberOfYears = value;
        }
    }
    // Similarly wrapping of  AnnualInterest, InitialAmount, MonthlyDeposit, FinalSavingsWithInterest and FinalSavingsWithoutInterest
  (...)

   public ICommand CalculateCommand
    {
        get
        {
            return new RelayCommand(CalculateSavings) { IsEnabled = true };
        }
    }

    private void CalculateSavings()
    {
        _model.CalculateSavings();
        RaisePropertyChanged("FinalSavingsWithoutInterest");
        RaisePropertyChanged("FinalSavingsWithInterest");
    }

    // Constructor initializing the default values and INotifyProperyChanged implementations
    (...)

ViewModel

ViewModel отвечает за склейку модели и вида. Он должен будет раскрыть все свойства, с которыми будет связан Вид, и обернуть их вокруг Модели. В этом примере ViewModel довольно прост: он действует как обертка вокруг модели, устанавливает для нее значения по умолчанию при инициализации и предоставляет команду
CalculateCommand, которая запускается при нажатии кнопки вычисления. В примере используется простая реализация ICommand —
версия RelayCommand Джоша Смита . Важными частями кода ViewModel являются следующие:

public class SavingsCalculatorViewModel: INotifyPropertyChanged
{
    private SavingsCalculatorModel _model;

    public int NumberOfYears
    {
        get
        {
            return _model.NumberOfYears;
        }
        set
        {
            _model.NumberOfYears = value;
        }
    }
    // Similarly wrapping of  AnnualInterest, InitialAmount, MonthlyDeposit, FinalSavingsWithInterest and FinalSavingsWithoutInterest
  (...)

   public ICommand CalculateCommand
    {
        get
        {
            return new RelayCommand(CalculateSavings) { IsEnabled = true };
        }
    }

    private void CalculateSavings()
    {
        _model.CalculateSavings();
        RaisePropertyChanged("FinalSavingsWithoutInterest");
        RaisePropertyChanged("FinalSavingsWithInterest");
    }

    // Constructor initializing the default values and INotifyProperyChanged implementations
    (...)

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

  <TextBlock Text="Monthly Deposit:" Style="{StaticResource PhoneTextTitle2Style}" />

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

  <TextBox Text="{Binding InitialAmount, Mode=TwoWay}" InputScope="Number"/>

• Жирный текст на телефоне не так выделяется, как в Интернете. Чтобы конечная экономия стала более заметной, давайте установим ее цвет в качестве акцентирующего цвета телефона:

  <TextBlock Text="Final Savings:" Foreground="{StaticResource PhoneAccentBrush}" Style="{StaticResource PhoneTextTitle2Style}" FontWeight="Bold" />

• Windows Phone не поддерживает ICommands для элементов ввода, поэтому нам нужно подключиться к триггерам событий и перенаправить эти триггеры в команды. Для этого мы будем использовать вспомогательный класс EventToCommand из MVVM Light . См. Раздел «Внедрение командования последовательным способом» для более подробной информации.

Обзор портирования

Перенос этого приложения Silverlight на Windows Phone оказался удивительно простым: мы смогли повторно использовать слои Model и ViewModel исходного приложения без изменений, и нам пришлось только переписать View. Однако, поскольку приложение Silverlight, запускаемое в браузере и на телефоне, требует различных пользовательских интерфейсов, нам пришлось бы вносить изменения в пользовательский интерфейс телефона во всех случаях.

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

Решение, содержащее Model, ViewModel, Silverlight View и Windows Phone 7 View, можно
загрузить здесь . Чтобы запустить приложение Silverlight, создайте и запустите проект SavingsCalculatorSilverlight, для приложения Windows Phone создайте и запустите проект SavingsCalculatorWP7.

Тем не менее, можно повторно использовать
UserControls между приложениями Silverlight и Windows Phone. Это можно сделать как на уровне сборки, так и с помощью ссылки на XAML UserControl.

Возможные проблемы при повторном использовании компонентов Silverlight с Windows Phone

Структурирование проекта Silverlight по шаблону MVVM не всегда гарантирует, что код будет на 100% повторно использован. Если приложение Silverlight использует API, которые не реализованы в среде выполнения Windows Phone 7 Silverlight, проект не будет компилироваться для Windows Phone. Поскольку Windows Phone 7 запускает расширенную среду Silverlight 3, в настоящее время эта проблема в основном локализована для нескольких новых API, представленных в Silverlight 4. Однако, когда выйдет Silverlight 5 для Интернета, эта проблема, вероятно, станет более важной.

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

• Оберните определенные вызовы Silverlight 4 (или позже Silverlight 5) между определениями макросов #if! WINDOWS_PHONE (…) #endif . Таким образом, они будут скомпилированы только в проекте Silverlight, так как в проекте Windows Phone по умолчанию определена константа WINDOWS_PHONE .
• Используйте частичные классы и переместите логику, зависящую от версии фреймворка, в файл частичных классов, на который ссылается только решение Silverlight.

Реализация командования последовательным образом

В этом примере мы реализовали команду (связывающую команду кнопки с действием в ViewModel), отличную для приложения Silverlight от порта Windows Phone. Причиной этого было то, что элементы управления вводом в Windows Phone имеют только понятия триггеров, а не команд. Мы разрешили ситуацию с помощью
вспомогательного класса EventToCommand фреймворка
MVVM Light для пересылки событий, вызванных триггерами, командам в ViewModel. Это означает, что, находясь внутри проекта Silverlight, мы использовали следующий синтаксис для привязки к команде:

<Button Content="Calculate" Command="{Binding CalculateCommand}" />

<Button Content="Calculate" xmlns:mvvmlight="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7" xmlns:interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">
    <interactivity:Interaction.Triggers>
        <interactivity:EventTrigger EventName="Click">
            <mvvmlight:EventToCommand Command="{Binding CalculateCommand}" />
        </interactivity:EventTrigger>
    </interactivity:Interaction.Triggers>
</Button>