question

EJ-5254 avatar image
0 Votes"
EJ-5254 asked JessieZhang-2116 edited

Email composer similar to Gmail/Outlook?

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.

103948-image.png

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

103930-image.png

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!

dotnet-xamarin
image.png (73.0 KiB)
image.png (57.5 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered JessieZhang-2116 edited

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.




· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Jessie,

Thank you, but it doesn't behave like Gmail/Outlook app at all. The size of WebView becomes bigger than screen, also when I type it doesn't auto scroll Image and Labels above the WebView. I wish it was this simple :(

0 Votes 0 ·

I have updated my answer. You can check the updated part at the bottom of my reply.

0 Votes 0 ·