2016-07-01 79 views
4

我需要一些帮助。我不明白为什么我找到的解决方案都不适合我的案例。让我们考虑一个ListView这些项目:在鼠标上更改ListViewItem背景色

<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> 

最初悬停的每一行,我看到TextBlock的亮点在其默认的淡蓝色。它只强调文字区域:

我不想那个高亮我想整个行中的一个,我想决定颜色。我也希望选择时整行的亮点: enter image description here

我一直在玩样式,触发器或ItemContainerStyle。我意识到我必须考虑文本框的背景以及带有文本的区域的ListViewItem。整行的背景似乎是ListView.ItemContainerStyle的业务。

添加样式FOT 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> 

是:enter image description here

然后,添加另一种风格,试图将文本框下摆脱ListView的背景:

<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> 

但是这完全没有效果。

,并试图以突出整个行与这不起作用:

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

并试图几个小时几个其他建议。这一个: Remove the mouse over effect on a ListView in WPF避免悬停的文本高亮,无论是为TextBox和ListViewItem,但我不知道如何改变整个行的背景。 有人可以提供我想要做的一个例子吗?

+0

更改DataTemplate中容器的背景。 – AnjumSKhan

回答

7

看到和更改所有样式选项给定元素的最简单的方法是导出的默认模板进行控制。

Therefore open Visual Studio or Blend and Right Click in the Design View on a control. Hover to 'Edit Template' -> And select 'Edit a Copy...' 输出:

 <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> 

现在你有一个很好的起点,让你的ItemContainerStyle定制。

+0

此代码遵循我提供的链接中解决方案的想法。这里的结果与初始情况相同,但具有定制的颜色。它会解决我的问题,如果我可以将ListViewItem宽度更改为整行相同。但是,如果我更改了Horizo​​ntalContentAlignment属性以获取值Stretch,而不是您的代码中提供,它不起作用。 –

8

试试这个:

 <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> 
+0

我试过这个,但是这只是用文字加下划线,而不是整行。 –

+1

'TargetType =“{x:Type ListViewItem}”'在这种情况下很重要。 – mechanic

+0

该方法不起作用,请参阅上面的@mathayk帖子。列表视图是更复杂的控制和更改背景只是无所事事。 – Brun

0

那么,我放弃了,并尝试了另一条路。我意识到改变按钮的ListViewItems,然后整个行在鼠标悬停时突出显示。我在寻找这不仅是出于美学原因。在原始情况下,用户必须将指针移动到文本上以选择它。但是现在他们可以选择只在该行中放置指针,您不需要将鼠标移动到文本上方。我发现它对用户来说更加舒适和快速,这对于我正在做的界面非常重要,因为他们需要频繁地进行操作。

因此,@mathayk的代码用Buttons代替ListViewItems。

感谢你们所有人的时间。