Help with possible bug in TabViewItem setting AvaloniaEdit editor as Content

[maxijabase]

Hello guys, it's my first time attempting MVVM seriously and it's being great so far.

I'm using Avalonia 2.0.0-preview2 and all of the other packages as well as FluentAvalonia are also the latest preview release.
This also happened with the stable 0.10.18 version of Avalonia and FluentAvalonia

I've encountered this situation while trying to host TextEditors from AvaloniaEdit into TabViewItems... As you can see, when I grab a tab and move it around, the editor inside the TabViewItem breaks...

This does not happen if I set the content to be a string for example, it still shows correctly despite shuffling tabs around.
My code is https://github.com/maxijabase/Avalia
(adding document method: https://github.com/maxijabase/Avalia/blob/master/Avalia/ViewModels/EditorManagerViewModel.cs#L23-L33)
(code editor control: https://github.com/maxijabase/Avalia/blob/master/Avalia/Views/CodeEditorView.axaml)

Please let me know if my implementation is wrong, if you need more details or whatever, I'll happily assist and provide.

devenv_ZnuQV3jAYl.mp4

[amwx]

As someone who isn't an MVVM expert or "purist", I'm not the best person to offer MVVM advice, but looking at the code I see some issues.

First though, thanks for the video and repro.

Remember that MVVM is about separation of backend logic and the UI, which you seem to be mixing (which is fine, MVVM take a bit of getting used to). I'd recommend restructuring some things. Again, not a MVVM expert so there may be even better ways to do some of this, but this should at least get you on the right track and at least resolve your issue.

DocumentItem should really be a view model, since it's representation of a View (minor detail). It should be refactored to remove the CodeEditorView from it (that's a View). Instead AvaloniaEdit has the AvaloniaEdit.Document.TextDocumentClass that you can use instead. You can bind this TextDocument directly to the TextEditor

public class DocumentItem
{
    public string? Header { get; set; }

    public IconSource? IconSource { get; set; }

    public TextDocument Document { get; set; } // Do this instead

    public CodeEditorView? Content { get; set; } // Don't do this
    public bool Selected { get; set; }
}

In EditorManagerViewModel.AddEditor(), instead of creating a CodeEditorView, create the DocumentItem with a TextDocument instance and add that to the Documents collection

Documents.Add(new DocumentItem
{
    Document = new AvaloniaEdit.Document.TextDocument(),
   // other properties
});

I noticed you're also focusing the TextArea after this too. You'll have to find a different way to do that. Options include behaviors, using an event or property change notification on the TabView to detect when the tab is opened, or you can handle AttachedToVisualTree or Loaded on either your CodeEditorView class or the AvaloniaEdit TextEditor directly.

Finally, to make it work: in EditorManagerView change up the TabItemTemplate a little bit. Biggest thing we're doing is using the DocumentItem to as the DataContext to create a view via the ContentTemplate. So, we'll use {CompiledBinding } for the Content of the TabViewItem, which just binds to the current DataContext, which is a DocumentItem. Then we'll define the ContentTemplate to tell the UI how to represent that ViewModel. In this case, I'm just putting the TextEditor directly in there for simplicity, but you could still use your CodeEditorView class if you wanted. Then we bind the Document property of the TextEditor to the Document property on DocumentItem.

<ui:TabView.TabItemTemplate>
  <DataTemplate x:DataType="mod:DocumentItem">
<ui:TabViewItem Header="{CompiledBinding Header}"
				IconSource="{CompiledBinding IconSource}"
				IsSelected="{CompiledBinding Selected}"
				Content="{CompiledBinding }">
	<ui:TabViewItem.ContentTemplate>
		<DataTemplate DataType="mod:DocumentItem">
			<aedit:TextEditor Document="{CompiledBinding Document}" 
						Name="Editor"
						FontFamily="Cascadia Code,Consolas,Menlo,Monospace"
						Margin="30"
						Foreground="#D4D4D4"
						HorizontalScrollBarVisibility="Auto"
						VerticalScrollBarVisibility="Visible"
						FontWeight="Bold"
						FontSize="18" ShowLineNumbers="True" />
		</DataTemplate>
	</ui:TabViewItem.ContentTemplate>
</ui:TabViewItem>
  </DataTemplate>
</ui:TabView.TabItemTemplate>

After this, you should see that the issue you described after dragging the tab no longer happens. I hope this helps.

[maxijabase]

Thanks for the thorough response, you have no idea how helpful it is to me while trying to understand as much as possible.
From what you told me I can see stuff can get complex real quick... I hope it's just a matter of time until I manage to understand all of this.

Regarding the original bug, as you said it has been fixed 😁.

I have a question: if DocumentItem should be a ViewModel, to what view should it correspond? Do you suggest wrapping the entire TabViewItem with the icon, header and editor as a view to be used inside <ui:TabViewItem.ContentTemplate>?