better

Author: beto-rodriguez

samples/Views/Playlist.cs

@@ -17,7 +17,7 @@ public override View GetView()
         {
             Content = new VerticalStackLayout()
             {
-                new PlaylistTransitionView().Ref(out _transitionView),
+                UseAsTransition(new PlaylistTransitionView()),
 
                 new VerticalStackLayout()
                 {

samples/Views/PlaylistCollection.cs

@@ -7,9 +7,6 @@ namespace Sample.Views;
 
 public class PlaylistCollection(DataAccessLayer dal) : FluidView
 {
-    private PlaylistTransitionView? _activeUserView;
-    private CollectionView _collectionView = new();
-
     public override View GetView()
     {
         // the footer is a hack to get the CollectionView to scroll to the top always
@@ -28,36 +25,12 @@ public override View GetView()
                     VerticalItemSpacing = 10
                 }
         }
-        .Ref(out _collectionView)
         .ItemsSource(dal.Users)
-        .ItemTemplate(new DataTemplate(() =>
-        {
-            var transitionView = new PlaylistTransitionView();
-
-            transitionView._downloadButton.IsVisible = false;
-            transitionView._moreButton.IsVisible = false;
-
-            _ = transitionView
-                .OnTapped(p =>
-                {
-                    _activeUserView = transitionView;
-                    FlowNavigation.Current.GetView<Playlist>().TransitionView.TransitionBounds = new(
-                        p.X, p.Y, transitionView.Content.Width, transitionView.Content.Height);
-                    transitionView.Opacity = 0;
-
-                    var user = (PlaylistVM)transitionView.BindingContext;
-                    _ = FlowNavigation.Current.GoTo<Playlist>($"id={user.Id}");
-                })
-                .FlowToResult<PlaylistCollection>();
-
-            return transitionView;
-        }));
-    }
-
-    public override void OnEntering()
-    {
-        if (_activeUserView is null) return;
-        //_activeUserView.Opacity = 1;
-        //_ = await _activeUserView.Flow<PlaylistCollection>();
+        .ItemTemplate(
+            TransitionView.Navigate<PlaylistCollection, Playlist, PlaylistTransitionView>(item =>
+            {
+                var user = (PlaylistVM)item;    // <- the item source
+                return $"id={user.Id}";         // <- the route params
+            }));
     }
 }

src/FluidView.cs

@@ -2,16 +2,20 @@
 
 public abstract class FluidView : ContentView
 {
-    protected TransitionView _transitionView = null!;
-
     public FluidView()
     {
         Content = GetView();
     }
 
-    public TransitionView TransitionView => _transitionView;
+    public TransitionView? TransitionView { get; private set; }
 
     public abstract View GetView();
     public virtual void OnEntering() { }
     public virtual void OnLeaving() { }
+
+    public T UseAsTransition<T>(T view) where T : TransitionView
+    {
+        TransitionView = view;
+        return view;
+    }
 }

src/TransitionView.cs

@@ -37,4 +37,43 @@ public Task<bool> Flow(Type type)
     {
         return this.Flow(_flows[type]);
     }
+
+    /// <summary>
+    /// Gets a template that animates the transition between two views.
+    /// </summary>
+    /// <typeparam name="TFromView">The type of the view that starts the navigation.</typeparam>
+    /// <typeparam name="TToView">The type of the view where the navigation ends.</typeparam>
+    /// <typeparam name="TTransitionView">The type of the transition view.</typeparam>
+    /// <returns>The data template.</returns>
+    public static DataTemplate Navigate<TFromView, TToView, TTransitionView>(
+        Func<object, string>? routeParamsBuilder = null)
+            where TTransitionView : TransitionView, new()
+            where TFromView : FluidView
+            where TToView : FluidView
+    {
+        return new DataTemplate(() =>
+        {
+            var transitionView = new TTransitionView();
+
+            _ = transitionView
+                .OnTapped(p =>
+                {
+                    var tv = FlowNavigation.Current.GetView<TToView>().TransitionView;
+
+                    if (tv is not null)
+                    {
+                        tv.TransitionBounds = new(
+                            p.X,
+                            p.Y,
+                            transitionView.Content.Width,
+                            transitionView.Content.Height);
+                    }
+
+                    _ = FlowNavigation.Current.GoTo<TToView>(routeParamsBuilder?.Invoke(transitionView.BindingContext));
+                })
+                .FlowToResult<TFromView>();
+
+            return transitionView;
+        });
+    }
 }