Workaround for TopAppBar with animation on iOS

Author: AgustinBonilla

samples/HorusStudio.Maui.MaterialDesignControls.Sample/Pages/TopAppBarPage.xaml

@@ -10,18 +10,24 @@
     x:TypeArguments="vm:TopAppBarViewModel"
     x:DataType="vm:TopAppBarViewModel"
     BackgroundColor="{AppThemeBinding Light={x:Static material:MaterialLightTheme.Surface}, Dark={x:Static material:MaterialDarkTheme.Surface}}">
-    <views:ControlPageWithTopAppBar>
+    <views:ControlPageWithTopAppBar
+        AnimateScrollView="True">
         <views:ControlPageWithTopAppBar.PageContent>
             <VerticalStackLayout Spacing="8">
 
                 <material:MaterialCard
                     Style="{StaticResource CardControlContainer}"
                     Padding="24"
                     Margin="0,24,0,0">
-                    <material:MaterialLabel
-                        Text="The MaterialTopAppBar above uses the ScrollViewName to bind the control to a ScrollView and run an animation when scrolling down."
-                        HorizontalOptions="Center"
-                        VerticalOptions="Center" />
+                    <VerticalStackLayout
+                        Spacing="16">
+                        <material:MaterialLabel
+                            Text="Top app bars display navigation, actions, and text at the top of a screen."
+                            Type="TitleMedium" />
+                        <material:MaterialLabel
+                            Text="The MaterialTopAppBar above uses the ScrollViewName to bind the control to a ScrollView and run an animation when scrolling down."
+                            Type="BodyMedium" />
+                    </VerticalStackLayout>
                 </material:MaterialCard>
 
                 <material:MaterialLabel Style="{StaticResource SectionTitle}" Text="CenterAligned" />

samples/HorusStudio.Maui.MaterialDesignControls.Sample/ViewModels/TopAppBarViewModel.cs

@@ -23,8 +23,6 @@ public partial class TopAppBarViewModel : BaseViewModel
 
         public TopAppBarViewModel()
         {
-            Subtitle = "Top app bars display navigation, actions, and text at the top of a screen.";
-
             ChangeTrailingIcons();
         }
 

samples/HorusStudio.Maui.MaterialDesignControls.Sample/Views/ControlPageWithTopAppBar.xaml

@@ -9,14 +9,14 @@
     <Grid
         RowDefinitions="Auto,*">
         <material:MaterialTopAppBar
+            x:Name="topAppBar"
             AutomationId="topAppBar"
             Headline="{Binding Title}"
             Description="{Binding Subtitle}"
             LeadingIconCommand="{Binding GoBackCommand}"
             LeadingIconIsBusy="{Binding Path=GoBackCommand.IsRunning}"
             LeadingIcon="ic_back.png"
             Type="Large"
-            ScrollViewName="MdcControlPageScroll"
             TrailingIcons="{Binding ContextualActions}" />
         <ScrollView
             Grid.Row="1"

samples/HorusStudio.Maui.MaterialDesignControls.Sample/Views/ControlPageWithTopAppBar.xaml.cs

@@ -16,12 +16,26 @@ public partial class ControlPageWithTopAppBar : ContentView
         }
     });
 
+    public static readonly BindableProperty AnimateScrollViewProperty = BindableProperty.Create(nameof(AnimateScrollView), typeof(bool), typeof(ControlPageWithTopAppBar), false, propertyChanged: (bindable, _, newValue) =>
+    {
+        if (bindable is ControlPageWithTopAppBar self && newValue is bool animateScrollView)
+        {
+            self.topAppBar.ScrollViewName = animateScrollView ? "MdcControlPageScroll" : null;
+        }
+    });
+    
     public View? PageContent
     {
         get => (View?)GetValue(PageContentProperty);
         set => SetValue(PageContentProperty, value);
     }
 
