You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

AvaloniaUI中如何移除ListBox的鼠标悬停效果?

解决AvaloniaUI中ListBoxItem鼠标悬停效果无法移除的问题

你的问题出在Avalonia默认的ListBoxItem模板结构上——鼠标悬停的背景样式是定义在模板内部的Border元素上,而非直接作用于ListBoxItem本身的Background属性,所以直接设置ListBoxItem:pointerover的Background不会生效。

下面提供两种可行的解决方案:

方案1:通过模板选择器精准修改内部元素样式

使用Avalonia的/template/选择器访问ListBoxItem模板内的背景Border,直接覆盖其悬停状态的背景色:

<ListBox SelectionMode="Multiple" x:Name="FileList" ItemsSource="{Binding FileInfoModels}" Tapped="FileList_OnTapped" DoubleTapped="FileList_OnDoubleTapped">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding FileName}"></TextBlock>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.Styles>
        <!-- 选中ListBoxItem模板内的BackgroundElement Border,移除悬停背景 -->
        <Style Selector="ListBoxItem:pointerover /template/ Border#BackgroundElement">
            <Setter Property="Background" Value="Transparent"/>
        </Style>
        <!-- 可选:同时移除选中状态的悬停背景(如果需要) -->
        <Style Selector="ListBoxItem:pointerover:selected /template/ Border#BackgroundElement">
            <Setter Property="Background" Value="Transparent"/>
        </Style>
    </ListBox.Styles>
</ListBox>

方案2:自定义ListBoxItem的ControlTemplate

完全重写ListBoxItem的模板,去掉所有默认的状态样式,彻底消除悬停效果:

<ListBox SelectionMode="Multiple" x:Name="FileList" ItemsSource="{Binding FileInfoModels}" Tapped="FileList_OnTapped" DoubleTapped="FileList_OnDoubleTapped">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding FileName}"></TextBlock>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.Styles>
        <Style Selector="ListBoxItem">
            <Setter Property="Template">
                <ControlTemplate>
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}">
                        <ContentPresenter Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter>
            <!-- 可选:设置选中状态的背景为透明 -->
            <Style Selector="ListBoxItem:selected">
                <Setter Property="Background" Value="Transparent"/>
            </Style>
        </Style>
    </ListBox.Styles>
</ListBox>

两种方案都能有效移除鼠标悬停效果,你可以根据需求选择:方案1更轻量,仅修改悬停状态;方案2更灵活,可完全自定义Item的外观。

内容的提问来源于stack exchange,提问作者Evgeny Kharetski

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.09 06:40:19