6

Есть класс PersonVm, который представляет информацию о человеке:

public class PersonVm : BaseViewModel
{
    private string _name;
    public string Name
    {
      get {return _name; }
      set 
      {   
          _name = value;
          RaisePropertyChanged();
      }
    }
}

Класс PersonManager представляет собой коллекцию персон и позволяет добавлять/удалять персоны, а также откатывать эти изменения через UndoRedoService:

public class PersonManager  : BaseViewModel
{
    public ObservableCollection<Person> Persons {get;set;}
    public UndoRedoService UndoRedoService {get;set;} = new UndoRedoService();
}

Хотелось бы также откатывать изменения, которые происходят в PersonVm. Можно было бы подписаться на событие PropertyChangedу всех персон и получать название свойства в котором произошло изменение, текущее и новое значения.

Но в таком случае откатывать изменения пришлось бы через рефлексию — искать по названию нужное свойство и менять его. А это не слишком быстрый способ.

Возможно сделать как-то иначе?

16
  • 1
    Через рефлексию не обязательно, можно и вручную через switch-case. Другой вариант - клонировать целиком экземпляр и хранить его, но там тоже свои минусы 13 авг 2017 в 4:16
  • 1
    Если объект сложный, то его глубокое клонирование тоже придется писать вручную. Ну и объемов я ваших не знаю. Нужно выбрать что вам важнее скорость или потребляемая память? Вам здесь действительно скорость важна? Я так понимаю, что команды Undo/Redo вызывает пользователь, поэтому рефлексия одного свойства - мелочь в сравнении, например, с нагрузками от отображения этого всего в GUI. 13 авг 2017 в 9:08
  • 1
    По клонированию здесь полезная информация со ссылкой на сравнение способов: stackoverflow.com/a/966534/6766879 13 авг 2017 в 9:13
  • 1
    @Maxwell постараюсь чуть позже привести пример решения, которое работает из коробки.
    – sp7
    13 авг 2017 в 12:22
  • 1
    @maxwell, ну а вы пробовали решение с рефлексией и оно вам не подошло или не пробовали еще? У меня в принципе вышло всего строк 70. Могу оформить в виде ответа 14 авг 2017 в 7:27

2 ответа 2

6

Я расширил базовый класс для ViewModel, чтобы он вёл историю изменений. У меня пример тестовый, поэтому так, вам скорее всего потребуются оба класса - с ведением истории и без нее, чтобы можно было наследоваться либо от того либо от другого.
А еще лучше завести список с перечнем классов и их свойств по которым должна вестись история изменений, а может даже и сочинить вместо этого кастомный атрибут.

У меня был такой класс:

abstract class Vm : INotifyPropertyChanged
{
    protected bool Set<T>(ref T field, T value, [CallerMemberName]string propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value))
            return false;
        field = value;
        NotifyPropertyChanged(propertyName);
        return true;
    }

    protected void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    public event PropertyChangedEventHandler PropertyChanged;
}

