Thanks for sharing your code.

Also, keep in mind that WPF 3.5 has a built-in feature that allows alternating rows in a more efficient way than my solution here. You can read more about it in Vincent’s blog.

Thanks,
Bea

public class ListViewItemAlternatingStyleSelector : StyleSelector
{
private int i = 0;
private List<string> styleKeys;

public ListViewItemAlternatingStyleSelector(string styleKey1, string styleKey2, params string[] styleKeys)
{
this.styleKeys = new List<string>(styleKeys.Length + 2);
this.styleKeys.Add(styleKey1);
this.styleKeys.Add(styleKey2);
this.styleKeys.AddRange(styleKeys);
}

public override Style SelectStyle(object item, DependencyObject container)
{
ItemsControl ic = ItemsControl.ItemsControlFromItemContainer(container);

if (item == ic.Items[0])
{
i = 0;
}

return (Style)ic.FindResource(styleKeys[i++ % this.styleKeys.Count]);
}
}

To construct the class in XAML, you simply use an ObjectDataProvider.

<ObjectDataProvider x:Key=”ListViewItemAlternatingStyleSelector” ObjectType=”{x:Type ctrls:ListViewItemAlternatingStyleSelector}”>
<ObjectDataProvider.ConstructorParameters>
<sys:String>ListViewItemStyle1</sys:String>
<sys:String>ListViewItemStyle2</sys:String>
<sys:String>ListViewItemStyle3</sys:String>
<sys:String>ListViewItemStyle4</sys:String>
</ObjectDataProvider.ConstructorParameters>
</ObjectDataProvider>
<Style TargetType=”{x:Type ListViewItem}” x:Key=”ListViewItemStyle1″>
<Setter Property=”Background” Value=”Transparent” />
</Style>
<Style TargetType=”{x:Type ListViewItem}” x:Key=”ListViewItemStyle2″>
<Setter Property=”Background” Value=”Honeydew” />
</Style>
<Style TargetType=”{x:Type ListViewItem}” x:Key=”ListViewItemStyle3″>
<Setter Property=”Background” Value=”Transparent” />
</Style>
<Style TargetType=”{x:Type ListViewItem}” x:Key=”ListViewItemStyle4″>
<Setter Property=”Background” Value=”AliceBlue” />
</Style>

And of course we must update the binding to support the ObjectDataProvider.

<ListView ItemContainerStyleSelector=”{Binding Source={StaticResource ListViewItemAlternatingStyleSelector}}”>

That would simplify the code, but it would make it less performant. IndexOf does a linear search – O(n) – so doing that for each item would result in a O(n2) solution. My solution is a bit more verbose, but it executes in O(n).

Also, WPF now has support for alternating rows. To get this working, you can set ItemsControl’s AlternationCount property to the number of different styles you want to have. Then you can use a trigger to set different properties for each row. For more information, look at Vincent’s blog post.

Bea

All your blogs are great. Just one thing you can use the indexOf property of the items collection to simplify your SelectStyle function:

public override Style SelectStyle(object item, DependencyObject container)
{
var ic = ItemsControl.ItemsControlFromItemContainer(container);

return (Style)(ic.FindResource(
ic.Items.IndexOf(item) % 2 == 0 ? “ListViewItemStyle1″ : “ListViewItemStyle2″));
}

What was happening is that the text was wrapping, and therefore occupying a smaller width, but the total width of the ListView was not changing. My guess is that HorizontalAlignment was Center, causing the whole text to shift as we make its width smaller (as a consequence of resizing). By setting HorizontalAlignment to Left, the text will have no need to shift as it’s resized anymore.

Does that make sense?

I’m glad it worked for you!

Bea

In any event, thanks a million for helping me work around this specific scenario!

Yeah, I see the same behavior you’re describing. I was able to get around it by setting the HorizontalAlignment property of the TextBlock to Left. Try this:

<TextBlock Text=”{Binding XPath=Details}” HorizontalAlignment=”Left” MaxWidth=”{Binding RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}, Path=ViewportWidth}” Visibility=”Collapsed” Name=”tb” TextWrapping=”Wrap” Margin=”2,0,0,4″/>

Or you can download my sample here.

Let me know if this worked for you.

Bea

I’ve tried a solution where you bind the MaxWidth to the ScrollViewer’s ViewportWidth, which appears to work splendidly at first. The problem is, if you resize the window decreasing the width, the text moves a corresponding size to the right as if you’d set a left margin. As of yet, I’ve not found an ideal solution for this scenario. :(

Try setting ScrollViewer.HorizontalScrollBarVisibility=”Disabled” on your ListView. This worked for me, in the sample for this blog post.

ScrollViewer.HorizontalScrollBarVisibility is set to Auto by default, which means that a horizontal scrollbar comes up when the content of the rows can not all be displayed. Setting it to Disabled will force all the content to fit in the ListView area. If your text is too long, it will wrap (provided that you enabled text wrapping).

I uploaded a project to my server that shows this working – you can find it here.

Thanks,
Bea