wpf - Cambiar el color de fondo de ListViewItem con el mouse sobre

xaml background

Question

Necesito algo de ayuda aquí. No puedo entender por qué ninguna de las soluciones que encontré funciona para mi caso. Consideremos una vista de lista con estos elementos:

<ListView.Items>
<ListViewItem>
<TextBlock xml:space="preserve"> 1 <Bold>I''m bold</Bold> </TextBlock>
</ListViewItem>
<ListViewItem>
<TextBlock xml:space="preserve"> 2 Im not </TextBlock>
</ListViewItem>
</ListView.Items>

Inicialmente al pasar el cursor sobre cada fila vi el resaltado del TextBlock en su color azul claro predeterminado. Solo subrayó el área con texto:

No quiero ese punto culminante, quiero el de toda la fila, y quiero decidir el color. También quiero resaltar toda la fila al seleccionar:

He estado jugando con Styles, Triggers o ItemContainerStyle. Me di cuenta de que tenía que considerar el fondo del Textbox y el del ListViewItem para el área con texto. Y el fondo de toda la fila parece ser un negocio de ListView.ItemContainerStyle.

El resultado de agregar un estilo para el TextBox:

 <Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
<ListView Grid.Column="1" Margin="0" HorizontalContentAlignment="Stretch" BorderThickness="0" >
<ListView.Resources>
<Style BasedOn="{StaticResource TextBlockStyle}" TargetType="{x:Type TextBlock}" />
</ListView.Resources>

es:

Luego agrego otro estilo para tratar de eliminar el fondo ListView en el TextBox:

 <Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gold" />
</Trigger>
</Style.Triggers>
</Style>
<ListView Grid.Column="1" Margin="0" HorizontalContentAlignment="Stretch" BorderThickness="0" >
<ListView.Resources>
<Style BasedOn="{StaticResource TextBlockStyle}" TargetType="{x:Type TextBlock}" />
<Style BasedOn="{StaticResource ListViewItemStyle}" TargetType="{x:Type ListViewItem}" />
</ListView.Resources>

Pero esto no tiene ningún efecto en absoluto.

Y tratar de resaltar toda la fila con esto no funciona:

<ItemsControl.ItemContainerStyle>
<Style>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="Control.Background" Value="Gold" />
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.ItemContainerStyle>

Y probé varias otras sugerencias durante horas. Éste: quitar el mouse sobre el efecto en un ListView en WPF evita resaltar sobre el texto en hover, tanto para TextBox como para ListViewItem, pero no sé cómo cambiar el fondo de toda la fila. ¿Podría alguien dar un ejemplo de lo que intento hacer?

Answer 1

Bueno, me rendí e intenté con otro camino. Me di cuenta de que al cambiar ListViewItems por botones, se resaltaba toda la fila al pasar el mouse. Estaba buscando esto no solo por razones estéticas. En la situación original, el usuario debe mover el puntero sobre el texto para seleccionarlo. Pero ahora pueden seleccionar solo tener el puntero en esa fila, no necesita ir y mover el mouse sobre el texto. Lo encuentro bastante más cómodo y rápido para el usuario, y eso es muy importante para el tipo de interfaz que estoy haciendo, ya que necesitarán hacerlo con bastante frecuencia.

Entonces, el código de @mathayk funciona para mí con Buttons en lugar de ListViewItems.

Gracias a todos por su tiempo.

Answer 2

La forma más fácil de ver y cambiar todas las opciones de estilo para un elemento dado es exportar la plantilla predeterminada para un control.

Por lo tanto, abra Visual Studio o Blend y haga clic con el botón derecho en la Vista de diseño en un control. Desplácese hacia ''Editar plantilla'' -> Y seleccione ''Editar una copia ...'' Salida:

 <SolidColorBrush x:Key="Item.MouseOver.Background" Color="Gold"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
<Style x:Key="ListViewContainerStyle" TargetType="{x:Type ListViewItem}">
<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="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 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>

Ahora tiene un buen punto de partida para personalizar su ItemContainerStyle.

Answer 3

Prueba esto:

 <ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gold" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>