Я его дополнил следующим функционалом:

    // Пришлось добавить флаги для того чтобы отличать обычную
    //  установку свойства от Undo/Redo
    static bool isUndoProcess = false;
    static bool isRedoProcess = false;

    // Пара стеков для хранения истории
    static Stack<(object Obj, string Prop, object OldValue)> undoHistory
        = new Stack<(object Obj, string Prop, object OldValue)>();

    static Stack<(object Obj, string Prop, object OldValue)> redoHistory
        = new Stack<(object Obj, string Prop, object OldValue)>();

    static void Undo()
    {
        if (undoHistory.Count == 0) return;
        var undo = undoHistory.Pop();
        UndoCommand.RaiseCanExecuteChanged();
        // Обернуто для того чтобы в случае исключения флаг всё равно снимался
        try
        {
            isUndoProcess = true;
            undo.Obj.GetType().GetProperty(undo.Prop).SetValue(undo.Obj, undo.OldValue);
        }
        finally
        {
            isUndoProcess = false;
        }
    }

    static void Redo()
    {
        if (redoHistory.Count == 0) return;
        var redo = redoHistory.Pop();
        RedoCommand.RaiseCanExecuteChanged();
        try
        {
            isRedoProcess = true;
            redo.Obj.GetType().GetProperty(redo.Prop).SetValue(redo.Obj, redo.OldValue);
        }
        finally
        {
            isRedoProcess = false;
        }
    }

    static void SaveHistory(object obj, string propertyName, object value)
    {
        if (isUndoProcess)
        {
            redoHistory.Push((obj, propertyName, value));
            RedoCommand.RaiseCanExecuteChanged();
        }
        else if (isRedoProcess)
        {
            undoHistory.Push((obj, propertyName, value));
            UndoCommand.RaiseCanExecuteChanged();
        }
        else
        {
            undoHistory.Push((obj, propertyName, value));
            UndoCommand.RaiseCanExecuteChanged();
            redoHistory.Clear();
            RedoCommand.RaiseCanExecuteChanged();
        }
    }

    static void ClearHistory()
    {
        undoHistory.Clear();
        UndoCommand.RaiseCanExecuteChanged();
        redoHistory.Clear();
        RedoCommand.RaiseCanExecuteChanged();
    }

    // Команды, которые можно выставлять в GUI
    public static DelegateCommand UndoCommand { get; }
        = new DelegateCommand(_ => Undo(), _ => undoHistory.Count > 0);
    public static DelegateCommand RedoCommand { get; }
        = new DelegateCommand(_ => Redo(), _ => redoHistory.Count > 0);
    public static DelegateCommand ClearHistoryCommand { get; }
        = new DelegateCommand(_ => ClearHistory());

Теперь добавим сохранение в метод Set<T>:

    protected bool Set<T>(ref T field, T value, [CallerMemberName]string propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value))
            return false;
        // Сюда
        SaveHistory(this, propertyName, field);
        field = value;
        NotifyPropertyChanged(propertyName);
        return true;
    }

Обратите внимание, решение не безопасно к потокам, но это и не требуется, т.к. вы должны обновлять свойства VM только в потоке GUI

Здесь использована следующая реализация команды:

class DelegateCommand : ICommand
{
    protected readonly Predicate<object> _canExecute;
    protected readonly Action<object> _execute;

    public event EventHandler CanExecuteChanged;

    public DelegateCommand(Action<object> execute) : this(execute, _ => true) { }

    public DelegateCommand(Action<object> execute, Predicate<object> canExecute)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute ?? throw new ArgumentNullException(nameof(canExecute));
    }

    public bool CanExecute(object parameter) => _canExecute(parameter);

    public void Execute(object parameter) => _execute(parameter);

    public void RaiseCanExecuteChanged()
        => CanExecuteChanged?.Invoke(this, EventArgs.Empty);
}

Ну и пример использования:

class PeopleVm : Vm
{
    string firstName;
    string secondName;
    string lastName;

    public string FirstName
    {
        get => firstName;
        set => Set(ref firstName, value);
    }

    public string SecondName
    {
        get => secondName;
        set => Set(ref secondName, value);
    }

    public string LastName
    {
        get => lastName;
        set => Set(ref lastName, value);
    }
}

class MainVm : Vm
{
    public ObservableCollection<PeopleVm> Peoples { get; }
        = new ObservableCollection<PeopleVm>();

    public DelegateCommand AddPeopleCommand { get; }

    public MainVm()
    {
        Peoples.Add(new PeopleVm { FirstName = "Иван", SecondName = "Петрович", LastName = "Сидоров" });
        AddPeopleCommand = new DelegateCommand(_ => Peoples.Add(new PeopleVm()));
    }
}

Представление:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <ToolBar>
        <Button Content="Undo" Command="{Binding UndoCommand}"/>
        <Button Content="Redo" Command="{Binding RedoCommand}"/>
        <Button Content="Clear" Command="{Binding ClearHistoryCommand}"/>
        <Separator/>
        <Button Content="Add" Command="{Binding AddPeopleCommand}"/>
    </ToolBar>

    <ScrollViewer Grid.Row="1">
        <ItemsControl ItemsSource="{Binding Peoples}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="DarkGreen"
                            BorderThickness="1"
                            Margin="2" CornerRadius="5">
                        <Grid>
                            <Grid.Resources>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Margin" Value="3,3,0,3"/>
                                    <Setter Property="Padding" Value="3"/>
                                    <Setter Property="VerticalAlignment" Value="Center"/>
                                    <Setter Property="HorizontalAlignment" Value="Right"/>
                                </Style>
                                <Style TargetType="TextBox">
                                    <Setter Property="Margin" Value="0,3,3,3"/>
                                    <Setter Property="Padding" Value="3"/>
                                    <Setter Property="VerticalAlignment" Value="Center"/>
                                </Style>
                            </Grid.Resources>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>

                            <TextBlock Grid.Row="0" Text="Имя:"/>
                            <TextBox Grid.Row="0" Grid.Column="1"
                                     Text="{Binding FirstName}"/>

                            <TextBlock Grid.Row="1" Text="Отчество:"/>
                            <TextBox Grid.Row="1" Grid.Column="1"
                                     Text="{Binding SecondName}"/>

                            <TextBlock Grid.Row="2" Text="Фамилия:"/>
                            <TextBox Grid.Row="2" Grid.Column="1"
                                     Text="{Binding LastName}"/>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

Undo-Redo test


Добавляем атрибут!

Создайте класс атрибута:

[AttributeUsage(AttributeTargets.Property)]
class UndoRedoAttribute : Attribute { }

В начало метода Vm.SaveHistory добавим проверку наличия атрибута:

        if (obj.GetType()
               .GetProperty(propertyName)
               .GetCustomAttributes(typeof(UndoRedoAttribute), true)
               .Length == 0) return;

Всё! Теперь достаточно к нужным свойствам прицепить этот атрибут:

class PeopleVm : Vm
{
    ...

    [UndoRedo]
    public string FirstName
    { ... }

    public string SecondName
    { ... }

    [UndoRedo]
    public string LastName
    { ... }
}

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

7
  • Добавил в ответ использование атрибута 15 авг 2017 в 9:55
  • Спасибо! Скажите, а как вы поступаете с методом Set<T> когда в VM свойства лишь обертка над свойствами модели? Т.е. Name {get => Model.Name}. Ведь через ref нельзя передать свойство.
    – trydex
    15 авг 2017 в 9:56
  • 1
    @maxwell, ну можно попробовать что-то типа такого: set { var temp = Model.Name; if (Set(ref temp, value)) Model.Name = temp; } 15 авг 2017 в 10:05
  • Тогда NotifyPropertyChanged придется выносить в блок if, чтобы событие срабатывало после присваивания значения.
    – trydex
    15 авг 2017 в 10:36
  • 2
    Хм, да. Выглядит кривовато. Вообще обычная практика - не работать напрямую с модельными объектами, а иметь их VM-аналоги. А конвертировать их туда-сюда непосредственно при необходимости. Например загрузили из базы, смаппили на объекты VM, пользователь их отредактировал, жмет Сохранить и они маппятся на View-объекты и сохраняются. При таком подходе, например, кнопка отмены вообще почти не имеет кода, мы просто не сохраняем ничего. 15 авг 2017 в 10:56
3

Так как реализация "отката" изменений самостоятельно дело довольное утомительное. Проще использовать готовое решение. Одним из WPF-Фреймворков, который предоставляет данную функциональность из коробки является Catel.

Ниже показан простейший пример такого приложения:

1) Создаем новый проект: File - New - Project... - WpfApplication.

2) Устанавливаем Catel.

PM> Install-Package Catel.MVVM
PM> Install-Package Catel.Core -Version 4.5.4 

3) В проекте создаем стандартную структуру из папок: Models, ViewModels, Views.

введите сюда описание изображения

4) В папке Models cоздаем класс User, представляющий нашу модель, он будет содержать всего пару свойств Name и LastName и наследуем его от ModelBase.

public class UserModel : ModelBase
{
     public string Name
     {
         get { return GetValue<string>(AuthorProperty); }
         set { SetValue(AuthorProperty, value); }
     }

     public static readonly PropertyData AuthorProperty = 
        RegisterProperty(nameof(Name), typeof(string), string.Empty);

    public string LastName
    {
        get { return GetValue<string>(LastNameProperty); }
        set { SetValue(LastNameProperty, value); }
    }
    public static readonly PropertyData LastNameProperty =
        RegisterProperty(nameof(LastName), typeof(string), string.Empty);
}

5) Далее в папке Views создаем нашу View, назовем ее MainView, ее разметка представлена ниже. Обратите внимание, что тип окна catel:Window.

<catel:Window x:Class="WpfApplication1.Views.MainView"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:catel="http://schemas.catelproject.com"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:viewModels="clr-namespace:WpfApplication1.ViewModels"
              Title="MainWindow"
              Width="525"
              Height="350"
              d:DataContext="{d:DesignInstance Type=viewModels:MainViewModel, IsDesignTimeCreatable=False}"
              mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <DataGrid Grid.Row="0"
                  AutoGenerateColumns="False"
                  CanUserAddRows="False"
                  CanUserDeleteRows="False"
                  IsReadOnly="True"
                  ItemsSource="{Binding Users}"
                  SelectedItem="{Binding SelectedUser}">
            <DataGrid.Columns>
                <DataGridTextColumn Width="*"
                                    Binding="{Binding Name}"
                                    Header="Имя" />
                <DataGridTextColumn Width="100"
                                    Binding="{Binding LastName}"
                                    Header="Фамилия" />
            </DataGrid.Columns>
        </DataGrid>
        <Button Grid.Row="1"
                Command="{Binding EditUserCommand}"
                Content="Редактировать" />
    </Grid>
</catel:Window>

6) В папке ViewModels создаем ViewModel для нашей MainView. Назовем ее MainViewModel.

public class MainViewModel : ViewModelBase
{
    // Сервис открытия окон. Поставляется из коробки.
    private readonly IUIVisualizerService _uiVisualizerService;

    public MainViewModel(IUIVisualizerService uiVisualizerService)
    {
        _uiVisualizerService = uiVisualizerService;

        EditUserCommand = new Command(EditUserAsync, () => SelectedUser != null);
    }

    private async void EditUserAsync()
    {
        // Создаем нашу ViewModel.
        var editUserViewModel = new EditUserViewModel(SelectedUser);

        // Передаем объект ViewModel сервису окон, он самостоятельно найдет соответствующую ей View.
        await _uiVisualizerService.ShowDialogAsync(editUserViewModel);
    }

    // Инициализируем коллекцию тестовыми данными.
    protected override Task InitializeAsync()
    {
        Users.Add(new UserModel()
        {
            Name = "Вася",
            LastName = "Иванов"
        });
        Users.Add(new UserModel()
        {
            Name = "Петя",
            LastName = "Петров"
        });

        return base.InitializeAsync();
    }

    public Command EditUserCommand { get; }

    // Catel использует DP для уведомления View об изменении.

    // Выбранный в DataGrid пользователь. 
    public UserModel SelectedUser
    {
        get { return GetValue<UserModel>(SelectedUserProperty); }
        set { SetValue(SelectedUserProperty, value); }
    }
    public static readonly PropertyData SelectedUserProperty =
        RegisterProperty(nameof(SelectedUser),
            typeof(UserModel));

    // Список всех пользователей.
    public ObservableCollection<UserModel> Users
    {
        get { return GetValue<ObservableCollection<UserModel>>(UsersProperty); }
        set { SetValue(UsersProperty, value); }
    }
    public static readonly PropertyData UsersProperty =
        RegisterProperty(nameof(Users), 
            typeof(ObservableCollection<UserModel>), 
            new ObservableCollection<UserModel>());
} 

7) Создаем представление, для редактирования нашего пользователя, оно будет следующим. Обратите внимание, что тип окна catel:DataWindow.

<catel:DataWindow x:Class="WpfApplication1.Views.EditUserView"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:catel="http://schemas.catelproject.com"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:viewModels="clr-namespace:WpfApplication1.ViewModels"
              d:DataContext="{d:DesignInstance Type=viewModels:EditUserViewModel, IsDesignTimeCreatable=False}"
              mc:Ignorable="d">
