-
Notifications
You must be signed in to change notification settings - Fork 87
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Flicker when switching between nested TabViews #465
Comments
I was able to get rid of the flicker by removing the I'm also testing on a much simpler case of just straight nested TabViews which should be the same thing, in principle: <ui:TabView VerticalAlignment="Stretch">
<ui:TabViewItem Header="Header1">
<ui:TabView VerticalAlignment="Stretch">
<ui:TabViewItem Header="SubHeader">
<Grid Background="DarkRed" />
</ui:TabViewItem>
</ui:TabView>
</ui:TabViewItem>
<ui:TabViewItem Header="Header2">
<ui:TabView>
<ui:TabViewItem Header="SubHeader2">
<Grid Background="DarkRed" />
</ui:TabViewItem>
</ui:TabView>
</ui:TabViewItem>
</ui:TabView> |
The When I was testing this, I noted that using a nested viewmodel like I have, rather than all in one xaml file like you have, made the flicker much more reproducible and apparent. I think the flicker may still be there with it all in one xaml file, however it only seems to happen on the first tab switch, after that it seems to go away. Which I guess suggests this may be something to do with view construction? |
I'd highly recommend not using the ViewLocator approach to templates. I thought that was supposed to be removed from the default Avalonia template. Fixing your MainWindow.axaml file like below, I no longer see the flickering: <Window.DataTemplates>
<DataTemplate DataType="vm:SubViewModel">
<views:SubView />
</DataTemplate>
</Window.DataTemplates>
<ui:TabView x:Name="MainTab" VerticalAlignment="Stretch">
<ui:TabViewItem Header="Header">
<vm:SubViewModel />
</ui:TabViewItem>
<ui:TabViewItem Header="Header">
<vm:SubViewModel />
</ui:TabViewItem>
</ui:TabView> |
Hm ok, using that approach does appear to fix the flicker, however I'm still getting odd behaviour when nesting TabViews. I've updated the linked repository to extend the testcase to show two more issues I'm hitting:
|
I've had more of a dig into this and I don't believe this has anything to do with nesting TabViews, it's more about the initial state of the TabView. When a TabView is created it is rendered before the DataContext applied to it has properly taken effect. This manifests itself it two ways: Upon creating a brand new TabView with a DataContext applied at time of construction, the tab content presenter is displayed empty before the real contents get applied, this is what is causing the flicker I reported. (The ViewLocator was not recycling views). When applying a different DataContext to an existing TabView, the TabListView seems to update late which results in visually being able to see TabListView contents changing, as well as the selected item logic breaking as it tries to update the selected item prior to the TabListView items changing. This is what I observe with the changes you suggested. (The DataTemplate does recycle views). I've updated the testcase at https://github.com/brads55/AvTest to better demonstrate what is going on. |
Describe the bug
When using a nest of TabViews, switching between the top level tabs causes the tab content being switched to to flicker, as though there is a blank frame before the child content is shown.
Desktop/Platform
Additional context
This only seems to happen if the tab content being shown at the top level is a view model rather than a direct view, and the sub view that represents this view model contains another TabView i.e.:
MainView:
SubView:
If the
MainView
TabViewItem content is another view, or theSubView
TabView is placed directly inMainView
, the issue doesn't seem to occur. I've created a very simple reproducer project here: https://github.com/brads55/AvTest.The text was updated successfully, but these errors were encountered: