Разный цвет строк в элементе управления ListBox в WPF
Автор: Диптимайя Патра (Diptimaya Patra)
В этой статье будет показано, как можно создать строки разного цвета в элементе управления ListBox в WPF.
Создание проекта WPF
Запустите Visual Studio 2008 и создайте новый проект WPF. Дайте ему имя ListBoxSampleWPF.
.gif)
Теперь добавим в приложение элемент управления ListBox, который будет выглядеть следующим образом:
.gif)
Теперь добавим некоторые демонстрационные данные в элемент управления ListBox.
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public string Country { get; set; }
}
ObservableCollection<Person> myList;
public Window1()
{
InitializeComponent();
myList = new ObservableCollection<Person>()
{
new Person{ Name="Name 1", Age=24, Country="India"},
new Person{ Name="Name 2", Age=24, Country="India"},
new Person{ Name="Name 3", Age=24, Country="India"},
new Person{ Name="Name 4", Age=24, Country="India"},
new Person{ Name="Name 5", Age=24, Country="India"},
new Person{ Name="Name 6", Age=24, Country="India"},
new Person{ Name="Name 7", Age=24, Country="India"},
new Person{ Name="Name 8", Age=24, Country="India"},
new Person{ Name="Name 9", Age=24, Country="India"},
new Person{ Name="Name 10", Age=24, Country="India"},
new Person{ Name="Name 11", Age=24, Country="India"},
new Person{ Name="Name 12", Age=24, Country="India"},
new Person{ Name="Name 13", Age=24, Country="India"},
new Person{ Name="Name 14", Age=24, Country="India"},
new Person{ Name="Name 15", Age=24, Country="India"},
new Person{ Name="Name 16", Age=24, Country="India"},
new Person{ Name="Name 17", Age=24, Country="India"},
new Person{ Name="Name 18", Age=24, Country="India"},
new Person{ Name="Name 19", Age=24, Country="India"},
new Person{ Name="Name 20", Age=24, Country="India"},
new Person{ Name="Name 21", Age=24, Country="India"},
new Person{ Name="Name 22", Age=24, Country="India"},
};
lbPersonList.ItemsSource = myList;
}
Теперь привяжем свойство "Name" к элементу управления ListBox, чтобы можно было видеть имена.
<ListBox x:Name="lbPersonList" Margin="19,17,162,25">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
.gif)
Как можно видеть, мы не можем различать каждый ряд; это означает, что цвет фона строки один и тот же — белый.
Теперь следует добавить стиль в ListBoxItem.
<Window.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="#19f39611"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#19000000"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<ListBox x:Name="lbPersonList" Margin="19,17,162,25" AlternationCount="2">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Теперь запустим приложение.
.gif)
Да, мы получили разный цвет строк.
Можно задать в качестве AlternationCount значение больше 2 и добавить нужное количество цветов. Тогда повторение цветов можно будет видеть после AlternationCount.
Надеюсь, эта статья будет полезной.