вторник, 15 сентября 2015 г.

Раскраска фона элементов ListBox через строчку

Как то всегда пользовался для отображения данных, в которых имеет смысл раскрашивать цвет фона через строчку DataGrid, а в нем все просто. Есть два замечательных свойства RowBackground и AlternatingRowBackground. Задаешь их и все работает. Если нужно на основе данных отображаемых в строках, то это тоже все просто, через Converter. А вот что делать, если через строчку надо раскрасить фон в ListBox?


Как оказалось, все достаточно просто.
У ListBox есть замечательное свойство AlternationCount которое позволяет задать периодичность изменения раскраски. Если нам нужно строка белая, потом серая, потом опять белая, то записываем в него 2. Если нам нужно чередовать больше цветов, то указываем их количество. Ну а дальше, задаем стиль, который через присоединенное свойство ItemsControl.AlternationIndex определяет каким по счету в рамках одного периода смены цвета является текущий ListBoxItem. Например, AlternationCount = 3. В этом случае у  у первого ListBoxItem свойство AlternationIndex = 0, у второго 1, у третьего 2, у четвертого опять 0 и т.д.
Ну и небольшая демка:
<ListBox AlternationCount="2">
    <ListBox.Resources>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
            <Style.Triggers>
                <Trigger Property="ListBox.AlternationIndex" Value="1">
                    <Setter Property="Background" Value="White"/>
                    <Setter Property="Foreground" Value="Black"/>
                </Trigger>
                <Trigger Property="ListBox.AlternationIndex" Value="0">
                    <Setter Property="Background" Value="DarkBlue"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListBox.Resources>
    <ListBoxItem>1</ListBoxItem>
    <ListBoxItem>2</ListBoxItem>
    <ListBoxItem>3</ListBoxItem>
    <ListBoxItem>4</ListBoxItem>
    <ListBoxItem>5</ListBoxItem>
    <ListBoxItem>6</ListBoxItem>

</ListBox>
Вот так это выглядит:
На мой взгляд, все достаточно просто.

Комментариев нет:

Отправить комментарий