C# Wpf ListView 행별 색상 표현방법, Style.Triggers 사용법

오늘은 ListView 내에서 List Data 값을 기준으로 각 Row 의 배경색을 다르게 적용하는 방법에 대한 코드입니다.

 

해당 기능을 적용하기위해서 "ListView.ItemContainerStyle" Tag 내에 코드를 작성 합니다.

 

<ListView.View> 내에 선언된 ViewColumn 내의 DisplayMemberBinding 에 설정된 Binidng Path 와 Style Trigger 를 적용할 Binding Path 와 동일합니다. Column 값 중 원하는 조건 값을 기준으로 작성을 하시면 됩니다.

 

1. List View Code 작성

다른 속성 값은 보실 필요없고, <ListView> Tag 안에 <ListView.View> <GridView> 내에 <GridViewColumn> 값이 데이터 속성 값들이구나~ 하고 넘어 가시면 됩니다.

<ListView x:Name="ListView" ItemsSource="{Binding Path=LData}" Height="200" MaxHeight="100" Background="#D8D9DA" BorderBrush="White"
            ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" VerticalAlignment="Top">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Type" Width="Auto" DisplayMemberBinding="{Binding Path=Type}"/>
            <GridViewColumn Header="Time" Width="Auto" DisplayMemberBinding="{Binding Path=Time}"/>
            <GridViewColumn Header="Data" Width="400" DisplayMemberBinding="{Binding Path=Data}"/>
        </GridView>
    </ListView.View>
</ListView>

---

2. Style Code 작성

이제 ListView 내에 들어가는 Item View 의 Style 을 변경할 차례인데요, Style Resource 만드는 방법과 동일합니다. 전체적인 Xaml 코드에서 쓰여지는 Style 코드는 <Window.Resource> Tag 영역에 작성이 되어져 {StaticResource} 형태로 불려지는데, ListView 에서는 그 내부에 "<ListView.ItemContainerStyle>" Tag 에 작성을 하게 됩니다.

<ListView x:Name="ListView" ItemsSource="{Binding Path=LData}" Height="200" MaxHeight="100" Background="#D8D9DA" BorderBrush="White"
            ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" VerticalAlignment="Top">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Grid.ShowGridLines" Value="True"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="BorderThickness" Value="0,0,0,1"/>
            <Setter Property="FontSize" Value="10"/>
            <Setter Property="Background" Value="WhiteSmoke"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Type}" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ListView.ItemContainerStyle>

    <ListView.View>
        <GridView>
            <GridViewColumn Header="Type" Width="Auto" DisplayMemberBinding="{Binding Path=Type}"/>
            <GridViewColumn Header="Time" Width="Auto" DisplayMemberBinding="{Binding Path=Time}"/>
            <GridViewColumn Header="Data" Width="400" DisplayMemberBinding="{Binding Path=Data}"/>
        </GridView>
    </ListView.View>
</ListView>

<Style.Triggers> Tag 내에 있는 구문을 제외한 나머지 속성 값은 Item View 에 공통적으로 적용되는 부분이고, Triggers 안에 있는 내용은 "Type" 의 값이 "True" 이면, 배경색을 "Red" 로 변경하겠다. 라는 의미 입니다.