+    public bool AnimateScrollView
+    {
+        get => (bool)GetValue(AnimateScrollViewProperty);
+        set => SetValue(AnimateScrollViewProperty, value);
+    }
+    
     public ControlPageWithTopAppBar()
     {
         InitializeComponent();

src/HorusStudio.Maui.MaterialDesignControls/Controls/TopAppBar/MaterialTopAppBar.cs

@@ -58,6 +58,7 @@ public enum MaterialTopAppBarType
     /// </example>
     /// <todoList>
     /// * [iOS] The scroll animation has lag by the headline size change
+    /// * [iOS] When using <c>ScrollViewName</c> for collapse/expand animation and setting a <c>Description</c> that wraps to more than one line, layout issues may occur. It is recommended to set <see cref="DescriptionLineBreakMode">DescriptionLineBreakMode</see> to <see cref="LineBreakMode.TailTruncation">LineBreakMode.TailTruncation</see> in this scenario.
     /// </todoList>
     public class MaterialTopAppBar : Grid
     {
@@ -76,6 +77,7 @@ public class MaterialTopAppBar : Grid
         private static readonly BindableProperty.CreateDefaultValueDelegate DefaultDescriptionFontFamily = _ => MaterialFontFamily.Default;
         private const FontAttributes DefaultDescriptionFontAttributes = FontAttributes.None;
         private static readonly Thickness DefaultDescriptionMarginAdjustment = new(DescriptionLateralMargin, 8, DescriptionLateralMargin, 16);
+        private static readonly LineBreakMode DefaultDescriptionLineBreakMode = LineBreakMode.WordWrap;
         private static readonly BindableProperty.CreateDefaultValueDelegate DefaultIconTintColorColor = _ => new AppThemeBindingExtension { Light = MaterialLightTheme.OnSurfaceVariant, Dark = MaterialDarkTheme.OnSurfaceVariant };
         private static readonly ImageSource? DefaultLeadingIcon = null;
         private static readonly ICommand? DefaultLeadingIconCommand = null;
@@ -183,6 +185,11 @@ public class MaterialTopAppBar : Grid
         /// The backing store for the <see cref="DescriptionMarginAdjustment">DescriptionMarginAdjustment</see> bindable property.
         /// </summary>
         public static readonly BindableProperty DescriptionMarginAdjustmentProperty = BindableProperty.Create(nameof(DescriptionMarginAdjustment), typeof(Thickness), typeof(MaterialTopAppBar), defaultValue: DefaultDescriptionMarginAdjustment, BindingMode.OneTime);
+        
+        /// <summary>
+        /// The backing store for the <see cref="DescriptionLineBreakMode">DescriptionLineBreakMode</see> bindable property.
+        /// </summary>
+        public static readonly BindableProperty DescriptionLineBreakModeProperty = BindableProperty.Create(nameof(DescriptionLineBreakMode), typeof(LineBreakMode), typeof(MaterialTopAppBar), defaultValue: DefaultDescriptionLineBreakMode, defaultBindingMode: BindingMode.OneTime);
 
         /// <summary>
         /// The backing store for the <see cref="LeadingIcon">LeadingIcon</see> bindable property.
@@ -471,6 +478,19 @@ public Thickness DescriptionMarginAdjustment
             get => (Thickness)GetValue(DescriptionMarginAdjustmentProperty);
             set => SetValue(DescriptionMarginAdjustmentProperty, value);
         }
+        
+        /// <summary>
+        /// Gets or sets the line break mode for the description text of this top app bar.
+        /// This is a bindable property.
+        /// </summary>
+        /// <default>
+        /// <see cref="LineBreakMode.WordWrap">LineBreakMode.WordWrap</see>
+        /// </default>
+        public LineBreakMode DescriptionLineBreakMode
+        {
+            get => (LineBreakMode)GetValue(DescriptionLineBreakModeProperty);
+            set => SetValue(DescriptionLineBreakModeProperty, value);
+        }
 
         /// <summary>
         /// Allows you to display an icon button on the left side of the top app bar. 
@@ -751,6 +771,7 @@ private void CreateLayout()
             _descriptionLabel.SetBinding(MaterialLabel.FontFamilyProperty, new Binding(nameof(DescriptionFontFamily), source: this));
             _descriptionLabel.SetBinding(MaterialLabel.FontAttributesProperty, new Binding(nameof(DescriptionFontAttributes), source: this));
             _descriptionLabel.SetBinding(MaterialLabel.MarginProperty, new Binding(nameof(DescriptionMarginAdjustment), source: this));
+            _descriptionLabel.SetBinding(MaterialLabel.LineBreakModeProperty, new Binding(nameof(DescriptionLineBreakMode), source: this));
             _descriptionLabel.SetBinding(MaterialLabel.AutomationIdProperty, new Binding(nameof(AutomationId), source: this, converter: new AutomationIdConverter(), converterParameter: "Description"));
             this.Add(_descriptionLabel, 0, 1);
             Grid.SetColumnSpan(_descriptionLabel, 3);