AvaloniaUI/Avalonia

Icons cropped (after update from 11.2.2 to 11.2.3)

Opened this issue · 6 comments

Describe the bug

Soon after updating to the latest Avalonia release, I noticed all icons were cropped on their right side, when included in various container (NavigationViewItem, SettingsExpander, MenuFlyoutItem, ...)

I'm using FluentAvalonia as well, which could also be the cause.
I've included a small sample project (with a navigation view). You can simply switch between Avalonia 11.2.2 and 11.2.3 to see the difference.

Avalonia 11.2.2:
before

Avalonia 11.2.3:
after

Other examples:
after_2
test

To Reproduce

Simply create any of the aforementioned containers (NavigationViewItem, SettingsExpander, MenuFlyoutItem) and include an icon in it. Switching from 11.2.2 to 11.2.3 will (if the icon is wide enough) crop it.

Expected behavior

I would expect the icon to stay fully visible.

Avalonia version

11.2.3

OS

Windows

Additional context

Here's a small sample project:
TestApp.zip

Can confirm -- this is a serious issue that unfortunately makes the current version of Avalonia unusable.

I don't think it's an issue with FluentAvalonia. The FontIcon rendering and custom FluentAvalonia font haven't changed in some time. The changes to the font metric calculations in Avalonia were made before 11.2.3 as well so again, likely not the FluentAvalonia font.

Also, this is likely a duplicate of #17795

I am seeing cropping vertically also.

I can't reproduce the issue with some pure building blocks

<DockPanel LastChildFill="False">
    <TextBlock
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    FontFamily="Segoe MDL2 Assets"
    Foreground="Black"
    FontSize="44"
    Background="Magenta"
    Text="&#xE70D;"/>
  <TextBlock
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    FontFamily="Segoe MDL2 Assets"
    Foreground="Black"
    FontSize="44"
    Background="Magenta"
    Text="&#xE70D;"/>
  <TextBlock
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    FontFamily="Segoe MDL2 Assets"
    Foreground="Black"
    FontSize="44"
    Background="Magenta"
    Text="&#xE70D;"/>  <TextBlock
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    FontFamily="Segoe MDL2 Assets"
    Foreground="Black"
    FontSize="44"
    Background="Magenta"
    Text="&#xE70D;"/>
</DockPanel>

Screenshot 2024-12-21 122515

Provide me a sample that uses a TextBlock and is not limiting the TextBlock's size I can have a deeper look. At the moment all provided samples limit the TextBlock's with so the text is clipped.

The linked issue has a sample that is limiting the TextBlock to a max width of 12 but in the TextBlock needs at least a width of 16

The bug can be consistently reproduced on the TreeView.

<TreeView>
        <TreeViewItem Header="Test">
            <TreeViewItem Header="Test2" />
        </TreeViewItem>
</TreeView>

image
image

@Gillibald This might be related to paths here. However, in the other issue it surely is a problem with font-based icons so I'm still thinking it's text formatting related.

The other issue is this path was always 12px by 12px. It's been that way for a long time. So why would the rendering of the path only now be too wide?

You can say the issue is because of the width constraint but there certainly is more to the story. We need to know why it's happening now. It's also may be an issue with the starting position / margins of the rendering.