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>
 
 




No comments:

Post a Comment

Popular Posts