WPF Listview Alternate Row Color


For setting the background color of Listview rows in an alternate fashion (odd rows and even rows) at first create a style element :

 <Style x:Key="alternatingStyle" TargetType="{x:Type ListViewItem}">
        <Style.Triggers>
            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                <Setter Property="Background" Value="LightSkyBlue"></Setter>
            </Trigger>
            <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                <Setter Property="Background" Value="LightGray"></Setter>
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="Orange"/>                
            </Trigger>
        </Style.Triggers>
    </Style>

Now write this XAML code for ListView

<ListView BorderBrush="#FFA8CC7B" Height="133" HorizontalAlignment="Left" Margin="88,382,0,0" Name="lvInvDetails" VerticalAlignment="Top" Width="596"
                  ItemContainerStyle="{StaticResource alternatingStyle}" AlternationCount="2">
    <ListView.View>
        <GridView>
        <GridViewColumn DisplayMemberBinding="{Binding Path=InvoiceDetailsItemId}" Header="Item Id" Width="90" />
        <GridViewColumn DisplayMemberBinding="{Binding Path=InvoiceDetailsItemName}" Header="Item Name" Width="120" />                    
        </GridView>
    </ListView.View>
</ListView>

Now You can see alternation color of listview.
If you have any query about this topic please leave a comment.

Advertisements

4 Responses to “WPF Listview Alternate Row Color”

  1. snowlyjam Says:

    very helpful

  2. ektam90 Says:

    It gives the following error.
    Error 8 A value of type ‘Style’ cannot be added to a collection or dictionary of type ‘UIElementCollection’.

    What am I missing here? Actually my list view will be populated dynamically.

  3. AsifAyub Says:

    I want to align text left and right just to design a chat window.
    How can I do that ??


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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: