Статический класс Countries возвратит список нескольких стран, которые будут отображены:

public static class Countries

public static IEnumerable<Country> GetCountries()

List<Country> countries = new List<Country>(); countries.Add(new Country( Austria , Images/Austria.bmp )); countries.Add(new Country( Germany , Images/Germany.bmp )); countries.Add(new Country( Norway , Images/Norway.bmp )); countries.Add(new Country( USA , Images/USA.bmp )); return countries;

Внутри файла, содержащего отделенный код, в конструкторе класса Window1 свойство DataContext экземпляра Window1 устанавливается в список стран, возвращенных методом Countries.GetCountries() . (Свойство DataContext - это средство привязки данных, о котором пойдет речь в следующей главе.)

public partial class Window1 : System.Windows.Window

public Window1()

InitializeComponent();

this.DataContext = Countries.GetCountries();

Рис. 34.28. Внешний вид ListBox, устанавливаемый по умолчанию

Внутри кода XAML определяется ListBox по имени countryList. Элемент countryList не имеет отдельного стиля; он использует внешний вид по умолчанию элемента ListBox. Свойство ItemSource устанавливается в расширение разметки Binding, используемое средством привязки данных, и из отделенного кода видно, что привязка осуществляется к массиву объектов Country. На рис. 34.28 показан внешний вид ListBox, устанавливаемый по умолчанию.

Как видим, по умолчанию он отображает лишь названия стран, возвращенные методом ToString() , в виде простого списка.

<Window x:Class= ListboxStyling.Window1

xmlns= http: schemas.microsoft.com/winfx/20 06/xaml/presentation xmlns:x= http: schemas.microsoft.com/winfx/200 6/xaml Title= Listbox Styling Height= 300 Width= 300 >

<StackPanel>

<ListBox Name= countryList1 ItemsSource= {Binding} />

</StackPanel> </Window>

Объекты Country несут в себе как имя, так и изображение флага. Конечно, вы также можете отображать оба значения в окне списка. Но чтобы добиться этого, придется определить шаблон.

Элемент ListBox содержит элементы ListBoxItem. Вы можете определить содержимое элемента с ItemTemplate. Стиль listBoxStyle1 определяет ItemTemplate со значением DataTemplate. Шаблон DataTemplate применяется для привязки данных к элементам. Вы можете использовать расширение разметки Binding с элементами DataTemplate.

DataTemplate содержит Grid с тремя столбцами. Первый столбец содержит строку Country:, второй - название страны, а третий - флаг этой страны. Поскольку имена стран имеют разную длину, но в списке должны быть представлены строками равной длины, для определения второго столбца устанавливается свойство SharedSizeGroup. Информация разделения размера для столбцов используется только потому, что также установлено свойство Grid.IsSharedSizeScope.

После определений столбца и строки вы можете видеть два элемента TextBlock. Первый элемент TextBlock содержит текст Country:, а второй элемент TextBlock привязывает свойство Name, определенное в классе Country.

Содержимое третьего столбца - элемент Border, содержащий Grid. Элемент Grid содержит Rectangle с линейной обтекающей кистью и элемент Image, привязанный к свойству ImagePath класса Country. На рис. 34.29 показаны страны в ListBox, который выглядит совершенно по-другому, чем до этого.

<Window.Resources>

<Style x:Key= listBoxStyle1 TargetType= {x:Type ListBox} > <Setter Property= ItemTemplate > <Setter.Value> <DataTemplate> <Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width= Auto />

<ColumnDefinition Width= * SharedSizeGroup= MiddleColumn />

<ColumnDefinition Width= Auto /> </Grid.ColumnDefinitions> <Grid.RowDefinitions>

<RowDefinition Height= 60 /> </Grid.RowDefinitions>

<TextBlock FontSize= 16 VerticalAlignment= Center Margin= 5

FontStyle= Italic Grid.Column= 0 >Country:</TextBlock> <TextBlock FontSize= 16 VerticalAlignment= Center Margin= 5 Text= {Binding Name} FontWeight= Bold Grid.Column= 1 /> <Border Margin= 4,0 Grid.Column= 2 BorderThickness= 2 CornerRadius= 4 >

<Border.BorderBrush>

<LinearGradientBrush StartPoint= 0,0 EndPoint= 0,1 > <GradientStop Offset= 0 Color= #aaa /> <GradientStop Offset= 1 Color= #222 />

</LinearGradientBrush> </Border.BorderBrush> <Grid>

<Rectangle>

<Rectangle.Fill> <LinearGradientBrush StartPoint= 0,0 EndPoint= 0,1 > <GradientStop Offset= 0 Color= #444 /> <GradientStop Offset= 1 Color= #fff /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

<Image Width= 48 Margin= 2,2,2,1 Source= {Binding ImagePath} /> </Grid> </Border> </Grid> </DataTemplate> </Setter.Value> </Setter>

<Setter Property= Grid.IsSharedSizeScope Value= True />

</Style>

</Window.Resources>

Рис. 34.29. Измененный внешний видListBox

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

В предыдущем примере для определения того, как элементы списка должны выглядеть в ListBox по умолчанию был создан только ItemTemplate. Теперь создадим шаблон, определяющий другой ListBox. Шаблон будет содержать элемент ControlTemplate для определения элементов ListBox. Элементом теперь будет ScrollViewer - представление с линейкой прокрутки, содержащее внутри себя StackPanel. Поскольку элементы списка теперь должны располагаться горизонтально, Orientation экземпляра StackPanel устанавливаем в Horizontal. Панель StackPanel будет содержать элементы, определенные посредством ItemTemplate, поэтому IsItemHost экземпляра StackPanel устанавливаем в true. Свойство IsItemHost - это свойство, доступное в каждом элементе Panel, который может содержать список элементов.

ItemTemplate определяет вид элементов панели StackPanel. Здесь создадим сетку (grid) из двух строк, первая из которых будет содержать элемента: Image, привязанные к свойству ImagePath, а вторая - элементы TextBlock, привязанные к свойству Name.

На рис. 34.30 показан ListBox, стилизованный с помощью listBoxStyle2, в котором линейка прокрутки появляется автоматически, когда представление оказывается слишком маленьким, чтобы отобразить сразу весь список.

<Style x:Key= listBoxStyle2 TargetType= {x:Type ListBox} > <Setter Property= Template > <Setter.Value>

<ControlTemplate TargetType= {x:Type ListBox} >

<ScrollViewer HorizontalScrollBarVisibility= Auto >

<StackPanel Name= StackPanel1 IsItemsHost= True Orientation= Horizontal /> </ScrollViewer> </ControlTemplate> </Setter.Value> </Setter>

<Setter Property= VerticalAlignment Value= Center /> <Setter Property= ItemTemplate >

<Setter.Value> <DataTemplate> <Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width= Auto /> </Grid.ColumnDefinitions> <Grid.RowDefinitions>

<RowDefinition Height= 60 />

<RowDefinition Height= 30 /> </Grid.RowDefinitions>

<Image Grid.Row= 0 Width= 48 Margin= 2,2,2,1 Source= {Binding ImagePath} /> <TextBlock Grid.Row= 1 FontSize= 14 HorizontalAlignment= Center Margin= 5 Text= {Binding Name} FontWeight= Bold />

</Grid> </DataTemplate> </Setter.Value> </Setter> </Style>