Приведи пример использования двустороннего биндинга

Пример и объяснение двустороннего биндинга (Two-way Data Binding)

Двусторонний биндинг — это механизм автоматической синхронизации данных между источником данных (Model) и пользовательским интерфейсом (View). Когда данные изменяются в любом из этих мест, изменения автоматически отражаются в другом направлении. В C# это чаще всего реализуется через INotifyPropertyChanged в WPF, MAUI, Blazor или через фреймворки вроде Angular/React при разработке SPA.

Базовый пример в WPF с MVVM

1. Модель данных с INotifyPropertyChanged

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class UserProfile : INotifyPropertyChanged
{
    private string _name;
    private int _age;

    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
            {
                _name = value;
                OnPropertyChanged();
            }
        }
    }

    public int Age
    {
        get => _age;
        set
        {
            if (_age != value)
            {
                _age = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. ViewModel (посредник между View и Model)

public class MainViewModel : INotifyPropertyChanged
{
    private UserProfile _currentUser;

    public UserProfile CurrentUser
    {
        get => _currentUser;
        set
        {
            _currentUser = value;
            OnPropertyChanged();
        }
    }

    public MainViewModel()
    {
        // Инициализация с тестовыми данными
        CurrentUser = new UserProfile { Name = "Иван Петров", Age = 30 };
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

3. XAML View (пользовательский интерфейс)

<Window x:Class="TwoWayBindingExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Двусторонний биндинг" Height="250" Width="400">
    
    <StackPanel Margin="20">
        <!-- TextBox с двусторонним биндингом к свойству Name -->
        <TextBlock Text="Имя пользователя:" Margin="0 0 0 5"/>
        <TextBox Text="{Binding CurrentUser.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                 Margin="0 0 0 15"/>
        
        <!-- Slider с двусторонним биндингом к свойству Age -->
        <TextBlock Text="Возраст:" Margin="0 0 0 5"/>
        <Slider Value="{Binding CurrentUser.Age, Mode=TwoWay}"
                Minimum="18" Maximum="100" TickFrequency="1"
                Margin="0 0 0 15"/>
        
        <!-- Отображение текущих данных -->
        <TextBlock Text="{Binding CurrentUser.Name, StringFormat='Текущее имя: {0}'}"/>
        <TextBlock Text="{Binding CurrentUser.Age, StringFormat='Текущий возраст: {0}'}"/>
        
        <!-- Кнопка для демонстрации изменений -->
        <Button Content="Увеличить возраст" Command="{Binding IncreaseAgeCommand}"
                Margin="0 15 0 0" Padding="10 5"/>
    </StackPanel>
</Window>

4. Code-behind окна

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new MainViewModel();
    }
}

Как работает двусторонний биндинг в этом примере:

Прямое направление (Model → View):

1. При инициализации CurrentUser.Name = "Иван Петров" и CurrentUser.Age = 30
2. WPF автоматически отображает эти значения в TextBox и Slider

Обратное направление (View → Model):

1. Когда пользователь вводит текст в TextBox, свойство Name в объекте UserProfile автоматически обновляется
2. Когда пользователь перемещает Slider, свойство Age автоматически изменяется

Ключевые аспекты реализации:

• INotifyPropertyChanged — интерфейс, который уведомляет систему биндинга об изменениях свойств
• Mode=TwoWay — явное указание режима двустороннего биндинга в XAML
• UpdateSourceTrigger=PropertyChanged — немедленное обновление источника при каждом изменении (без этого обновление происходит при потере фокуса)

Более сложный пример с командами

// В MainViewModel добавляем команду
public class MainViewModel : INotifyPropertyChanged
{
    // ... предыдущий код ...
    
    private ICommand _increaseAgeCommand;
    public ICommand IncreaseAgeCommand =>
        _increaseAgeCommand ??= new RelayCommand(IncreaseAge);

    private void IncreaseAge()
    {
        if (CurrentUser != null)
        {
            CurrentUser.Age += 1; // Изменение автоматически отразится в UI
        }
    }
}

Преимущества двустороннего биндинга:

1. Автоматизация синхронизации — не нужно вручную обновлять UI при изменении данных
2. Снижение объема кода — устраняется необходимость обработчиков событий для каждого элемента управления
3. Чистая архитектура — разделение View и Model через ViewModel
4. Упрощенная поддержка — логика данных изолирована от представления

Где еще используется:

• Blazor — через @bind или @bind:event
• ASP.NET Core MVC — через Razor Pages с Tag Helpers
• Angular/React/Vue — в современных фронтенд-фреймворках
• Windows Forms — через BindingSource, но с ограниченной поддержкой

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