[iOS] Borders are not drawn properly when contained in layouts

[adrianknight89]

I'm trying to integrate PancakeView with CollectionView. As of PW 1.3.2-beta and XF 4.4.0.1201-nightly, borders on iOS do not look proper. Please run the attached repro. The background color of the CollectionView is black. The bottom and left borders are not aligned with the white grid. Tested on iOS 12 / XS.

App1112.zip

[sthewissen]

As I’m currently on a holiday I won’t be able to look at this for a while. I did not bring a laptop, real detox these few weeks 🤪 Feel free to investigate further or... well... wait 😂

[adrianknight89]

It's pretty hectic right now for me since I've been looking at CollectionView bugs on the XF repro. Have a nice holiday. I'll wait for a fix. :)

[sthewissen]

In the mean time, is PancakeView the root element in ItemTemplate? If so, try wrapping it in a Grid or StackLayout. I’ve seen some weirdness get fixed that way.

[adrianknight89]

Yes, it is the root element. If I wrap PancakeView with a Grid, it looks better, but the right border is still broken. Also, ideally, we should avoid complicating the visual tree for performance reasons. :)

[sthewissen]

As of right now, I'm fairly clueless about what's causing this. Obviously somewhere between current stable and the latest nightly something changed that is doing this. But what, I feel like I'm no step closer to finding out.

[memsranga]

I did observe a 1px margin on bottom in few of my apps, but the left leaking is new. Will run the repro.

[EvanMulawski]

Any update on this? Still occurring with XF 4.4.0.991265 and PancakeView 1.3.6.

[EvanMulawski]

@sthewissen

I've been looking into this issue. It seems that the Bounds.Location for an item in a CollectionView is (-1,-1). The following is a workaround.

Xamarin.Forms.PancakeView.iOS.PancakeViewRenderer

public override CGRect Bounds { get => FixBounds(base.Bounds); set => base.Bounds = value; }

private CGRect FixBounds(CGRect bounds)
{
    var fixedBounds = new CGRect(bounds.Location, bounds.Size);

    if (fixedBounds.X < 0)
    {
        fixedBounds.Width += fixedBounds.X;
        fixedBounds.X = 0;
    }
    if (fixedBounds.Y < 0)
    {
        fixedBounds.Height += fixedBounds.Y;
        fixedBounds.Y = 0;
    }

    return fixedBounds;
}

This is a screen capture of the iOS sample app updated to XF 4.4.0.991265:

Let me know if you would like this as a PR.

[sthewissen]

I'm not sure how much this helps, but I wanted to add CollectionView to the debugging help page as @EvanMulawski did above. I just pushed that into master.

While looking into this further I still can't quite wrap my head around why this behaves so weirdly inside CollectionView's data template which makes its original bounds change. I'm fairly sure that's most of what's causing this issue and from what I can tell without a StackLayout the PancakeView just takes up the complete height of the collection (in horizontal mode) and probably the whole width (in vertical mode). Even if you set horizontal and vertical options to not stretch.

[winnicki]

Hey guys, after working with borders for a while here in the renderer, I'm almost positive the root issues are:

a) BorderDrawingStyle isn't working at all on iOS and is always drawing the border centered (vs inside/outside). I made updates to draw the borders inside or outside. b) I think the renderer needs to update the frame of the control to include the border. When I was drawing inside borders, pancakes stack perfectly. I don't think the border is increasing the size of the frame.. so it's clipping when contained in any XF layouts.

I spent quite a bit of time making updates to allow for BorderEdges and actual BorderThickness, so you can draw individual edges with different thicknesses for each side. I'm taking a break atm because filling in the corners is causing me grief (getting it to work with inside/centered/outside borders).

It's very close to finished though, if you want, I can submit a PR and I think we should be able to sort it out quick enough.

[sthewissen]

This is very much appreciated! I'd gladly take a PR! @winnicki

[winnicki]

@sthewissen Great! I need to do a bit of cleanup but I'll submit something in the next few days.

[ninaada]

The same issue is found in carousel view as well.

[winnicki]

@ninaada Yes, I think it's an issue when the PancakeView is embedded in any container / layouts. I tested using a vertical StackLayout with zero spacing, and the PancakeView borders bleed onto each other.

I'm going to try and submit a PR later today.

[winnicki]

@sthewissen Maybe for clarity can we change the title to reflect that this is an issue with the PancakeView frame itself and not just when it's contained in a CollectionView?

[winnicki]

Here's my PR. If anybody can help figure out the math for the corner fills that would be great. I'm having another look here. The main idea is I take the original rect and inset by half the border width (which can result in a larger or smaller rectangle depending if borders are inside or outside). Then the arcs are drawn as normal using the insetRect. Maybe the radius needs to be adjusted? If you run it and look at the top-left corner you'll see what I mean. If you update it to draw the arc using the rect vs insetRect, the arc will look good except it's off by a half-border width in both x + y directions. I tried just offsetting the center point from where the arc is drawn by the half-border widths but it still doesn't look perfect and I don't know why.

[kubaizi]

@adrianknight89 meanwhile, you can set a margin equal to the border thickness. BorderThickness="2" Margin="2,0"

it fixes the border for me.

[maxyhi]

Ive encountered this same issue with collection views. I found a work around suggested by https://taubensee.net/xamarin-forms-collectionview-spacing/. Just wrap the PancakeView frame in a ContentView