<Grid Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="0"
               Grid.Column="0"
               Text="Имя" />
    <TextBox Grid.Row="0"
             Grid.Column="1"
             Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" />
    <TextBlock Grid.Row="1"
               Grid.Column="0"
               Text="Фамилия" />
    <TextBox Grid.Row="1"
             Grid.Column="1"
             Text="{Binding LastName, UpdateSourceTrigger=PropertyChanged}" />
</Grid>

8) И ViewModel для него:

public class EditUserViewModel : ViewModelBase
{
    public EditUserViewModel(UserModel user)
    {
        User = user;
    }

    // Свойства, которые связаны со View и отражаются на объект редактируемой модели. 
    [ViewModelToModel(nameof(User), nameof(UserModel.Name))]
    public string Name
    {
        get { return GetValue<string>(AuthorProperty); }
        set { SetValue(AuthorProperty, value); }
    }
    public static readonly PropertyData AuthorProperty =
        RegisterProperty(nameof(Name), typeof(string), string.Empty);

    // Свойства, которые связаны со View и отражаются на объект редактируемой модели. 
    [ViewModelToModel(nameof(User), nameof(UserModel.LastName))]
    public string LastName
    {
        get { return GetValue<string>(LastNameProperty); }
        set { SetValue(LastNameProperty, value); }
    }
    public static readonly PropertyData LastNameProperty =
        RegisterProperty(nameof(LastName), typeof(string), string.Empty);

    // Переданный объект модели, который мы редактируем.
    [Model]
    public UserModel User
    {
        get { return GetValue<UserModel>(UserProperty); }
        set { SetValue(UserProperty, value); }
    }
    public static readonly PropertyData UserProperty =
        RegisterProperty(nameof(User), typeof(UserModel));
}

9) В принципе на этом все, в Solution Explorer наш проект теперь выглядит так:

введите сюда описание изображения

10) Теперь если запустить приложение, выбрать в DataGrid какого-нибудь пользователя и начать редактировать его, а после нажать на кнопку Отмена все изменения будут отменены.


P.S. Что делать, если не охота использовать этот громоздкий синтаксис с использованием DP из Catel?

Вариант 1

Установить Catel.Fody

PM> Install-Package Catel.Fody -Version 2.17.0  

В этом случае нужный код для DP будет сгенерирован автоматически, путем перезаписи IL, после чего во ViewModel достаточно написать так:

public class EditUserViewModel : ViewModelBase
{
    public EditUserViewModel(UserModel user)
    {
        User = user;
    }

    [ViewModelToModel(nameof(User), nameof(UserModel.Name))]
    public string Name { get; set; }

    [ViewModelToModel(nameof(User), nameof(UserModel.LastName))]
    public string LastName { get; set; }

    [Model]
    public UserModel User { get; set; }
}

Вариант 2

Использовать Code Snippets

6
  • Спасибо за развернутый ответ. В вашем варианте мы можем откатить изменения только одного пользователя. А можно ли реализовать `Undo/Redo' когда мы подряд редактируем несколько пользователей и только затем откатываем изменения?
    – trydex
    13 авг 2017 в 21:34
  • @Maxwell, т.е. вы имеете ввиду ситуацию, когда я скопом отредактировал, предположим, 10 пользователей, потом нажал "Отмена" и все изменения, которые я произвел с этими 10 пользователями откатились в состояние, которое было до редактирования?
    – sp7
    14 авг 2017 в 4:50
  • Нет, обычная история изменений. Вы редактируете пользователей, затем нажимаете Ctrl+z и последний отредактированный пользователь возвращает свои первоначальные значения. Нажимаете еще раз и предпоследний пользователь возвращает первоначальные значения.
    – trydex
    14 авг 2017 в 10:26
  • @Maxwell на самом деле, когда вы нажимаете на кнопку "Отмена" Catel для текущей VM вызывает метод CancelViewModelAsync и CloseViewModelAsync, что приводит к отмене изменений и закрытию диалогового окна. Следовательно, вам никто не мешает написать логику, в которой вы для нужной VM самостоятельно вызовете метод CancelViewModelAsync.
    – sp7
    14 авг 2017 в 10:33
  • А как быть с Redo?
    – trydex
    14 авг 2017 в 10:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.