Monday, September 22, 2014

ListView in WPF with alternating row colors

Here's how to change row colors for a WPF ListView control using a Converter class and Triggers.
Converter Class:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
public class AddressTargetConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (value.ToString().Equals(parameter.ToString()));
        }
 
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

XAML:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<Window.Resources>
        <y:AddressTargetConverter x:Key="AddressTargetConverter" />
    </Window.Resources>
    <Grid>
        <StackPanel>
            <ListView ItemsSource="{Binding PersonCollection}">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Address, Converter={StaticResource AddressTargetConverter}, ConverterParameter = Guam}" Value="True">
                                <Setter Property="Background" Value="LightBlue"></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.View>
                    <GridView>
                        <GridViewColumn Width="140" Header="Name" DisplayMemberBinding="{Binding Name}"  />
                        <GridViewColumn Width="200" Header="Address"  DisplayMemberBinding="{Binding Address}" />
                        <GridViewColumn Width="160" Header="Contact" DisplayMemberBinding="{Binding Contact}" />
                    </GridView>
                </ListView.View>
            </ListView>
        </StackPanel>
    </Grid>

Namespace declaration in XAML:
1
xmlns:y="clr-namespace:ListViewApp"
where ListViewApp is the project namespace.

KGComputers! :)

0 comments:

Post a Comment