WPF: Чередование цветов на ItemsControl? - PullRequest
Новая
       37

WPF: Чередование цветов на ItemsControl?

33 голосов
/ 10 декабря 2010

Как получить чередующиеся цвета на ItemsControl?У меня AlternationCount установлен в 2, но свойство ItemsControl.AlternationIndex всегда возвращает 0. 

        <ItemsControl ItemsSource="{Binding}" AlternationCount="2">
            <ItemsControl.Resources>
                <Style x:Key="FooBar" TargetType="Grid">
                    <Style.Triggers>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                            <Setter Property="Background" Value="Blue"/>
                        </Trigger>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                            <Setter Property="Background" Value="Red"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ItemsControl.Resources>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="0,0,0,10" Style="{StaticResource FooBar}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="25" />
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions >
                            <RowDefinition Height="Auto" />
                            <!--<RowDefinition Height="Auto" />-->
                        </Grid.RowDefinitions>

                        <CheckBox IsChecked="{Binding Checked, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" />
                        <Label Grid.Column="1" Content="{Binding CompanyName}" />
                        <Label Grid.Column="2" Content="{Binding TradeKey}" />
                        <Label Grid.Column="3" Content="{Binding TradeDate}" ContentStringFormat="d" />
                        <Label Grid.Column="4" Content="{Binding Cusip}" />
                        <Label Grid.Column="5" Content="{Binding IssueName}" />
                        <Label Grid.Column="6" Content="{Binding TotalUnits}" ContentStringFormat="N0" />

                        <!--<Expander Grid.Row="0" Grid.Column="7" Grid.ColumnSpan="7" IsExpanded="True">
                            <Expander.Header>
                                <StackPanel Orientation="Horizontal">
                                    <Label Content="Allocations"/>
                                    <Button Content="Edit" Name="cmdEdit" Click="cmdEdit_Click"  />
                                </StackPanel>
                            </Expander.Header>-->
                        <DataGrid Grid.Column="7" IsReadOnly="True" ItemsSource="{Binding Territories}" AutoGenerateColumns="False" CanUserAddRows="False" CanUserDeleteRows="False">
                            <DataGrid.Columns>
                                <DataGridTextColumn Header="Rep on Ticket" Binding="{Binding TradeCustomer.RepNameNotes}" />
                                <DataGridTextColumn Header="Rep # on Ticket" Binding="{Binding TradeCustomer.RepNumberNotes}" />
                                <DataGridTextColumn Header="State" Binding="{Binding TradeCustomer.AccountStateKey}" />
                                <DataGridTextColumn Header="Qty. on Ticket" Binding="{Binding TradeCustomer.Quantity, StringFormat=N0}" />

                                <DataGridTextColumn Header="Zip Code" Binding="{Binding ZipCode}" />
                                <DataGridTextColumn Header="State" Binding="{Binding State}" />
                                <DataGridTextColumn Header="Territory" Binding="{Binding Territory}" />

                            </DataGrid.Columns>

                        </DataGrid>
                        <!--</Expander>-->

                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.Template>
                <ControlTemplate>
                    <Border BorderThickness="{TemplateBinding Border.BorderThickness}" Padding="{TemplateBinding Control.Padding}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" SnapsToDevicePixels="True">
                        <ScrollViewer Padding="{TemplateBinding Control.Padding}" Focusable="False">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </ItemsControl.Template>
        </ItemsControl>

Ответы [ 3 ]

58 голосов
/ 10 декабря 2010

Проверьте здесь http://www.codeproject.com/Articles/35886/WPF-ItemsControl-with-alternating-items-and-hover-.aspx

Вы должны изменить свой код следующим образом, чтобы он заработал 

    <ItemsControl ItemsSource="{Binding DataList}" AlternationCount="2">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="FooBar" Margin="0,0,0,10">                    
                   ----------------------------
                   ----------------------------
                </Grid>
                <DataTemplate.Triggers>
                    <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                        <Setter Property="Background" Value="Blue" TargetName="FooBar"/>
                    </Trigger>
                    <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                        <Setter Property="Background" Value="Red" TargetName="FooBar"/>
                    </Trigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
7 голосов
/ 07 января 2016

Вот альтернатива, которая может быть немного более общей 

<DataTemplate x:Key="AlternatingTemplate">
    <Border>
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), 
                                                   RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}" 
                                 Value="0">
                        <Setter Property="Background" Value="White" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), 
                                                   RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}" 
                                 Value="1">
                        <Setter Property="Background" Value="LightGray" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <ContentPresenter Content="{Binding}" />
    </Border>
</DataTemplate>

Использование: 

<ItemsControl AlternationCount="2" 
              ItemTemplate="{StaticResource AlternatingTemplate}" 
              ItemsSource="{Binding SourceOfData}" />
1 голос
/ 11 декабря 2014

Если вы не хотите использовать подход DataTemplate, вы можете создать пользовательский элемент управления, который использует ContentControl в качестве контейнера элемента, что позволяет вам указать цвет фона.

Класс: 

public class ItemsControlAlternating : ItemsControl
{
    static ItemsControlAlternating()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ItemsControlAlternating),
                 new FrameworkPropertyMetadata(typeof(ItemsControlAlternating)));
    }

    protected override DependencyObject GetContainerForItemOverride()
    {
        return new ContentControl();
    }

    protected override bool IsItemItsOwnContainerOverride(object item)
    {
        return item is ContentControl;
    }
}

Словарь ресурсов: 

<Style TargetType="{x:Type c:ItemsControlAlternating}">
   <Setter Property="AlternationCount" Value="2"/>
   <Setter Property="Template">
       <Setter.Value>
           <ControlTemplate TargetType="{x:Type c:ItemsControlAlternating}">
               <ItemsPresenter/>
           </ControlTemplate>
       </Setter.Value>
   </Setter>
   <Setter Property="ItemContainerStyle">
       <Setter.Value>
           <Style TargetType="{x:Type ContentControl}">
               <Setter Property="Template">
                   <Setter.Value>
                       <ControlTemplate TargetType="{x:Type ContentControl}">
                           <Border Background="{TemplateBinding Background}">
                               <ContentPresenter/>
                           </Border>
                       </ControlTemplate>
                   </Setter.Value>
               </Setter>
               <Style.Triggers>
                   <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                       <Setter Property="Background" Value="Gray"/>
                   </Trigger>
                   <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                       <Setter Property="Background" Value="White"/>
                   </Trigger>
               </Style.Triggers>
           </Style>
       </Setter.Value>
   </Setter>
</Style>
...