Построение вкладки 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"/>
<b> <!-- Значение линейки прокрутки является источником этой привязки данных --></b>
<ScrollBar x:Name="mySB" Orientation="Horizontal" Height="30"
Minimum = "1" Maximum = "100" LargeChange="1" SmallChange="1"/>
<b> <!-- Содержимое метки будет привязано к линейке прокрутки --></b>
<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 линейки прокрутки).
(window.adrunTag = window.adrunTag || []).push({v: 1, el: 'adrun-4-390', c: 4, b: 390})
Если вы запустите программу снова, то обнаружите, что содержимое метки обновляется на основе значения линейки прокрутки по мере перемещения ползунка.
Свойство DataContext
Для определения операции привязки данных в XAML может использоваться альтернативный формат, при котором допускается разбивать значения, указанные расширением разметки {Binding}, за счет явной установки свойства DataContext в источник операции привязки:
<b><!-- Разбиение объекта и значения посредством DataContext --></b>
<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 (вскоре вы увидите, почему он имеет настолько большой размер):
<Button Content="Click" Height="200"/>
Чтобы сгенерировать привязки данных для множества элементов управления, вы могли бы применить Visual Studio, но взамен введите модифицированную разметку в редакторе XAML:
<b><!-- Обратите внимание, что StackPanel устанавливает</b>
<b> свойство DataContext --></b>
<StackPanel Background="#FFE5E5E5"
DataContext = "{Binding ElementName=mySB}">
...
<b> <!-- Теперь оба элемента пользовательского интерфейса работают</b>
<b> со значением линейки прокрутки уникальными путями --></b>
<Label x:Name="labelSBThumb" Height="30" BorderBrush="Blue"
BorderThickness="2"
