XAML — привязка данных

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

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

• Односторонняя привязка данных
• Двусторонняя привязка данных

Одностороннее связывание данных

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

Давайте посмотрим на простой пример односторонней привязки данных. Следующий код XAML создает четыре текстовых блока с некоторыми свойствами.

<Window x:Class = "DataBindingOneWay.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid>
      <StackPanel Name = "Display">
         <StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0"> 
            <TextBlock Text = "Name: " Margin = "10" Width = "100" /> 
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Name}" />
         </StackPanel> 
		
         <StackPanel Orientation = "Horizontal" Margin = "50,0,50,0"> 
            <TextBlock Text = "Title: " Margin = "10" Width = "100" /> 
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Title}" /> 
         </StackPanel>
      </StackPanel>
   </Grid> 
	
</Window> 

Текстовые свойства двух текстовых блоков статически устанавливаются в «Имя» и «Заголовок», тогда как в двух других текстовых блоках текстовые свойства привязываются к «Имя» и «Заголовок», которые являются переменными класса класса Employee, как показано ниже.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
 
namespace DataBindingOneWay {
   public class Employee {
      public string Name { get; set; } 
      public string Title { get; set; }  
		
      public static Employee GetEmployee() {
         var emp = new Employee() { 
            Name = "Ali Ahmed", Title = "Developer" 
         }; 
         return emp; 
      }
   }
}

В этом классе у нас есть только две переменные, Name и Title , и один статический метод, в котором инициализируется объект Employee, который возвращает этот объект employee. Таким образом, мы привязываемся к свойству Name и Title, но мы не выбрали объект, которому принадлежит это свойство. Самый простой способ — назначить объект DataContext, свойства которого мы связываем в следующем коде C #:

using System; 
using System.Windows; 
using System.Windows.Controls;

namespace DataBindingOneWay { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window {
      public MainWindow() { 
         InitializeComponent(); 
         DataContext = Employee.GetEmployee(); 
      } 
   }
}

Давайте запустим это приложение, и вы сразу увидите в нашем MainWindow, что мы успешно связали имя и заголовок этого объекта Employee.

Двухстороннее связывание данных

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

пример

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

<Window x:Class = "XAMLTestBinding.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel>
      <ComboBox Name = "comboBox"  Margin = "50" Width = "100"> 
         <ComboBoxItem Content = "Green" /> 
         <ComboBoxItem Content = "Yellow" IsSelected = "True" /> 
         <ComboBoxItem Content = "Orange" /> 
      </ComboBox>
		
      <TextBox  Name = "textBox" Margin = "50" 
         Width = "100" Height = "23" VerticalAlignment = "Top" 
         Text  = "{Binding ElementName = comboBox, Path = SelectedItem.Content, 
         Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}" 
         Background = "{Binding ElementName = comboBox, Path = SelectedItem.Content}"> 
      </TextBox>
   </StackPanel> 
	
</Window> 

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

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