sigmax bpo
sigmax bpo

Reputation: 27

WPF remove listview highlighted background when lostfocus

How to remove the highlighted color after lost focus on the item ?

Output : https://ibb.co/fJff3z (after lost focus, the background is gray color)

<ListView Name="lvUsers" FontSize="25" FontFamily="Arial" Height="600" Width="600"  VerticalContentAlignment="Center" >   
                        <ListView.View>
                            <GridView>
                                <!-- ... -->
                                <GridViewColumn Width="265" HeaderContainerStyle="{StaticResource myHeaderStyle}"  >
                                    <GridViewColumn.CellTemplate>
                                        <DataTemplate>
                                            <Button Command="{Binding Command2}" CommandParameter="{Binding CommandParameter2}" Background="Transparent" Style="{StaticResource MyButtonStyle}" Focusable="False" >
                                                <TextBlock TextWrapping="Wrap" Text="{Binding CountryName}" Margin="4" />
                                            </Button>
                                        </DataTemplate>
                                    </GridViewColumn.CellTemplate>
                                </GridViewColumn>
                                <!-- ... -->
                            </GridView>
                        </ListView.View>
                        <ListView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock FontWeight="Bold" Text="{Binding Name}" FontSize="30"  FontFamily="Arial" Foreground="Black"/>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                            </GroupStyle>
                        </ListView.GroupStyle>
                    </ListView>

Upvotes: 0

Views: 758

Answers (1)

Faenrig
Faenrig

Reputation: 197

One possible way is to make a custom style for the ListBoxItem Control.

EDIT: I found a similar question right here: Unfocused ListBox, item style

You can first take the WPF system template from the Visual Studio install path e.g.

C:\Program Files (x86)\Microsoft Visual Studio 14.0\DesignTools\SystemThemes\Wpf\aero2.normalcolor.xaml

When searching for ListBoxItem you can take the complete style and customize it.

A simple example for testing:

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Padding" Value="4,1" />
    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border x:Name="Bd" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}" 
                    Padding="{TemplateBinding Padding}" 
                    SnapsToDevicePixels="true">
                    <ContentPresenter 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                </Border>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd" Property="Background" Value="gray" />
                        <Setter TargetName="Bd" Property="BorderBrush" Value="gray" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="False" />
                            <Condition Property="IsSelected" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd" Property="Background" Value="transparent" />
                        <Setter TargetName="Bd" Property="BorderBrush" Value="transparent" />
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="True" />
                            <Condition Property="IsSelected" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd" Property="Background" Value="red" />
                        <Setter TargetName="Bd" Property="BorderBrush" Value="red" />
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Bd" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The most important part is this Multitrigger:

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="Selector.IsSelectionActive" Value="False" />
        <Condition Property="IsSelected" Value="True" />
    </MultiTrigger.Conditions>
    <Setter TargetName="Bd" Property="Background" Value="transparent" />
    <Setter TargetName="Bd" Property="BorderBrush" Value="transparent" />
</MultiTrigger>

So when you have a selected value, but the ListBox control is not active the selected ListBoxItem color is transparent or anything you choose.

I then recommend to save this style in a ResourceDictionary and adding it to the App.xaml to apply it directly to the complete WPF application.

Upvotes: 1

Related Questions