Avalonia ListBox首次悬停ListBoxItem时文本偏移1像素求助

问题描述 #

使用Avalonia 11.0.2（.NET 7桌面应用），最简ListBox代码如下：

<ListBox x:Name="TheListBox" Grid.Column="4" Grid.Row="2" >
  <ListBoxItem Content="Item 1"/>
  <ListBoxItem Content="Item 2"/>
  <ListBoxItem Content="Item 3"/>
  <ListBoxItem Content="Item 4"/>
</ListBox>

列表首次渲染后，首次悬停约90%的Item时，会出现文本向左偏移1像素，但图片位置不变的异常（示例场景：悬停铁剑项后，所有文本左移）。

解决方案 #

1. 优先升级Avalonia版本

该偏移属于Avalonia 11早期版本的渲染布局bug，后续稳定版（如11.0.5及以上）已修复。直接升级框架版本是最彻底的解决方式。

2. 自定义ListBoxItem模板规避默认样式问题

若暂时无法升级，可通过自定义控件模板，固定文本容器的布局参数，避免默认悬停样式触发的布局偏移：

<ListBox x:Name="TheListBox" Grid.Column="4" Grid.Row="2">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border Padding="6" 
                    Background="{Binding $self.IsPointerOver, 
                                        Converter={StaticResource BooleanToBrushConverter}, 
                                        ConverterParameter='#EEEEEE'}"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Center">
                <StackPanel Orientation="Horizontal" Spacing="4">
                    <!-- 替换为你的图片控件 -->
                    <Image Source="{Binding Icon}" Width="24" Height="24"/>
                    <TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBoxItem Content="Item 1"/>
    <ListBoxItem Content="Item 2"/>
    <ListBoxItem Content="Item 3"/>
    <ListBoxItem Content="Item 4"/>
</ListBox>

注意确保TextBlock等文本容器没有继承默认样式中悬停时的隐形内边距或边框变化。

3. 启用像素对齐强制布局

通过设置UseLayoutRounding="True"让控件布局对齐到整像素，减少亚像素渲染导致的偏移：

<!-- 单个Item设置 -->
<ListBoxItem UseLayoutRounding="True" Content="Item 1"/>

<!-- 全局样式设置，作用于所有ListBoxItem -->
<Style Selector="ListBoxItem">
    <Setter Property="UseLayoutRounding" Value="True"/>
</Style>

4. 排查全局样式冲突

若应用中有自定义全局样式或资源（如默认边框、内边距值），可能与ListBoxItem的默认样式冲突。可在空白测试项目中复现问题，确认是否由全局样式导致。

内容的提问来源于stack exchange，提问作者Bradley Bergstrom