tzippy
tzippy

Reputation: 6638

Alternating Background Color Grid Rows not working

I am trying to implement alternating background Color on my Rows. I have an ItemsControl with an ItemTemplate in which I use Triggers on the Style Property of the Border. But I end up with all RoyalBlue Rows instead of alternating with Red. Can somene assist? Thank you very much!

<Page.Resources>
   <DataTemplate x:Key="myTemplate" >
      <Grid>
         <Border BorderThickness="1" CornerRadius="2" Margin="2" VerticalAlignment="Stretch" Height="20" Width="Auto">
            <Border.Style>
               <Style TargetType="{x:Type Border}">
                  <Style.Triggers>
                     <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                        <Setter Property="Background" Value="Red" />
                     </Trigger>
                     <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                        <Setter Property="Background" Value="RoyalBlue" />
                     </Trigger>
                  </Style.Triggers>
               </Style>
            </Border.Style>
            <Grid >
               <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
               </Grid.RowDefinitions>
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*" />
               </Grid.ColumnDefinitions>
               <Label Grid.Column="0" Grid.Row="0" Content="{Binding Name}"/>
            </Grid >
         </Border>
      </Grid>
   </DataTemplate>
</Page.Resources> 

<ScrollViewer >
   <StackPanel  >
      <ItemsControl ItemsSource="{Binding Path=myElements}" ItemTemplate="{StaticResource myTemplate}" AlternationCount="2"/>
   </StackPanel>
</ScrollViewer>

Upvotes: 1

Views: 178

Answers (1)

dkozl
dkozl

Reputation: 33364

ItemsControl.AlternationIndex will be set against direct child of ItemsControl panel (ContentPresenter) so you need to use DataTrigger with RelativeSource binding and because it's an attached property you need to put in brackets like Path=(ItemsControl.AlternationIndex)

<Style TargetType="{x:Type Border}">
   <Style.Triggers>
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ContentPresenter}}, Path=(ItemsControl.AlternationIndex)}" Value="1">
         <Setter Property="Background" Value="Red" />
      </DataTrigger>
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ContentPresenter}}, Path=(ItemsControl.AlternationIndex)}" Value="0">
         <Setter Property="Background" Value="RoyalBlue" />
      </DataTrigger>
   </Style.Triggers>
</Style>

Upvotes: 3

Related Questions