从 ListViewItem 中移除高亮效果

Posted

技术标签:

【中文标题】从 ListViewItem 中移除高亮效果【英文标题】:Remove Highlight Effect from ListViewItem 【发布时间】:2013-05-04 20:38:43 【问题描述】:

ListView 中有ListviewItems,当鼠标悬停在它们上方或它们被选中时,它们不得改变外观。

我试图用这种风格来实现这一点,并且有点成功了:

<Style x:Key="ItemContainerStyle1" TargetType="ListViewItem">
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Focusable" Value="False" />
        </Trigger>
    </Style.Triggers>
</Style>

但它提出了一个新问题。当背景设置为“透明”时,当鼠标悬停在列表视图项上时,我现在可以看到如下图所示的悬停/光泽效果。

我曾尝试通过此尝试解决问题,但没有成功。

<Style TargetType="x:Type ListViewItem">
    <Style.Resources>
      <SolidColorBrush x:Key="x:Static SystemColors.HighlightBrushKey" Color="#00000000"/>
      <SolidColorBrush x:Key="x:Static SystemColors.ControlBrushKey" Color="#00000000"/>
    </Style.Resources>
</Style>

有人知道如何消除这种悬停效果吗?

【问题讨论】:

如果有人只需要控件列表(没有表格),请使用ItemsControl***.com/a/17853517/6131611 【参考方案1】:

我不知道这是否是唯一的解决方案,但我按如下方式进行(通过设置ListViewItems 的Template 属性):

<ListView.ItemContainerStyle>
    <Style TargetType="x:Type ListViewItem">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="x:Type ListViewItem">
                    <Border
                         BorderBrush="Transparent"
                         BorderThickness="0"
                         Background="TemplateBinding Background">
                        <GridViewRowPresenter HorizontalAlignment="Stretch" VerticalAlignment="TemplateBinding VerticalContentAlignment" Width="Auto" Margin="0" Content="TemplateBinding Content"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListView.ItemContainerStyle>

编辑:

或者正如格兰特温尼建议的那样(我自己没有测试过):

<ListView.ItemContainerStyle>
    <Style TargetType="x:Type ListViewItem">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="x:Type ListViewItem">
                    <ContentPresenter />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListView.ItemContainerStyle>

【讨论】:

谢谢,这解决了我的问题:) 用了两天!我想知道您是否知道一本好书或一些好的主页来获取有关样式的知识? 仅限 msdn、wpftutorial.net 和 Google,抱歉.. 也许其他人有想法。 我测试了@GrantWinney 的解决方案,效果很好。 总救生员@Matmarbon。我也使用了格兰特温尼的解决方案。最后,我需要一个 ListView 来包含窗口宽度中的项目,而 Scrollviewer 不适合 - 我不需要任何悬停/点击样式,所以非常感谢 +1 :) 最佳答案!第二个是最好的,第一个让我的整个组件消失了。【参考方案2】:

对我来说,效果很好,像这样:

<ListView.ItemContainerStyle>
  <Style TargetType="ListViewItem">
    <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
      </Trigger>
    </Style.Triggers>
  </Style>
</ListView.ItemContainerStyle> 

【讨论】:

【参考方案3】:

这项工作:

<Style TargetType="x:Type ListViewItem">  
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="x:Type ListViewItem">
            <Grid Background="TemplateBinding Background">
                <Border Name="Selection" Visibility="Collapsed" />
                <!-- This is used when GridView is put inside the ListView -->
                <GridViewRowPresenter Grid.RowSpan="2"
                                      Margin="TemplateBinding Padding"
                                      HorizontalAlignment="TemplateBinding HorizontalContentAlignment"
                                      VerticalAlignment="TemplateBinding VerticalContentAlignment"
                                      SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels"/>

            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

【讨论】:

这是您使用 GridView 时唯一有效的选项。谢谢!【参考方案4】:

没有问题,但这对我有用。

