Блог

Я хочу создать анимированную кнопку в Windows Phone 8 Silverlight, используя шаблон MVVM. Этот элемент управления должен работать следующим образом:

При нажатии, если его значение правильное, это вызовет вращающуюся анимацию. Когда текст не будет виден (повернут на 90 градусов вокруг оси Y), я бы изменил текст на кнопке на что-то вроде «Да!», А затем он вернется в нормальное состояние. В случае, если значение будет неверным, я бы изменил фон на красный, без поворота.

В WPF я мог бы использовать DataTriggers, поэтому я выглядел бы так:

1) Пользователь нажимает кнопку -> Выполняется команда

2a) Если значение правильное, я изменяю в viewmodel некоторое значение, которое запускает DataTrigger, который запускает первую анимацию, поворачивающую кнопку на 90 градусов

3a) Завершение анимации запускает команду, которая изменяет текстовое значение

4a) Изменение текста запускает второй поворот, который вначале поворачивает кнопку на 180 градусов, а затем выполняет обычный поворот на 90 градусов, поэтому похоже, что новый текст находится на другом сайте

2b) Если значение неверно, я меняю некоторое значение на значение, вызывающее анимацию неправильного значения

Но в Windows phone silverlight нет триггеров в стилях, поэтому проще всего было бы просто использовать code-behind, но я хотел сделать это в MVVM. Может быть, кто-то сталкивался с подобной проблемой. В настоящее время я подумываю об использовании сообщений из MVVM Light toolkit, но я не уверен, сработает ли это

Редактировать:

Хорошо, благодаря совету Мухаммеда Сайфуллы мне удалось заставить его работать. Я использую команду кнопки для отправки щелчка на виртуальную машину, затем я использую MVVM light Toolkit для отправки сообщения в view для запуска анимации. К сожалению, EventToCommand из MVVM light toolkit не работает для раскадровки, поэтому я просто выполняю команду виртуальной машины в коде за завершенным событием, которое изменяет значение и отправляет следующие сообщения.

Вы можете привязать команду из вашего xaml к вашей виртуальной машине. Ниже приведен пример того, как вы привязываете команду в MVVM Light.

Для кнопки

 <Button ....>
<i:Interaction.Triggers>
   <i:EventTrigger EventName="Click">
     <MvvmLight_Command:EventToCommand Command="{Binding Navigate}" CommandParameter="{Binding ElementName=btnClockin,Path=Tag}"></MvvmLight_Command:EventToCommand>
     </i:EventTrigger>
</i:Interaction.Triggers>
  

Добавьте следующие ссылки на сборки на странице xaml

   xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
  xmlns:MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP8"
  

Код команды в виртуальной машине

 /// <summary>
    /// Gets the Navigate.
    /// </summary>
    public RelayCommand<object> Navigate
    {
        get
        {
            return _navigate
                ?? (_navigate = new RelayCommand<object>(
                                      page =>
                                      {
                                          if (page.ToString() == "0")
                                              MessageBox.Show("Comming Soon");
                                          else
                                              Messenger.Default.Send<NavigateCommand, MyPge33>(new NavigateCommand(page.ToString()));
                                      }));
        }
    }
  

Аналогичным образом можно привязывать команды на своей панели раскадровки. Но для запуска раскадровки вы можете отправить сообщение со своей виртуальной машины на свой view.xaml.cs, чтобы запустить раскадровку.

Надеюсь, это поможет.