Язык программирования C#9 и платформа .NET5

 private void SaveData(object sender, RoutedEventArgs e)
 {
   // Сохранить все данные InkCanvas в локальном файле.
  using (FileStream fs = new FileStream("StrokeData.bin", FileMode.Create))
  this.MyInkCanvas.Strokes.Save(fs);
  fs.Close;
  MessageBox.Show("Image Saved","Saved");
 }

 private void LoadData(object sender, RoutedEventArgs e)
 {
// Наполнить StrokeCollection из файла.
  using(FileStream fs = new FileStream("StrokeData.bin",
  FileMode.Open, FileAccess.Read))
  StrokeCollection strokes = new StrokeCollection(fs);
  this.MyInkCanvas.Strokes = strokes;
 }

 private void Clear(object sender, RoutedEventArgs e)
 {
   // Очистить все штрихи.
  this.MyInkCanvas.Strokes.Clear;
 }

Теперь должна появиться возможность сохранения данных в файле, их загрузки из файла и очистки InkCanvas от всех данных. Таким образом, работа с первой вкладкой элемента управления TabControl завершена, равно как и исследование интерфейса Ink API. Конечно, о технологии Ink API можно рассказать еще много чего, но теперь вы должны обладать достаточными знаниями, чтобы продолжить изучение темы самостоятельно. Далее вы узнаете, как применять привязку данных WPF.

Введение в модель привязки данных WPF

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

• отмечать флажок элемента управления Checkbox на основе булевского свойства заданного объекта:

• отображать в элементах TextBox информацию, извлеченную из реляционной базы данных:

• подключать элемент Label к целому числу, представляющему количество файлов в папке.

При работе со встроенным механизмом привязки данных WPF важно помнить о разнице между источником и местом назначения операции привязки. Как и можно было ожидать, источником операции привязки данных являются сами данные (булевское свойство, реляционные данные и т.д.), а местом назначения (или целью) — свойство элемента управления пользовательского интерфейса, в котором задействуется содержимое данных (вроде свойства элемента управления CheckBox или TextBox).

В дополнение к привязке традиционных данных инфраструктура WPF делает возможной привязку элементов, как было продемонстрировано в предшествующих примерах. Это значит, что можно привязать (скажем) видимость свойства к свойству состояния отметки флажка. Такое действие было определенно возможным в Windows Forms, но требовало реализации через код. Инфраструктура WPF предлагает развитую экосистему привязки данных, которая способна почти целиком поддерживаться в разметке. Она также позволяет обеспечивать синхронизацию источника и цели в случае изменения значений данных.

Построение вкладки Data Binding

В окне Document Outline замените элемент управления Grid во второй вкладке панелью StackPanel. Создайте следующую начальную компоновку с применением панели инструментов и окна Properties среды Visual Studio:

 <TabItem x:Name="tabDataBinding" Header="Data Binding">
  <StackPanel Width="250">
  <Label Content="Move the scroll bar to see the current value"/>

   <!-- Значение линейки прокрутки является источником этой привязки данных -->
  <ScrollBar x:Name="mySB" Orientation="Horizontal" Height="30"
  Minimum = "1" Maximum = "100" LargeChange="1" SmallChange="1"/>

   <!-- Содержимое метки будет привязано к линейке прокрутки -->
  <Label x:Name="labelSBThumb" Height="30" BorderBrush="Blue"
  BorderThickness="2" Content = "0"/>
  </StackPanel>
 </TabItem>

Обратите внимание, что объект ScrollBar (названный здесь mySB) сконфигурирован с диапазоном от 1 до 100. Цель заключается в том, чтобы при изменении положения ползунка линейки прокрутки (либо по щелчку на символе стрелки влево или вправо) элемент Label автоматически обновлялся текущим значением. В настоящий момент значение свойства Content элемента управления Label установлено в "0"; тем не менее, оно будет изменено посредством операции привязки данных.

Установка привязки данных

Механизмом, обеспечивающим определение привязки в разметке XAML, является расширение разметки {Binding}. Хотя привязки можно определять посредством Visual Studio, это столь же легко делать прямо в разметке. Отредактируйте разметку XAML свойства Content элемента Label по имени labelSBThumb следующим образом:

 <Label x:Name="labelSBThumb" Height="30" BorderBrush="Blue" BorderThickness="2"
  Content = "{Binding Path=Value, ElementName=mySB}"/>

Обратите внимание на значение, присвоенное свойству Content элемента Label. Конструкция {Binding} обозначает операцию привязки данных. Значение ElementName представляет источник операции привязки данных (объект ScrollBar), a Path указывает свойство, к которому осуществляется привязка (свойство Value линейки прокрутки).