Привязка между элементами

Expression Blend --- Графические интерфейсы --- Привязка между элементами

Рассмотрение способов и средств, применяемых в Expression Blend для определения операций привязки данных, будет начато с примера, демонстрирующего способ привязки значения свойства одного элемента управления к значению свойства другого элемента управления (так называемой привязки данных одних элементов управления к другим). Этот способ привязки данных может оказаться очень полезным в тех случаях, когда требуется обновлять значение свойства элемента управления, исходя из выбора, сделанного пользователем.

Запустите на выполнение Expression Blend и создайте новый проект приложения WPF, присвоив ему имя ControlToControlBinding. Для целей данного примера допустим, что в главном окне приложения, представленном объектом типа Window, находятся два объекта типа StackPanel, в свойстве Orientation обоих этих объектов установлено значение Horizontal и каждый из них содержит элементы управления типа Slider и Label.

Оба объекта типа StackPanel объединены в более крупный элемент управления типа StackPanel, образующий блок укладываемых одна в другую блочных панелей. Для построения пользовательского интерфейса, приведенного на рисунке, воспользуйтесь панелью Assets и монтажным столом, введя соответствующие текстовые надписи в свойстве Content каждого элемента управления типа Label. А о настройке элементов управления типа Slider речь пойдет несколько позже.

Вы можете выделить ряд элементов управления на монтажном столе и щелкнуть на них правой кнопкой мыши, чтобы сгруппировать их в новый диспетчер компоновки по команде меню Group Into. Не забывайте также о возможности выполнять элементарные операции копирования и вставки на монтажном столе или на панели Objects and Timeline.

Ниже приведена разметка, автоматически формируемая в коде XAML при создании в среде Expression Blend IDE подобного пользовательского интерфейса. У вас она может немного отличаться в зависимости от характера настройки отдельных объектов, составляющих пользовательский интерфейс вашего приложения:

<StackPanel x:Name="LayoutRoot" Height="136" VerticalAlignment="Top">
		<StackPanel Orientation="Horizontal" Margin="10">
			<TextBlock TextWrapping="Wrap" Text="Height:" Margin="10" FontSize="16"/>
			<Slider Width="300" Height="40" VerticalContentAlignment="Stretch" Margin="0,10,0,0"/>
		</StackPanel>
		<StackPanel Orientation="Horizontal" Margin="10">
			<TextBlock TextWrapping="Wrap" Text="Width: " Margin="10" FontSize="16"/>
			<Slider Width="300" Height="40" VerticalContentAlignment="Stretch" Margin="0,10,0,0"/>
		</StackPanel>
	</StackPanel>

Выберите элементы управления типа Slider на монтажном столе, нажав клавишу <Ctrl> и щелкнув на каждом из них по очереди, а затем перейдите к панели Properties и установите значение 200 в свойстве Maximum, доступном в области Common Properties этой панели (это и другие свойства вы сможете быстро найти, воспользовавшись полем поиска Search). В итоге каждый элемент управления типа Slider будет определен в разметке следующим образом:

<Slider Maximum="200" Minimum="10" .../>

Эти элементы управления типа Slider послужат для изменения размеров других элементов пользовательского интерфейса на монтажном столе с помощью операции привязки данных. И завершите создание пользовательского интерфейса, нарисовав на монтажном столе произвольный графический элемент как часть объекта LayoutRoot типа Grid, например треугольник:

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

Когда в среде Expression Blend требуется привязать значения свойства одного элемента управления к свойству другого элемента управления, то для этой цели необходимо сначала выбрать целевой элемент управления, т.е. адресат операции привязки данных (в данном случае это геометрическая форма треугольника).

Итак, выберите этот элемент пользовательского интерфейса на монтажном столе и найдите его свойство Height в области Layout на панели Properties. После этого щелкните на кнопке Advanced options, обозначенной пиктограммой мелкого квадратика справа от текстового поля свойства Height. Выберите пункт DataBinding:

В верхней части открывшегося диалогового окна Create Data Binding (Формирование привязки данных) находятся три вкладки, на которых можно настраивать различные типы источников данных. Для этой цели, по существу, имеются следующие возможности:

Вкладка Data Field (Поле данных). На этой вкладке в качестве источника данных можно выбрать объект .NET или XML-документ.
Вкладка Element Property (Свойство элемента). На этой вкладке в качестве источника данных можно выбрать свойство элемента пользовательского интерфейса.
Вкладка Data Context (Контекст данных). На этой вкладке можно выбрать контекст данных, уже определенный в приложении в качестве источника данных.

Каждый из перечисленных выше способов привязки данных будет рассмотрен более подробно далее, а до тех пор выберите среднюю вкладку Element Property. Как пояснялось выше, на этой вкладке можно устанавливать связь между значением свойства исходного объекта и значением свойства целевого объекта, выбранного на монтажном столе.

Итак, найдите и выберите первый объект типа Slider в расположенном слева иерархическом представлении, а затем выберите свойство Value в расположенном справа иерархическом представлении:

В данном примере элементам пользовательского интерфейса не присвоены подходящие имена, поэтому используются имена, заданные по умолчанию, например slider, slider1 и т.д.

Щелкните на кнопке OK и повторите описанную выше процедуру, чтобы привязать свойство Width геометрической формы (в данном случае треугольника) к свойству value второго элемента управления типа Slider.

Если после этого вы запустите свое приложение на выполнение, то обнаружите, что размеры геометрической формы можно изменять перемещением ползунков. Не так уж и плохо всего лишь для нескольких действий мышью! Попробуйте также изменить значения свойств Minimum и Maximum каждого элемента управления типа Slider и понаблюдайте за их новым поведением.

Вернитесь к Expression Blend, выберите геометрическую форму на монтажном столе и перейдите к панели Properties. Как видите, свойства Height и Width этой формы обведены желтой ограничивающей рамкой. Эта ограничивающая рамка служит в Expression Blend визуальной подсказкой для установки указанных свойств с помощью операции привязки данных:

Если вы откроете редактор XAML, то обнаружите приведенную ниже разметку, автоматически сформированную в результате привязки данных. Обратите внимание на то, что в описании целевого объекта (в данном случае геометрической формы треугольника) используется расширение разметки XAML под названием {Binding}. У такого расширения разметки имеются два главных компонента. Во-первых, это имя исходного свойства (в данном случае свойства Value обоих элементов управления типа Slider). И во-вторых, это атрибут ElementName, обозначающий имя исходного объекта (в данном случае обоих элементов управления типа Slider):

<ed:RegularPolygon x:Name="myTriangle" Fill="#FFF4F4F5" 
		 HorizontalAlignment="Right" InnerRadius="1" Margin="0,20.5,76,0" PointCount="3" Stretch="Fill" Stroke="Black" 
		 Width="{Binding Value, ElementName=slider1}" 
		 Height="{Binding Value, ElementName=slider}" VerticalAlignment="Top"/>

По существу, в этой разметке утверждается следующее: "значение свойства Width будет присвоено свойству Value объекта типа slider1, тогда как значение свойства Height — свойству Value объекта типа slider".