<Style TargetType="x:Type ListBoxItem">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="x:Type ListBoxItem">
                        <Border Name="Border" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="TemplateBinding Background">
                                <ContentPresenter Content="TemplateBinding Content" ContentTemplate="TemplateBinding ContentTemplate" Margin="TemplateBinding Padding" />
                            </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

【讨论】:

【参考方案5】:

我遇到了同样的问题,但没有一个答案对我有帮助。在网上搜索我找到了这个解决方案并且它有效:

        <ListView.Resources>
            <Style TargetType="x:Type ListViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="x:Type ListViewItem">
                            <GridViewRowPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.Resources>

【讨论】:

【参考方案6】:

试试这个对我有用的。

                        <Style TargetType="x:Type ListBoxItem">
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="x:Type ListBoxItem">
                                        <ContentPresenter HorizontalAlignment="Left" Margin="2,3,2,3" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>

【讨论】:

【参考方案7】:

这个答案与 Big Kev 的答案相似,但对于 GridView,它需要 GridViewRowPresenter 而不是 ContentPresenter

我最喜欢 Kev 的答案,因为它删除了默认的悬停突出显示,并且仍然使用 IsMouseOver 触发器控制样式,而其他答案没有。

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="x:Type ListViewItem">
            <Border Name="Border" BorderBrush="TemplateBinding BorderBrush" 
                                  BorderThickness="TemplateBinding BorderThickness" 
                                  Background="TemplateBinding Background">
                <GridViewRowPresenter Content="TemplateBinding Content"
                                      Margin="TemplateBinding Padding" />
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

【讨论】:

【参考方案8】:

我刚刚在 ControlTemplate 触发器中添加了代码:

<Trigger Property="IsMouseOver" Value="True">
     <Setter Property="Background" Value="Transparent"/>
     <Setter Property="Foreground" Value="DynamicResource White_200"/>
</Trigger>

这是 ListViewItem 模板样式的完整示例;

<ListView x:Name="ListViewMenu" ItemsSource="Binding Path=SubItems" 
                      Background="Transparent" Foreground="White" BorderThickness="0"
                      ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                      ScrollViewer.VerticalScrollBarVisibility="Disabled"
                      Height="210">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="Foreground" Value="#808182" />
                        <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>
                                        <Trigger Property="IsSelected" Value="true">
                                            <Setter Property="Background" TargetName="Bd" Value="DynamicResource x:Static SystemColors.HighlightBrushKey"/>
                                            <Setter Property="Foreground" Value="DynamicResource x:Static SystemColors.HighlightTextBrushKey"/>
                                        </Trigger>
                                        <MultiTrigger>
                                            <MultiTrigger.Conditions>
                                                <Condition Property="IsSelected" Value="true"/>
                                                <Condition Property="Selector.IsSelectionActive" Value="false"/>
                                            </MultiTrigger.Conditions>
                                            <Setter Property="Background" TargetName="Bd" Value="DynamicResource x:Static SystemColors.InactiveSelectionHighlightBrushKey"/>
                                            <Setter Property="Foreground" Value="DynamicResource x:Static SystemColors.InactiveSelectionHighlightTextBrushKey"/>
                                        </MultiTrigger>
                                        <Trigger Property="IsEnabled" Value="false">
                                            <Setter Property="Foreground" Value="DynamicResource x:Static SystemColors.GrayTextBrushKey"/>
                                        </Trigger>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Background" Value="Transparent"/>
                                            <Setter Property="Foreground" Value="DynamicResource White_200"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="Binding Path=Name" Padding="20 5" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

【讨论】:

以上是关于从 ListViewItem 中移除高亮效果的主要内容,如果未能解决你的问题,请参考以下文章

从 Apple Watch 上的 HealthKit 中移除水样

从 Apple Watch 上的 HealthKit 中移除水样

从子类中移除一个动作

从二维平衡 KD-Tree 中移除元素

如何在Angular Material Datepicker中从今天的日期中移除焦点?

从 QSplitter 中移除 QWidget(使用隐藏与显示,切换十分方便,不要真正销毁)