CODEWITHSUNDEEP
xamarinxamarin.iosxamarin.androidxamarin.forms
Kcs computer
Kcs computer

Reputation: 121

How to make Round corner Entry Control Xamarin.Forms

I have to use round corner entry in Xamarin.Forms, but I have not get any solution for this.

Xarin.Forms Entry Control in Windows Phone

I am trying to get this look and feel:

I want like this

Please help me with this issue.

Upvotes: 2

Views: 12447

Answers (3)

Le Mot Juiced
Le Mot Juiced

Reputation: 3851

I'm not sure if there's something wrong with this approach or not, because it seems so simple but no one's suggesting it.

But I don't see why you can't just use a Frame with IsClippedToBounds set to true. That gives you a built-in corner radius, which you can then adjust as needed.

        <Grid>               
             <Frame
                   Padding = "0"
                   CornerRadius     ="20"
                   IsClippedToBounds="true">
                <Editor [...whatever...]/>
            </Frame>
         </Grid>

I'm currently using this solution and it works for me.

Upvotes: 13

Kriszti&#225;n Jank&#243;
Kriszti&#225;n Jank&#243;

Reputation: 13

kyurkchyan's solution is bang on, just change the UpdateBackground method in the Android entryRendere to this:

private void UpdateBackground(XEntry xEntry)
    {
        if (_renderer != null)
        {
            _renderer.Dispose();
            _renderer = null;
        }
        var oldBg = xEntry.BackgroundColor;
        xEntry.BackgroundColor = Xamarin.Forms.Color.Transparent;
        _renderer = new BorderRenderer();
        Control.SetBackground(_renderer.GetBorderBackground(xEntry.BorderColor, oldBg, xEntry.BorderWidth, xEntry.BorderRadius));

    }

and it will work on Android as well!

Upvotes: 0

kyurkchyan
kyurkchyan

Reputation: 2428

I had exact same requirement and decided to create custom control called EntryEx. You can find the source code HERE.

Here is the list of functions that this control supports.

  1. Setting border color
  2. Setting border width
  3. Setting corner radius
  4. You can also set left and right paddings to inset content of entry from left and right.

I've created custom renderers for iOS and Android to support this properties. To use the control just do the following.

  1. Add EntryEx to your forms project.
  2. Added EntryExRenderer-s for iOS and Android to corresponding projects.
  3. For android you'll also need to add BorderRenderer.
  4. Adjust namespaces.

That's all. Enjoy.

Upvotes: 7

Related Questions