Custom Button: split background colour

I am struggeling to recreate this button in Xamarin forms where the background colour is split between 2 colours 50% height
Using a custom renderer with a background image I can recreate the split but I loose the ability to have rounded corners. also it would be best if I could create it programatically.

If anyone has a suggestion of how to achieve this that would be ace!
Thanks Xamal's

Answers

  • seanydaseanyda GBMember ✭✭✭✭✭

    Easiest cross platform solution would probably be a Grid with two RowDefinitions with the text having a RowSpan of 2. Wrap the Grid in a Frame for the Border effect.

  • DarrenMcGrath86DarrenMcGrath86 GBMember ✭✭

    Thanks for the reply @seanyda
    I thought about that also but I am still having the corner radius issue as seen below. the corners are still visible behund the frame
    Let me know If there is anything else you think I am missing.

  • DarrenMcGrath86DarrenMcGrath86 GBMember ✭✭

    Also If i add padding to the frame ( greeen color is to make it obvious) the corners are still visible inside the frame

  • seanydaseanyda GBMember ✭✭✭✭✭

    @DarrenMcGrath86 said:
    Also If i add padding to the frame ( greeen color is to make it obvious) the corners are still visible inside the frame

    You're not going to want to put any Padding on the Frame. The OutlineColor needs to be the #2771A1 colour. You'll want to take a bit of the CornerRadius too. But you just need to find the property to cover the blue outside the corners (if there is one).

  • DarrenMcGrath86DarrenMcGrath86 GBMember ✭✭

    Thanks for the help but unfortunatly it is not the desired result.. The outline color needs to be set independently of the colors inside.. when i take the padding of the corners are visible outside the frame.. as seen below.
    I am certain it needs to be a custom renderer on both ios and android projects which is where I am struggeling with

    Thanks again though, If anyone else has any pointers it would be much appreciated

Sign In or Register to comment.