Search This Blog

Monday 18 April 2022

.Net MAUI BorderlessEntry With Done Button



Create BorderlessEntryWithDoneButton.cs Class in your MAUI Project

BorderlessEntryWithDoneButton.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace TGS_Event_App_MAUI.Renderers
{
    public class BorderLessEntryWithDoneButton : Entry  
    {
    }
}
 


Now Create Platform Specific Handler In App.xaml.cs File
using Microsoft.Maui;
using Microsoft.Maui.Handlers;
using Microsoft.Maui.Platform;
using TGS_Event_App_MAUI.Renderers;
 
namespace TGS_Event_App_MAUI;
 
public partial class App : Application
{
    public App()
    {
        InitializeComponent();
 
 
        Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(nameof(BorderlessEntryWithDoneButton), (handler, view) =>
        {
            if (view is BorderlessEntryWithDoneButton)
            {
#if __ANDROID__
                handler.PlatformView.SetBackgroundColor(Colors.Transparent.ToPlatform());
#elif __IOS__
                handler.PlatformView.BackgroundColor = Colors.Transparent.ToPlatform();
                handler.PlatformView.Layer.BackgroundColor = Colors.Transparent.ToCGColor();
                handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
 
 
                var toolbar = new UIKit.UIToolbar(new System.Drawing.RectangleF(0.0f, 0.0f, 50.0f, 44.0f));
                toolbar.BackgroundColor = UIKit.UIColor.LightGray;
 
                var doneButton = new UIKit.UIBarButtonItem(UIKit.UIBarButtonSystemItem.Done,delegate
                {
                    handler.PlatformView.ResignFirstResponder();
                });
 
                toolbar.Items = new UIKit.UIBarButtonItem[]{
                    new UIKit.UIBarButtonItem(UIKit.UIBarButtonSystemItem.FlexibleSpace),doneButton
                };
 
                handler.PlatformView.InputAccessoryView = toolbar;
#endif
            }
        });
 
        MainPage = new NavigationPage(new MainPage());
    }
}
 

Now Implement Render in Your Xaml Page.

MainPage.Xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:renderers="clr-namespace:TGS_Event_App_MAUI.Renderers"
             x:Class="TGS_Event_App_MAUI.MainPage">
 
    <VerticalStackLayout Spacing="20"  Padding="10,20,10,0" >
 
        <Label 
                Text="Entry With Done Button" 
                FontSize="32"
                HorizontalOptions="Center" />
 
        <renderers:BorderlessEntryWithDoneButton  FontSize="18"  Placeholder="Enter Text Here" Keyboard="Text"/>
        <Border Stroke="Gray" StrokeThickness="0.8" StrokeShape="Rectangle" />
    </VerticalStackLayout>
</ContentPage>
 
 




Wednesday 13 April 2022

Zommable ScrollView in Xamarin Forms

 Xamarin Form Project

Create the interface in your Xamarin Form Project.

ZoomableScrollView.cs
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
 
namespace TestApp.Renderer
{
    public class ZoomableScrollView : ScrollView
    {
    }
}
 

Now Create a Dependency Service in your Xamarin Android & Xamarin iOS Project.

Xamarin Android Project (ZoomableScrollViewRenderer.cs)

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Views.Animations;
using Android.Widget;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using TestApp.Droid.CustomRenderers;
using TestApp.Renderer;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using static Android.Views.ScaleGestureDetector;
 
[assembly: ExportRenderer(typeof(ZoomableScrollView), typeof(ZoomableScrollViewRenderer))]
namespace TestApp.Droid.CustomRenderers
{
    public class ZoomableScrollViewRenderer :  ScrollViewRenderer, IOnScaleGestureListener
    {
        private float mScale = 1f;
        private ScaleGestureDetector mScaleDetector;
        public ZoomableScrollViewRenderer(Context context) : base(context)
        {
 
        }
 
        public bool OnScale(ScaleGestureDetector detector)
        {
            float scale = 1 - detector.ScaleFactor;
 
            float prevScale = mScale;
            mScale += scale;
 
            if (mScale < 0.5f) // Minimum scale condition:
                mScale = 0.5f;
 
            if (mScale > 1f) // Maximum scale condition:
                mScale = 1f;
            ScaleAnimation scaleAnimation = new ScaleAnimation(1f / prevScale, 1f / mScale, 1f / prevScale, 1f / mScale, detector.FocusX, detector.FocusY);
            scaleAnimation.Duration = 0;
            scaleAnimation.FillAfter = true;
            StartAnimation(scaleAnimation);
            return true;
        }
 
        public override bool DispatchTouchEvent(MotionEvent e)
        {
            base.DispatchTouchEvent(e);
            return mScaleDetector.OnTouchEvent(e);
        }
 
        public bool OnScaleBegin(ScaleGestureDetector detector)
        {
            return true;
        }
 
        public void OnScaleEnd(ScaleGestureDetector detector)
        {
        }
 
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
 
            base.OnElementChanged(e);
            mScaleDetector = new ScaleGestureDetector(Context, this);
 
        }
    }
}


Xamarin iOS Project (ZoomableScrollViewRenderer.cs)

using Foundation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using TestApp.iOS.CustomRenderers;
using TestApp.Renderer;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
 
[assembly: ExportRenderer(typeof(ZoomableScrollView), typeof(ZoomableScrollViewRenderer))]
namespace TestApp.iOS.CustomRenderers
{
    public class ZoomableScrollViewRenderer : ScrollViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            MaximumZoomScale = 3f;
            MinimumZoomScale = 1.0f;
 
        }
        public override void LayoutSubviews()
        {
            base.LayoutSubviews();
 
            if (Subviews.Length > 0)
            {
                ViewForZoomingInScrollView += GetViewForZooming;
            }
            else
            {
                ViewForZoomingInScrollView -= GetViewForZooming;
            }
 
        }
        public UIView GetViewForZooming(UIScrollView sv)
        {
            return this.Subviews.FirstOrDefault();
        }
    }
}


How to Use (Xamarin Form Project)
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:renderer="clr-namespace:TestApp.Renderer"
             x:Class="TGS_Event_App.MainPage">
 
    <renderer:ZoomableScrollView >
        <StackLayout>
            <!-- Content -->
        </StackLayout>
    </renderer:ZoomableScrollView>
</ContentPage>
 

Popular Posts