amwx
commented
7 months ago Code was updated to WinUI 1.5, which featured several changes (as I expected). I was going to try to provide a demo for the item container animations, but after some changes for WinUI 1.5, that's going to be harder to do. The new LinedFlowLayout, which is what's in FileExplorer now will come at a later date. It turns out that layout is several thousand lines of code so that's gonna take some time. In addition, that layout features a transition/animation manager, but relies on Composition Animations APIs that Avalonia doesn't have yet - so I need to figure out how that's gonna work - especially since I have very little hope of Avalonia's composition system expanding anytime soon.
Preview of phased rendering. Note that this will be an experimental feature with no guarantees this will stay - it depends on how well it works. This really isn't needed in most cases anyway. One caveat off the bat, if you want phased rendering - ensure you keep your item sizes the same through each phase. Bad things tend to happen around scrolling if a later phase starts messing with the sizes (in the scrolling direction) and I'm not really sure how that can be fixed (this relates to virtualization estimating viewport sizes)
https://github.com/amwx/FluentAvalonia/assets/40413319/bc650d47-5210-4fd6-bd70-09079d2c9052
This example brute forces everything, you could easily load a custom data template by each phase or anything. Finding named controls, however, will require searching the tree. Phasing occurs after the element is prepared, so the tree should be ready. Code for this:
<ScrollViewer Margin="50">
<ui:ItemsRepeater Name="ItemsRepeater1">
<ui:ItemsRepeater.ItemTemplate>
<DataTemplate>
<Button Height="50">
</Button>
</DataTemplate>
</ui:ItemsRepeater.ItemTemplate>
</ui:ItemsRepeater>
</ScrollViewer>// Subscribe to ContainerContentChanging to initiate phased rendering
ItemsRepeater1.ContainerContentChanging += ItemsRepeater1ContainerContentChanging;
// Main callback - this is phase 0 - this should be fast and can be used for placeholders, etc.
private void ItemsRepeater1ContainerContentChanging(ItemsRepeater sender, ContainerContentChangingEventArgs args)
{
if (args.ItemContainer is Button b)
{
b.Content = "Loading...";
// Call RegisterUpdateCallback to tell the system to schedule another pass with this element for Phase 1
args.RegisterUpdateCallback(ShowFirstContent);
}
}
// Phase 1 Callback - this is called at some point in the future
private async void ShowFirstContent(ItemsRepeater sender, ContainerContentChangingEventArgs args)
{
if (args.ItemContainer is Button b)
{
await Task.Delay(500); // Simulate long running task
b.Content = args.Item;
// If you want another phase, call RegisterCallback to schedule it
args.RegisterUpdateCallback(ShowSecondContent);
}
}
// Second phase
private async void ShowSecondContent(ItemsRepeater sender, ContainerContentChangingEventArgs args)
{
if (args.ItemContainer is Button b)
{
await Task.Delay(500); // Simulate long running task
b.Content = new StackPanel
{
Orientation = Avalonia.Layout.Orientation.Horizontal,
Children =
{
new Rectangle
{
Fill = Brushes.Red,
Width = 10, Height = 10,
VerticalAlignment = Avalonia.Layout.VerticalAlignment.Center,
Margin = new Thickness(12)
},
new TextBlock
{
Text = args.Item?.ToString()
}
}
};
}
}
The PR adds the ItemsRepeater to FA. I started this last summer and finally have had a chance to try and get this in here. A couple reasons why I'm doing this:
This is NOT a move of the Avalonia version, this is entirely ported from the WinUI source. Since I started this last summer, this code may be out of date - one of my TODOs still is to check the source with the latest 1.5 release of WinUI post-open source, since they're using this in Explorer now, bugs may have been fixed or some stuff may have changed.
Some things to note:
ItemsSourceViewis a part of WinUI and began with the ItemsRepeater and creates a conflict. ItemsSourceView from WinUI has been renamedFAItemsSourceViewand is incompatible with the Avalonia version. If you reference theItemsRepeater.ItemsSourceViewproperty, it is the FA type, NOT the Avalonia version.New Features Added:
ContainerContentChangingevent callback method (so it's not doable in xaml).Once I have a chance to check the source, run some more tests, and look everything over, I'll try to get some videos here to show off the animator and the content phasing (which at least last time I tested, they worked)