2

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.

Martin Evans
  • 45,791
  • 17
  • 81
  • 97
Kcs computer
  • 121
  • 1
  • 4
  • 13

3 Answers3

13

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.

Le Mot Juiced
  • 3,761
  • 1
  • 26
  • 46
  • What exactly IsClippedToBounds do? – GKG4 Jul 15 '19 at 06:17
  • 1
    This solution works but you need to set the padding of the frame to 0 too. – James Westgate Jul 25 '19 at 08:01
  • This is a great solution! – Sebek Nov 22 '19 at 09:49
  • @JamesWestgate, thanks for that, you're right. I've edited the post to reflect that. – Le Mot Juiced Dec 19 '19 at 18:00
  • @GarthSebastian I'm no expert but I believe it makes the frame and everything inside it only show things that are inside the borders of the frame itself. It might seem weird that a frame could show things outside its boundaries in the first place, but I think by default it can. So when you set IsClippedToBounds = "true", you make whatever's inside the frame only show what's inside the corner radius you just set, and if you leave it as "false", you won't actually see any effect from changing the radius. – Le Mot Juiced Dec 19 '19 at 18:03
  • This is a great solution. Thank you @LeMotJuiced – Mizanur Rahaman Aug 16 '22 at 09:43
7

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.

kyurkchyan
  • 2,260
  • 2
  • 23
  • 37
  • Thanx @kyurkchyan For Help. – Kcs computer Jun 02 '16 at 09:18
  • @kyurkchyan it works fine. How can I place a cross icon at right most of entry to clear the entry field when user starts typing in it. – Himanshu Dwivedi Jul 01 '16 at 07:13
  • You could use Grid. Set the right (if you want x on the right) padding property of the Entry (this will make sure that text inside entry will not overlap with the x button), then create two columns in grid. Set the columnspan of entry to 2, and place a button with x icon inside the second column of the grid. – kyurkchyan Jul 01 '16 at 11:16
  • @kyurkchyan works if you don't assign a background color. Once you do, you'll lose the rounded corner. – SergioMSCosta Mar 10 '17 at 18:41
0

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!

Krisztián Jankó
  • 13
  • 2