Использование DataBinding и DataTemplate при помощи Expression Blend в Silverlight - Написание шаблона ListItemTemplate вручную

Написание шаблона ListItemTemplate вручную

Написать шаблон для элементов списка не так сложно. Для этого откройте проект Visual Studio и найдите ListBox в Page.xaml, где вы заметите, что он также имеет закрывающий тег.

<ListBox x:Name="BookListBox"
   Margin="50,25,50,25"
   Grid.Row="1" 
   HorizontalAlignment="Stretch"
   VerticalAlignment="Stretch"
   ItemsSource="{Binding Mode=OneWay, Path=Books,
   Source={StaticResource LibraryDS}}">
 </ListBox> 

Между открывающим и закрывающим тегом мы расположим ListBox.ItemTemplate, а в его пределах DataTemplate.

<ListBox x:Name="BookListBox"
   Margin="50,25,50,25"
   Grid.Row="1" 
   HorizontalAlignment="Stretch"
   VerticalAlignment="Stretch"
   ItemsSource="{Binding Mode=OneWay, Path=Books,
   Source={StaticResource LibraryDS}}">
     <ListBox.ItemTemplate>
       <DataTemplate> 
       </DataTemplate>         
     </ListBox.ItemTemplate>
   </ListBox> 

Теперь нам остается всего лишь заполнить DataTemplate элементами управления, которые вы хотите использовать для того, чтобы привязать к свойствам каждой книги. Обычно начинают с какого-либо элемента управления внешним видом. Я решил использовать StackPanel и 5 текстовых полей для простоты: первое, третье и пятое я буду использовать для того, чтобы привязать к свойствам каждой книги, а оставшиеся два -- в качестве подсказок.

<ListBox.ItemTemplate>
   <DataTemplate>
     <StackPanel x:Name="DisplayListData"
     Orientation="Horizontal"
     VerticalAlignment="Bottom"
     Margin="5" >
       <TextBlock x:Name="Title"
       Text="{Binding Title}"
       Margin="5,0,0,0"
       VerticalAlignment="Bottom"
       HorizontalAlignment="Left"
       FontFamily="Comic Sans MS"
       FontSize="18" />
       
       <TextBlock x:Name="ISBNPrompt"
       Text="(ISBN: " 
       Margin="10,0,0,0"
       VerticalAlignment="Bottom"
       HorizontalAlignment="Left"
       FontFamily="Verdana"
       FontSize="14" />
       
       <TextBlock x:Name="ISBN"
       Text="{Binding ISBN10}" 
       VerticalAlignment="Bottom"
       HorizontalAlignment="Left"
       FontFamily="Verdana"
       FontSize="14" />
       
       <TextBlock x:Name="CoverPrompt"
       Text=") Cover Price: $" 
       VerticalAlignment="Bottom"
       HorizontalAlignment="Left"
       FontFamily="Verdana"
       FontSize="14" />
       
       <TextBlock x:Name="Cover"
       Text="{Binding CoverPrice}" 
       VerticalAlignment="Bottom"
       HorizontalAlignment="Left"
       FontFamily="Verdana"
       FontSize="14" />
     </StackPanel>
   </DataTemplate>        
</ListBox.ItemTemplate> 

В шаблоне присутствует очень простой StackPanel, а в его пределах - пять простых TextBlock. У первого размер шрифта равен 16 и сам шрифт типа Comic Sans MS, а все остальные имеют шрифт Verdana 14-го размера. Первый, третий и пятый элементы привязаны к свойствам Title, ISBN10 и CoverPrice соответственно. При запуске ListBox будет выглядеть следующим образом 

Рисунок 7-19. Запущенное приложение, обладающее ListItemTemplate