Xamarin.Form中使用自定义Entry输入框(只有Android)

首先看xamarin.form项目结构
在这里插入图片描述

第一步:在xamarin.form中添加BorderlessEntry类 这个类继承自Xamarin.Forms.Entry来移除Android平台中Entry控件的边界。.

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
using Xamarin.Forms.Internals;

namespace JHXSP.Controls
{
    /// <summary>
    /// 这个类继承自Xamarin.Forms.Entry来移除Android平台中Entry控件的边界。.
    /// </summary>
    [Preserve(AllMembers = true)]
    public class BorderlessEntry : Entry
    {

    }
}

第二步:在xamarin.android 项目中创建Renderers文件夹下的BorderlessEntryRenderer.cs类

using Android.Graphics;
using Android.Graphics.Drawables;
using Android.Views;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(JHXSP.Controls.BorderlessEntry), typeof(JHXSP.Droid.Renderers.BorderlessEntryRenderer))]

namespace JHXSP.Droid.Renderers
{
    public class BorderlessEntryRenderer: EntryRenderer
    {
        private Paint mPaint;
        public BorderlessEntryRenderer() : base(Android.App.Application.Context)
        {
            
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            //mPaint = new Paint();
            //this.Control.SetBackground(null);
            GradientDrawable gd = new GradientDrawable(); //创建GradientDrawable对象
            Control.Gravity = GravityFlags.CenterVertical;
            Control.SetPadding(10, 10, 10, 10); //设置内边距
            gd.SetCornerRadius(5); //边框圆角
            gd.SetStroke(2, Android.Graphics.Color.LightGray);//边框宽度和边框颜色
            Control.SetBackgroundDrawable(gd); //将配置设置到Form中的对应类
        }

    }
}

关于GradientDrawable类,找到一篇很好的文章GradientDrawable的详解

第三步:在xaml页面进行使用

  1. 引入xmlns:control=“clr-namespace:JHXSP.Controls” (只针对于本项目,注意项目名字及文件夹名字)
  2. 标签的使用 : control:BorderlessEntry</control:BorderlessEntry>
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:control="clr-namespace:JHXSP.Controls" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:JHXSP.ViewModels"
             x:Class="JHXSP.Views.Setting">
    <ContentPage.BindingContext>
        <local:SettingViewModels/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <StackLayout>
            <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
                <Label Text="刘毅鹏平板demo" HorizontalTextAlignment="left" TextColor="White" FontSize="36"/>
            </Frame>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                    <FlexLayout  VerticalOptions="Center" HeightRequest="60" HorizontalOptions="Center" Grid.Row="0" Grid.Column="1" JustifyContent="SpaceEvenly" AlignItems="Center">
                        <Label Text="IP地址:" Padding="10,10,10,10" ></Label>
                        <control:BorderlessEntry Text="{Binding IPAddress}" TextColor="Black" WidthRequest="200" FontSize="16" PlaceholderColor="LightGray" Placeholder="请输入IP地址"></control:BorderlessEntry>
                    </FlexLayout>
                <FlexLayout  Grid.Row="1"  HeightRequest="60" HorizontalOptions="Center"  Grid.Column="1" JustifyContent="SpaceEvenly" AlignItems="Center">
                    <Label Text="端口:" Padding="10,10,10,10" ></Label>
                    <control:BorderlessEntry Text="{Binding Port}" TextColor="Black" WidthRequest="200"  FontSize="16" PlaceholderColor="LightGray" Placeholder="请输入端口"></control:BorderlessEntry>
                </FlexLayout>
                <Button Grid.Row="2"
                        Grid.Column="1"
                        Grid.ColumnSpan="1"
                        Margin="0,50,0,0" 
                        BorderWidth="1" 
                        TextColor="White" 
                        HeightRequest="50"  
                        Text="设置" 
                        BackgroundColor="#2296F3"
                        Command="{Binding SettingCommand}"
                        />

            </Grid>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

第四步:实现效果

![页面仅供参考](https://img-blog.csdnimg.cn/20210720091847579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTM2NTI3,size_16,color_FFFFFF,t_70
目的:自定义android输入框,样式可通过BorderlessEntryRenderer进行自定义修改

如有问题,私信交流,共勉

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

与诸君共勉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值