This is a screenshot of what I'm trying to do -- except that my implementation has a 2 pixel border in the middle where it only should be 1 pixel wide. My implementation overall isn't great and I'm just exploring.
I gather I'll have to write this in native iOS, and eventually Android UI code. If that could be avoided, I would be happy. Currently I'm doing a pretty stupid hack to even get this far. What I've done is put the 2 buttons in a Grid, and gave the Grid RowSpacing = 0, and ColumnSpacing = 0. The white border comes from the single pixel white border on the Buttons I've added as the grid content. To get rid of the left and right pixels (as prescribed by the designer), I've made the width of each button 1 pixel larger than the screen allows, and finally I center the whole thing in the middle of the screen so that the unwanted borders are actually offscreen.
I totally don't want to do it that way, and given I've got the double border in the middle (which was predictable but I'm exploring), the whole thing won't fly anyhow. Besides, the hack I used to get rid of the outside borders won't work on wider devices, etc.
Side note: It seemed like I was unable to get the grid to FillAndExpand in the horizontal direction. I am using a RelativeLayout parent that houses the Grid, so maybe that's the issue. I'm totally not sure.
Any help would be appreciated -- even if the answer is: "you have to do it with a custom Renderer"... that's probably where I'll be heading for this anyhow. Sad though. So close.