4. Синтаксис привязки данных

В классе Binding могут использоваться различные свойства. Чаще всего привязки задаются в коде XAML, поэтому я сосредоточусь на синтаксисе XAML. Однако следует отметить, что все, что можно сделать в XAML, также можно реализовать и в коде программной части на C#.

Самая простая форма привязки — это привязка к значению существующего элемента.

В этом примере используются две кнопки. Свойство Background первой кнопки (btnSource) обладает значением Yellow. Вторая кнопка использует первую кнопку (btnSource) в качестве источника привязки, при этом значение Background первой кнопки (btnSource) используется для задания свойства Background второй кнопки.

<Button x:Name="btnSource" Background="Yellow" Width="150" Height="30">Yellow BUtton</Button>

<Button Background="{Binding ElementName=btnSource, Path=Background}"

         Width="150" Height="30">I am bound to be Yellow Background</Button>

Ипользованиесвойства Binding.Mode и Binding.UpdateSourceTrigger всинтаксисепривязки.

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

<TextBox x:Name="txtSource" Width="150" Height="30"/>

<TextBox Width="150" Height="30" Text="{Binding ElementName=txtSource,

   Path=Text, Mode=TwoWay, UpdateSourceTrigger=LostFocus }"/>

5. Привязка к элементам интерфейса пользователя

При настройке привязки необходимо учитывать несколько моментов.

1. Какое свойство требуется привязывать?

2. К какому свойству требуется выполнить привязку?

3. Должна ли это быть привязка типа OneWay, TwoWay и т. д.? Если нужна привязка типа TwoWay или OneWayToSource, является ли исходное свойство свойством зависимости? Оно должно быть таковым, чтобы передавать привязку типа TwoWay или OneWayToSource.

Когда вы определились с этим, все становится просто как дважды два. В состав демонстрационного решения (рис. 7.2) входит проект BindingToUIElements, который при выполнении выглядит так:

Рис. 7.2 - Демонстрационная программа

В этом простом демонстрационном приложении иллюстрируются три различные привязки. Давайте кратко обсудим каждую.

Простая привязка к элементу (режим по умолчанию). В этом примере свойство Background одной кнопки используется как исходное значение для свойства Background второй кнопки.

Код выглядит так.

<!-- Простая привязка к элементу-->

<Label Content="Simple Element Binding" Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />

<StackPanel Orientation="Horizontal" Margin="10,10,10,10" Background="Gainsboro">

   <Label Content="Simple Element Binding"/>

   <Button x:Name="btnSource" Margin="10,0,0,0" Background="Pink" Content="Im btnSource"/>

   <Button Margin="10,0,0,0" Background="{Binding ElementName=btnSource,

       Path=Background}" Content="Im bound to btnSource"/>

   <Button Margin="10,0,0,0" Content="Im bound to btnSource, using long Binding syntax">

       <Button.Background>

           <Binding ElementName="btnSource" Path="Background"/>

       </Button.Background>

   </Button>

</StackPanel>

Болеесложнаяпривязка (режимпоумолчанию). В этом простом примере в качестве источника привязки используется свойство SelectedItem.Contentэлемента ComboBox. Значение свойства Background элемента Buttonизменяется в зависимости от значения свойства SelectedItem.Contentэлемента ComboBox.

Кодвыглядиттак.

<Label Content="More Elaborate Binding" Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />

<StackPanel Orientation="Horizontal" Margin="10,10,10,10" Background="Gainsboro">

   <Label Content="Choose a color"/>

   <ComboBox Name="cmbColor" SelectedIndex="0">

       <ComboBoxItem>Green</ComboBoxItem>

       <ComboBoxItem>Blue</ComboBoxItem>

       <ComboBoxItem>Red</ComboBoxItem>

   </ComboBox>

   <Button Margin="10,0,0,0" Background="{Binding ElementName=cmbColor,

       Path=SelectedItem.Content}" Content="Im bound to btnSource"/>

</StackPanel>

Привязка TwoWay сиспользованиемUpdateSourceTrigger. В этом простом примере используются два элемента TextBox. Свойству Binding.Mode присвоено значение TwoWay, а свойству Binding.UpdateSourceTrigger — событие PropertyChanged. Это означает, что источник привязки будет обновляться при изменении значения второго элемента TextBox.

Код выглядит так.

<!-- Использование UpdateSourceTrigger/Mode-->

<Label Content="Using UpdateSourceTrigger/Mode" Margin="5,0,0,0" FontSize="14" FontWeight="Bold" />

<StackPanel Orientation="Horizontal" Margin="10,10,10,10" Background="Gainsboro">

   <TextBlock TextWrapping="Wrap"

       Text="This uses TwoWay Binding and UpdateSourceTrigger=PropertyChanged.

       Type in one textbox then the other,and see them update each other" Width="400"/>

   <TextBox x:Name="txtSource" Width="50" Height="25" Margin="5,0,0,0"/>

   <TextBox Width="50" Height="25" Margin="5,0,0,0"

           Text="{Binding ElementName=txtSource,

           Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged }"/>

</StackPanel>