Alternative Item Backgrounds The .NET 3.5 SP1 Way

The .NET 3.5 SP1 is full of tricks, just today I found a new property called AlternationCount which is available on all the ItemControl controls such as ItemControl, ListBox etc etc.

This simply property can be used to provide some sort of alternative look based on the current value of the AlternationIndex. So you can color items or format them differently based on their index.

Here is a small example where I color the items, a different color based on their AlternationIndex value. The AlternationIndex  works hand in hand with the AlternationCount of the ItemsControl (or derived control), so in this example the ItemsControl AlternationCount is 3, which means we can have triggers on the AlternationIndex  for values 1/2 or 3.

Here is the XAML for a small example

   1:  <Window x:Class="WpfApplication1.Window1"
   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:      Title="Window1" Height="300" Width="300">
   5:  
   6:      <Window.Resources>
   7:  
   8:          <DataTemplate x:Key="someStringItemsTemplate">
   9:  
  10:              <Border x:Name="bord" BorderBrush="Transparent"
  11:                      CornerRadius="0"
  12:                      HorizontalAlignment="Stretch"
  13:                      Background="#ff656565">
  14:                  <Label Content="{Binding}"
  15:                         HorizontalContentAlignment="Stretch"
  16:                         HorizontalAlignment="Stretch"
  17:                         Margin="0"
  18:                         Background="Transparent"/>
  19:  
  20:              </Border>
  21:              <DataTemplate.Triggers>
  22:                  <Trigger Property="ItemsControl.AlternationIndex"
  23:                           Value="1">
  24:                      <Setter TargetName="bord"
  25:                           Property="Background" Value="Yellow"/>
  26:                  </Trigger>
  27:                  <Trigger Property="ItemsControl.AlternationIndex"
  28:                           Value="2">
  29:                      <Setter TargetName="bord"
  30:                           Property="Background" Value="Orange"/>
  31:                  </Trigger>
  32:              </DataTemplate.Triggers>
  33:          </DataTemplate>
  34:  
  35:      </Window.Resources>
  36:  
  37:      <ItemsControl x:Name="someItems" AlternationCount="3"
  38:                        VerticalAlignment="Top"
  39:                        HorizontalAlignment="Stretch"
  40:                        Margin="0,0,0,0"
  41:                        ItemTemplate="{StaticResource 
  42:                          someStringItemsTemplate}">
  43:          <ItemsControl.ItemsPanel>
  44:              <ItemsPanelTemplate>
  45:                  <StackPanel Orientation="Vertical"/>
  46:              </ItemsPanelTemplate>
  47:          </ItemsControl.ItemsPanel>
  48:  
  49:      </ItemsControl>
  50:  </Window>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

And when run with a small set of items we get

image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: