Главная » Silverlight » Связывание элемента с элементом

0

В предыдущем разделе вы узнали, как используется расширение разметки StaticResource, увеличивающее возможности разметки XAML. Например, с его по­мощью легко сослаться на ресурс, определенный в любом месте разметки. Класс StaticResource часто встречается в примерах данной книги. Другое часто используе­мое расширение разметки — выражение Binding, которое устанавливает отношение между объектами и передает информацию от одного элемента управления к другому.

Рис. 2.4. Связывание двух элементов управления.

В главе 16 выражения Binding используются для создания страниц, связанных с данными и позволяющих пользователю просматривать и редактировать информацию в связанном объекте данных. В данной главе приведено лишь краткое описание спосо­бов связывания двух элементов с помощью выражения Binding.

Одностороннее связывание

Чтобы понять, как можно связать один элемент с другим, рассмотрим простое окно (рис. 2.4), содержащее два элемента управления: Slider и TextBlock. Элемент TextBlock выводит одну строку текста. При перемеще­нии ползунка вправо размер шрифта немедленно уве­личивается, а влево — уменьшается.

Очевидно, такое поведение несложно определить с помощью кода. Нужно лишь запрограммировать ре­акцию на событие Slider.ValueChanged и скопиро-

вать текущее значение ползунка в элемент TextBlock.

        Однако с помощью связывания сделать это еще легче.

При использовании связывания данных вносить изменения в объект-источник (в данном примере — Slider) не нужно. Достаточно сконфигурировать диапазон значе­ний (к тому же, это нужно сделать в любом случае).

<Slider x:Name="sliderFontSize" Margin="3" Minimum="l" Maximum="40" Value="10">

</Slider>

Связывание определяется в элементе TextBlock. Вместо литерального значения, в атрибуте Font Size используется выражение связывания.

<TextBlock Margin="10" Text="Simple Text"

x:Name="lblSampleText" FontSize="{Binding ElementName=sliderFontSize, Path=Value}" >

</TextBlock>

В выражении связывания применяется расширение разметки XAML, заключенное в фигурные скобки. Выражение начинается со слова Binding, после которого могут быть расположены аргументы конструктора (в данном примере их нет) и список свойств, которые нужно устанавливать по имени (в данном примере — ElementName и Path). Значение ElementName определяет элемент-источник, a Path — свойство элемента- источника. Следовательно, выражение связывания копирует значение из свойства Slider.Value в свойство TextBlock.FontSize.

Совет. Значение Path может указывать на свойство другого свойства (например, FontFamily. Source) или на индексатор свойства (например, Content. Chi ldren [ 0 ]). Можно также ссылаться на подключенное свойство (определенное в другом классе и подключенное к связанному элементу). Для этого нужно заключить имя свойства в скобки. Например, при связывании элемента, расположенного в решетке Grid, выражение (Grid.Row) извлекает номер строки, в которой находится элемент.

Одна из наиболее полезных особенностей связывания состоит в том, что целевой объект обновляется автоматически независимо от того, каким образом изменяется объект-источник. В данном примере объект-источник может быть изменен единствен­ным способом: путем перетаскивания ползунка пользователем. Рассмотрим немного другую версию данного примера. Предположим, добавлено несколько кнопок, каждая из которых присваивает ползунку предопределенное значение. При щелчке на кнопке выполняется следующий код.

private void cmd_SetLarge(object sender, RoutedEventArgs e)

{

sliderFontSize.Value = 30;

}

Этот код устанавливает значение ползунка, который, в свою очередь, устанавливает размер шрифта методом связывания. Результат будет тот же, что и при перемещении ползунка пользователем.

Однако следующий код не сработает так же хорошо.

private void cmd_SetLarge(object sender, RoutedEventArgs e)

{

lblSampleText.FontSize = 30;

}

Этот код устанавливает размер шрифта непосредственно. В результате позиция пол­зунка не будет обновлена. Хуже того, код переопределяет эффект связывания размера шрифта, заменяя его литеральным значением. Если переместить ползунок с помощью мыши, текстовый блок не изменится.

Двустороннее связывание

Существует способ заставить значения передаваться в обоих направлениях: от объекта-источника к целевому объекту и наоборот. Для этого нужно установить свойство Mode выражения Binding. Ниже приведена разметка двустороннего связыва­ния, применяющая изменения как к источнику, так и к целевому объекту. Когда один объект изменяется, другой обновляется автоматически.

CTextBlock Margin="10" Text="Simple Text" Name="lblSampleText" FontSize="{Binding ElementName=sliderFontSize, Path=Value, Mode=TwoWay}" >

</TextBlock>

В данном примере можно было бы обойтись и без двустороннего связывания. Проблема решается пу­тем манипулирования значением ползунка, а не размером шрифта. Поэтому рассмотрим еще один вариант примера, в котором пользователь может устанавливать точный размер шрифта с помощью кнопок (рис. 2.5).

В текстовом поле используется двустороннее свя­зывание. Следовательно, оно как получает, так и пе­редает значение. Когда пользователь перетаскивает ползунок или щелкает на кнопке, текстовое поле получает новое значение ползунка, а когда вводит новое значение в текстовое поле, выражение связы­вания копирует его в ползунок.

Ниже приведено выражение двустороннего связывания.

<TextBox Text="{Binding ElementName=lblSampleText, Path=FontSize, Mode=TwoWay} ">

</TextBox>

Примечание. Экспериментируя с примером, вы обнаружите, что текстовое поле передает свое значение в ползунок только при потере фокуса. В Silverlight такое поведение установлено по умолчанию. Можно изменить его, задав обновление непосредственно во время ввода. Как это сделать, рассматривается в главе 16.

Более подробно связывание данных, включая добавление объектов и коллекций дан­ных, описано в главе 16. Рассмотренный выше пример лишь иллюстрирует два важных способа связывания: с помощью расширения разметки Binding, позволяющего связы­вать свойства разных объектов, и путем синхронизации элементов без кода С#.

Резюме

В этой главе рассмотрены синтаксические правила XAML на примере просто­го файла разметки. Рассмотрены также два расширения разметки (StaticResource и Binding), используемые в Silverlight для ссылки на ресурсы и связывания свойств разных объектов.

Рис. 2.5. Двустороннее связывание с текстовым полем

При разработке приложения часто нет необходимости писать код XAML вручную. В рабочей среде Visual Studio и Expression Blend код XAML можно создавать, перета­скивая элементы управления в разметку. Поэтому на первый взгляд может показаться, что изучать синтаксис XAML тоже нет необходимости. Конечно, это не так. Понимание синтаксиса XAML критически важно для создания приложений Silverlight. Только зная XAML, вы сможете понять ключевые концепции Silverlight и создавать правильную раз­метку. Кроме того, редактировать многие компоненты разметки XAML и решать многие задачи (в том числе подключение обработчиков к событиям, определение ресурсов, соз­дание шаблонов элементов управления, связывание данных, создание анимации) мож­но только вручную. В Visual Studio вручную решаются такие задачи, как определение ресурсов, создание шаблонов элементов управления, написание выражений связыва­ния данных и определение анимации. Программа Expression Blend лучше поддерживает указанные операции, однако и при ее использовании часто легче внести изменения вручную, чем блуждать по многочисленным окнам.

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии