Работа с шаблонами данных

Expression Blend --- Графические интерфейсы --- Работа с шаблонами данных

В следующем примере созданные ранее классы PurchaseOrder и PurchaseOrders будут вновь использованы для того, чтобы продемонстрировать, насколько упрощается создание специальных шаблонов данных в Expression Blend. С этой целью создайте новый проект приложения WPF, присвоив ему имя FunWithDataTemplates. Выберите из главного меню команду Project --> Existing Item (Проект --> Добавить существующий элемент), чтобы скопировать из предыдущего проекта файлы исходного кода C#, в которых определяются бизнес-объекты и их специальная коллекция.

После создания нового проекта перетащите узел PurchaseOrders из панели Data на монтажный стол главного окна типа Window, чтобы установить связь с этим источником данных объекта, как это делалось в предыдущем примере проекта.

Напомним, что в среде Expression Blend IDE автоматически формируется используемый по умолчанию шаблон данных в качестве ресурса, применяемого на уровне главного окна приложеия и описываемого в файле разметки MainWindow.xaml. Именно этот шаблон используся в элементе управления типа ListBox для отображения значений отдельных свойств из коллекции объектов в простых, нестилизованных элементах списка типа TextBlock:

<DataTemplate x:Key="PurschaseOrderTemplate">
			<StackPanel>
				<TextBlock Text="{Binding Amount}"/>
				<TextBlock Text="{Binding Description}"/>
				<TextBlock Text="{Binding TotalCost}"/>
			</StackPanel>
</DataTemplate>

Правка шаблона данных

Если требуется видоизменить используемый по умолчанию шаблон данных, перейдите сначала к панели Resources и найдите нужный шаблон по имени. Затем откройте его для правки, щелкнув на кнопке Edit Resource:

Перейдите к панели Object and Timeline и выберите первый элемент списка типа TextBlock:

На данном этапе работы над рассматриваемым здесь примером проекта можете воспользоваться панелью Properties чтобы внести изменения в любые свойства объекта типа ТехtBlock, чтобы определить стиль его оформления для отображения привязываемого к нему значения свойства Amount. В частности можете выбрать другой цвет переднего плана в свойстве Foreground или внести изменения в шрифтовое оформление в области Text данной панели.

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

Определение составных элементов пользовательского интерфейса для шаблона данных

Конечно, выделение цветом улучшает внешний вид отображаемых данных, но он все равно остается довольно неопределенным. Что, например, означает цифра 5, выделенная красным цветом? Поэтому вернитесь к рассматриваемому здесь шаблону на панели Objects and Timeline и еще раз выберите первый элемент списка типа TextBlock. Щелкните правой кнопкой мыши на узле этого объекта и сгруппируйте его в новую вложеную блочную панель типа StackPanel по команде Group Into --> StackPanel, выбираемой из всплывающего контекстного меню.

После этого установите значение Horizontal в свойстве Orientation вновь созданного элемента управления типа StackPanel. И наконец, расположите новый элемент типа Label выше уже имеющегося элемента списка типа TextBlock. По завершении иерархическое представление на панели Objects and Timeline должно выглядеть так, как показано на рисунке:

Прежде чем переходить к следующему этапу работы над данным проектом, введите в свойстве Content элемента управления типа Label текстовую надпись Amount.

Если вы внимательно исследуете редактор текущего шаблона данных, то заметите, что все его элементы отображаются в мелком масштабе, поэтому воспользуйтесь элементами управления в левом нижнем углу монтажного стола (или колесиком мыши), чтобы увеличить масштаб. Благодаря этому вы обнаружите, что новый вложенный диспетчер компоновки и его элемент управления расположены неверно. Для исправления этого недостатка установите значение 70 в свойстве элемента управления Label.

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

В качестве примера ниже приведен окончательный вид панели Objects and Timeline (и части увеличенного монтажного стола) для рассматриваемого здесь шаблона данных. Обратите внимание на то, что вложенные объекты типа StackPanel переупорядочены таким образом, чтобы количество и стоимость товаров перечислялись до их описания. А для специального указания на описание товара в данный шаблон введен графический элемент, изображающий маленькую стрелку.

Ниже приведена исходная разметка, описывающая рассматриваемый здесь шаблон данных в коде XAML. И хотя она может оказаться у вас несколько иной, общая идея должна быть вам ясна:

<DataTemplate x:Key="PurschaseOrderTemplate">
			<StackPanel>
				<StackPanel Orientation="Horizontal">
					<Label x:Name="label" Content="Amount" FontWeight="Bold" FontStyle="Italic" FontSize="21.333" 
						Margin="0,0,10,0"/>
					<TextBlock x:Name="ver" Text="{Binding Amount}" FontSize="24" Foreground="#FFF30808" FontWeight="Bold" d:LayoutOverrides="Width" VerticalAlignment="Center"/>
				</StackPanel>
				<StackPanel Orientation="Horizontal">
					<Label Content="Cost" FontSize="21.333" FontWeight="Bold" FontStyle="Italic" Width="{Binding ActualWidth, ElementName=label, Mode=OneWay}" Margin="0,0,10,0"/>
					<TextBlock Text="{Binding TotalCost}" d:LayoutOverrides="Width" FontSize="24" FontWeight="Bold" Foreground="#FF1267EF" Margin="0"/>
				</StackPanel>
				<StackPanel Orientation="Horizontal" Width="104.29">
					<ed:BlockArrow Height="15" Orientation="Right" Stroke="Black" Width="20">
						<ed:BlockArrow.Fill>
							<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
								<GradientStop Color="#FF1C9962" Offset="0"/>
								<GradientStop Color="#FF6BE51B" Offset="1"/>
							</LinearGradientBrush>
						</ed:BlockArrow.Fill>
					</ed:BlockArrow>
					<TextBlock Text="{Binding Description}" d:LayoutOverrides="Width" FontSize="21.333" FontFamily="Vivaldi" Foreground="#FFFBA307" Margin="10,0,0,0" FontWeight="Bold"/>
				</StackPanel>
			</StackPanel>
		</DataTemplate>

Помните, что во время правки любого шаблона данных вы всегда можете вернуться к визуальному конструктору главного окна (объекта типа Window) или элемента управления на начальной веб-странице, щелкнув на кнопке Return scope to Window/UserControl:

Итак, вернитесь к монтажному столу, чтобы посмотреть результаты правки шаблона данных: