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

Построение вкладки 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>    &lt;!-- Значение линейки прокрутки является источником этой привязки данных --&gt;</b>

    &lt;ScrollBar x:Name=&quot;mySB&quot; Orientation=&quot;Horizontal&quot; Height=&quot;30&quot;

           Minimum = &quot;1&quot; Maximum = &quot;100&quot; LargeChange=&quot;1&quot; SmallChange=&quot;1&quot;/&gt;

<b>    &lt;!-- Содержимое метки будет привязано к линейке прокрутки --&gt;</b>

    &lt;Label x:Name=&quot;labelSBThumb&quot; Height=&quot;30&quot; BorderBrush=&quot;Blue&quot;

           BorderThickness=&quot;2&quot; Content = &quot;0&quot;/&gt;

  &lt;/StackPanel&gt;

&lt;/TabItem&gt;

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

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

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

&lt;Label x:Name=&quot;labelSBThumb&quot; Height=&quot;30&quot; BorderBrush=&quot;Blue&quot; BorderThickness=&quot;2&quot;

       Content = &quot;{Binding Path=Value, ElementName=mySB}&quot;/&gt;

Обратите внимание на значение, присвоенное свойству 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>&lt;!-- Разбиение объекта и значения посредством DataContext --&gt;</b>

&lt;Label x:Name=&quot;labelSBThumb&quot; Height=&quot;30&quot; BorderBrush=&quot;Blue&quot;

    BorderThickness=&quot;2&quot;

    DataContext = &quot;{Binding ElementName=mySB}&quot;

    Content = &quot;{Binding Path=Value}&quot; /&gt;

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

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

&lt;Button Content=&quot;Click&quot; Height=&quot;200&quot;/&gt;

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

<b>&lt;!-- Обратите внимание, что StackPanel устанавливает</b>

<b>     свойство DataContext --&gt;</b>

&lt;StackPanel Background=&quot;#FFE5E5E5&quot;

            DataContext = &quot;{Binding ElementName=mySB}&quot;&gt;

  ...

<b>  &lt;!-- Теперь оба элемента пользовательского интерфейса работают</b>

<b>       со значением линейки прокрутки уникальными путями --&gt;</b>

  &lt;Label x:Name=&quot;labelSBThumb&quot; Height=&quot;30&quot; BorderBrush=&quot;Blue&quot;

      BorderThickness=&quot;2&quot;