Forum Xamarin

outlined text field

bhuwancb99bhuwancb99 Member ✭✭

how to create below text field using custom entry textbox for both android and Ios.

Answers

  • XamDevSTXamDevST Member ✭✭
    edited October 25

    @bhuwancb99
    Step 1:

    Create a Borderless Entry Control

    Step 2:

    Add a Control Template in App.xaml

    <ControlTemplate x:Key="OutlinedEntry">
                <RelativeLayout BindingContext="{Binding Source={RelativeSource TemplatedParent}}" Margin="0" Padding="0"
                                HeightRequest="{Binding ControlHeightRequest}" BackgroundColor="White">
                    <Frame CornerRadius="{Binding FrameCornerRadius}" BorderColor="{Binding OutlineColor}" Margin="0,5,0,0" Padding="0"
                           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=X,Factor=0}"
                           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Y,Factor=10}"
                           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1}"
                           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1}"
                           HasShadow="False">
                        <Entry Margin="10,5" Text="{Binding EntryText}" TextColor="{Binding EntryTextColor}" VerticalOptions="Center"/>
                    </Frame>
                    <Label TextColor="{Binding OutlineColor}" BackgroundColor="White" Margin="0,-5,0,0"
                           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=X,Factor=0,Constant=20}"
                           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Y,Factor=0}">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="| "/>
                                <Span Text="{Binding HeaderText}"/>
                                <Span Text=" |"/>
                                <!--
                                or just plain
                                <Span Text=" "/>
                                <Span Text="{Binding HeaderText}"/>
                                <Span Text=" "/>
    
                                This is not working for whatever reason
                                Text="{Binding HeaderText,StringFormat=' {0} '}"
                                -->
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </RelativeLayout>
            </ControlTemplate>
    

    Step 3:

    Add a control class

    public class CustomOutlineEntry : ContentView
        {
            public static readonly BindableProperty EntryTextColorProperty = BindableProperty.Create(nameof(EntryTextColor), typeof(Color), typeof(CustomOutlineEntry), Color.Brown);
            public static readonly BindableProperty OutlineColorProperty = BindableProperty.Create(nameof(OutlineColor), typeof(Color), typeof(CustomOutlineEntry), Color.Black);
            public static readonly BindableProperty EntryTextProperty = BindableProperty.Create(nameof(EntryText), typeof(string), typeof(CustomOutlineEntry), "Text");
            public static readonly BindableProperty HeaderTextProperty = BindableProperty.Create(nameof(HeaderText), typeof(string), typeof(CustomOutlineEntry), "Header");
            public static readonly BindableProperty ControlHeightRequestProperty = BindableProperty.Create(nameof(ControlHeightRequest), typeof(double), typeof(CustomOutlineEntry), 60.0);
            public static readonly BindableProperty FrameCornerRadiusProperty = BindableProperty.Create(nameof(FrameCornerRadius), typeof(float), typeof(CustomOutlineEntry),float.Parse("5"));
    
            public Color EntryTextColor
            {
                get => (Color)GetValue(EntryTextColorProperty);
                set => SetValue(EntryTextColorProperty, value);
            }
    
            public Color OutlineColor
            {
                get => (Color)GetValue(OutlineColorProperty);
                set => SetValue(OutlineColorProperty, value);
            }
    
            public string EntryText
            {
                get => (string)GetValue(EntryTextProperty);
                set => SetValue(EntryTextProperty, value);
            }
    
            public string HeaderText
            {
                get => (string)GetValue(HeaderTextProperty);
                set => SetValue(HeaderTextProperty, value);
            }
    
            public double ControlHeightRequest
            {
                get => (double)GetValue(ControlHeightRequestProperty);
                set => SetValue(ControlHeightRequestProperty, value);
            }
    
            public float FrameCornerRadius
            {
                get => (float)GetValue(FrameCornerRadiusProperty);
                set => SetValue(FrameCornerRadiusProperty, value);
            }
        }
    

    Use the control

    <local:CustomOutlineEntry  ControlTemplate="{StaticResource OutlinedEntry}" Margin="10"
     EntryTextColor="DeepPink" OutlineColor="Orange" EntryText="[email protected]" 
    HeaderText="E-mail" FrameCornerRadius="7" BackgroundColor="White"/>
    

Sign In or Register to comment.