Язык программирования C#9 и платформа .NET5 - Эндрю Троелсен

управления ComboBox будет выглядеть так, как показано на рис. 25.21.

Сохранение, загрузка и очистка данных InkCanvas

Последняя часть вкладки Ink API позволит сохранять и загружать данные контейнера InkCanvas, а также очищать его содержимое, добавляя обработчики событий для кнопок в панели инструментов. Модифицируйте разметку XAML для кнопок за счет добавления разметки, отвечающей за события щелчков:

<Button Grid.Column="0" x:Name="btnSave" Margin="10,10"

    Width="70" Content="Save Data" Click="SaveData"/>

<Button Grid.Column="1" x:Name="btnLoad" Margin="10,10"

    Width="70" Content="Load Data" Click="LoadData"/>

<Button Grid.Column="2" x:Name="btnClear" Margin="10,10"

    Width="70" Content="Clear" Click="Clear"/>

Импортируйте пространства имен System.IO и System.Windows.Ink в файл кода. Реализуйте обработчики событий следующим образом:

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 линейки прокрутки).

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

Свойство DataContext

Для определения операции привязки данных в XAML может использоваться альтернативный формат, при котором допускается разбивать значения, указанные расширением разметки {Binding}, за счет явной установки свойства DataContext в источник операции привязки:

<!-- Разбиение объекта и значения посредством DataContext -->

<Label x:Name="labelSBThumb" Height="30" BorderBrush="Blue"

    BorderThickness="2"

    DataContext = "{Binding ElementName=mySB}"

    Content = "{Binding Path=Value}" />

В текущем примере вывод будет идентичным. С учетом этого вполне вероятно вас интересует, в каких случаях необходимо устанавливать свойство DataContext явно. Поступать так может быть удобно из-за того, что подэлементы способны наследовать свои значения в дереве разметки.

Подобным образом можно легко устанавливать один и тот же источник данных для семейства элементов управления, не повторяя избыточные фрагменты XAML-разметки "{Binding ElementName=X, Path=Y}" во множестве элементов управления. Например, пусть в панель StackPanel вкладки добавлен новый элемент Button (вскоре вы увидите,