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

           Minimum = "1" Maximum = "100" LargeChange="1" SmallChange="1"/>

           BorderThickness="2" Content = "0"/>

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

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

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

       Content = "{Binding Path=Value, ElementName=mySB}"/>

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

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

Свойство DataContext

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

    BorderThickness="2"

    DataContext = "{Binding ElementName=mySB}"

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

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

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

Чтобы сгенерировать привязки данных для множества элементов управления, вы могли бы применить Visual Studio, но взамен введите модифицированную разметку в редакторе XAML:

            DataContext = "{Binding ElementName=mySB}">

  ...

      BorderThickness="2"

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

Здесь свойство DataContext панели StackPanel устанавливается напрямую. Таким образом, при перемещении ползунка не только отображается текущее значение в элементе Label, но и в соответствии с этим текущим значением увеличивается размер шрифта элемента Button (на рис. 25.22 показан возможный вывод).

Форматирование привязанных данных

Вместо ожидаемого целого числа для представления положения ползунка тип ScrollBar использует значение double. Следовательно, по мере перемещения ползунка внутри элемента Label будут отображаться разнообразные значения с плавающей точкой (вроде 61.0576923076923), которые выглядят не слишком интуитивно понятными для конечного пользователя, почти наверняка ожидающего увидеть целые числа (такие как 61, 62, 63 и т.д.).

При желании форматировать данные можно добавить свойство ContentStringFormat с передачей ему специальной строки и спецификатора формата .NET Core:

  BorderThickness="2" Content = "{Binding Path=Value}"

  ContentStringFormat="The value is: {0:F0}"/>