AutoCompleteBox.InnerLeftContent is not updating on view model changes

[daningalla]

I have an AutoCompleteBox whose data source is an underlying collection of model objects (bound from the view model). I'm trying to leverage the InnerLeftContent to display the icon associated with the value. For this I'm using a converter so the application knows how to resolve the associated SVG resource.

When I begin typing in the text box, the items appear as expected. If I navigate the items with the keyboard, the selection in the model changes, the value in the text box changes, the Image control I have outside of the AutoCompleteBox changes (proving the converter works), but the InnerLeftContent control does not update.

Here's a repo with a minimal reproduction of the behavior.

Am I binding the InnerLeftContent correctly? Notice that control renders once with the correct image, but never updates.

[rabbitism]

You can try to explicitly set BindingMode as TwoWay

[daningalla]

That did not do the trick. I simply don't understand why the SVG binding on the far right updates but the binding on the InnerLeftContent does not, it's the exact same code in the xaml...

[daningalla]

I just noticed something interesting, in dev tools when I inspect the Source property of the InnerLeftContent element, the image is being updated to the correct resource. It's just not redrawing on the screen. I wonder if this is a bug in Svg.Skia.

[rabbitism]

I tried your repo, pretty sure it's not about AutoCompleteBox.InnerLeftContent.

1. If you just put a textbox inside InnerLeftContent, it works well.
2. If you put the other Image somewhere before AutoCompleteBox, it is not working either.
3. If you check in devtools, the source of that inner content is already updated.

So need to take a look at how SVG works here.

[daningalla]

Thank you for looking!

[daningalla]

I could be completely off here due to hardly any knowledge of how the Avalonia architecture decides what needs to be redrawn, but given the visual tree:

<Image Width="12">
	<Image.Source>
		<SvgImage Source="{Binding Category, Converter={x:Static converters:UnitCategoryConverter.SvgSource}}" />
	</Image.Source>
</Image>

The SvgImage class OnPropertyChanged event listens for SourceProperty, but essentially does nothing except raise an event. The Image class reacts to Source changing...

AffectsRender<Image>(SourceProperty, StretchProperty, StretchDirectionProperty);

but that's not what is being changed, the underlying source of SvgImage is changing. Given what we see already SvgImage needs to notify Image that it needs to be redrawn.

[BAndysc]

Looks like you are right, SvgImage has even a comment here to invalidate IImage https://github.com/wieslawsoltes/Svg.Skia/blob/f987aafd8f78d5558e089cb9aea5552b6abd47ff/src/Avalonia.Svg/SvgImage.cs#L103
But it looks like IImage is not designed to be mutable:

Avalonia/src/Avalonia.Base/Media/IImage.cs

Line 8 in 3a1a69b

public interface IImage

What you should do then, is to bind the Category directly to Image.SourceProperty and modify the converter to return an instance of SvgImage with the new value set as the source in SvgImage.

[timunie]

tbh, if the icons are simple svg, I'd just use the PathData instead and use a PathIcon control.