Email composer similar to Gmail/Outlook?

Question

Been struggling with this for a couple of weeks now, still no idea how to achieve same functionality as in Gmail/Outlook apps.

This is example how Outlook app works (Gmail is similar). It has 'To', 'Subject' and email editor - could be WebView or RichTextEditor etc.

Now when you type few lines and text can't fit it scrolls up whole thing e.g. To and Subject:

How can one achieve this with Xamarin Forms? I have few ideas, but couldn't make any of them work.
I think XAML could be something like this:

<ScrollView>  
     <StackLauout>  
         <Editor Label="To"/>  
         <Editor Label="Subject"/>  
         <ctrl:HybridWebView x:Name="webView">  
             <WebView.Source>  
                 <HtmlWebViewSource Html="{Binding Html}"/>  
             </WebView.Source>  
         </ctrl:HybridWebView>  
     </StackLayout>  
 </ScrollView>  

Scenario 1. Add 'To' and 'Subject' controls inside WebView.ScrollView - this would be the easiest approach, just don't know how, as ScrollView is not exposed in WebView and don't know if possible to add views into WebView renderer?

Scenario 2. Make WebView height auto resized based on contents and disable WebView scrolling so external ScrollView would scroll, but how can I recalculate WebView height when user types something?

If I would develop separate native apps for iOS and Android it would be simplier as I would be able to add views to WebView.ScrollView on both platforms.

Thanks in advance for any help!

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

You can refer to the following code:

 <?xml version="1.0" encoding="UTF-8"?>  
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinTest.View.WebViewDemo">  
        <ContentPage.Content>  
            <ScrollView>  
                <StackLayout BackgroundColor="White" Padding="1" VerticalOptions="FillAndExpand">  
                    <Image HeightRequest="150" Aspect="AspectFill" Source="home" />  
                    <Label Text="Header"  FontSize="20" />  
                    <Label Text="Subheader"   FontSize="12" />  
                        <WebView  Source="http://www.google.com"   x:Name="WebViewer"  BackgroundColor="White">  
                        </WebView>  
                    <Label Text="Comments" FontSize="12" />  
                </StackLayout>  
            </ScrollView>  
        </ContentPage.Content>  
    </ContentPage>  

xaml.cs code

public partial class WebViewDemo : ContentPage  
{  
    public WebViewDemo()  
    {  
        InitializeComponent();  
    }  
    protected override void OnAppearing()  
    {  
        base.OnAppearing();  

    }  

    protected override void OnSizeAllocated(double width, double height)  
    {  
        base.OnSizeAllocated(width, height);  
        WebViewer.HeightRequest = height;  
        WebViewer.WidthRequest = width;  

    }  
}  

Update:

If you want to enable scrolling for a WebView inside a ScrollView, you can use Custom Renderers to achieve this function.

In android, you can refer to the following code:

[assembly: ExportRenderer(typeof(WebView), typeof(ScrollableWebViewRendererAndroid))]  
namespace Droid.CustomRenderers  
{  
  
    public class ScrollableWebViewRendererAndroid : WebViewRenderer  
    {  
  
        public ScrollableWebViewRendererAndroid()  
        {  
            System.Diagnostics.Debug.WriteLine("ScrollableWebViewRendererAndroid()");  
        }  
  
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)  
        {  
            base.OnElementChanged(e);  
  
            if (e.OldElement != null)  
            {  
                Control.Touch -= Control_Touch;  
            }  
  
            if (e.NewElement != null)  
            {  
                Control.Touch += Control_Touch;  
            }  
        }  
  
        void Control_Touch(object sender, Android.Views.View.TouchEventArgs e)  
        {  
            // Executing this will prevent the Scrolling to be intercepted by parent views  
            switch (e.Event.Action)  
            {  
                case MotionEventActions.Down:  
                    Control.Parent.RequestDisallowInterceptTouchEvent(true);  
                    break;  
                case MotionEventActions.Up:  
                    Control.Parent.RequestDisallowInterceptTouchEvent(false);  
                    break;  
            }  
            // Calling this will allow the scrolling event to be executed in the WebView  
            Control.OnTouchEvent(e.Event);  
        }  
    }  
}  

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.