Search code examples
c#wpfxaml

C# WPF - ListViewItem cannot change background color


Changing the Foreground is possible and its working, but if i change the background or the BorderBrush nothing happens (default blue Backround color) This is my ListView xaml code, am i missing anything?

        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Style.Resources>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="CornerRadius" Value="20"/>
                    </Style>
                </Style.Resources>

                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="Margin" Value="10, 5, 10, 0"/>
                <Setter Property="Height" Value="67" />
                <Setter Property="Width" Value="500"/>
                <Setter Property="Background" Value="#FFD9D9D9"/>

                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
                                                                 

Solution

  • You need to copy the default template and edit it to be able to change the background colour:

    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Style.Resources>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="CornerRadius" Value="20"/>
                </Style>
            </Style.Resources>
    
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="Margin" Value="10, 5, 10, 0"/>
            <Setter Property="Height" Value="67" />
            <Setter Property="Width" Value="500"/>
            <Setter Property="Background" Value="#FFD9D9D9"/>
    
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <ControlTemplate.Resources>
                            <Style x:Key="FocusVisual">
                                <Setter Property="Control.Template">
                                    <Setter.Value>
                                        <ControlTemplate>
                                            <Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                            <SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
                            <SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
                            <SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
                            <SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
                            <SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
                            <SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
                        </ControlTemplate.Resources>
                        <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="False"/>
                                    <Condition Property="IsSelected" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="True"/>
                                    <Condition Property="IsSelected" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
    

    Look at the SolidColorBrush resources in the template and edit them as per your requirements.

    Using a Trigger directly in the Style won't work beceause of how the default template is defined. Please refer to this blog post for more information.