Bug 55744 - Frame not respecting z-positioning within Grid on Android
Summary: Frame not respecting z-positioning within Grid on Android
Status: CONFIRMED
Alias: None
Product: Forms
Classification: Xamarin
Component: Android ()
Version: 2.3.4
Hardware: PC Windows
: --- normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2017-04-28 19:29 UTC by jared.fritsch
Modified: 2018-04-06 11:46 UTC (History)
8 users (show)

Tags: android frame layout ac
Is this bug a regression?: No
Last known good build:


Attachments
Repro project (189.71 KB, application/x-zip-compressed)
2017-04-28 19:29 UTC, jared.fritsch
Details


Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report for Bug 55744 on Developer Community or GitHub if you have new information to add and do not yet see a matching new report.

If the latest results still closely match this report, you can use the original description:

  • Export the original title and description: Developer Community HTML or GitHub Markdown
  • Copy the title and description into the new report. Adjust them to be up-to-date if needed.
  • Add your new information.

In special cases on GitHub you might also want the comments: GitHub Markdown with public comments

Related Links:
Status:
CONFIRMED

Description jared.fritsch 2017-04-28 19:29:51 UTC
Created attachment 21892 [details]
Repro project

### Overview
On Android, the Frame control does not follow the same rules as other controls when it comes to z-positioning within a Grid. The Frame always displays on top of other controls, no matter where it is placed within a Grid. This problem does not exist on iOS.


### Steps to Reproduce
1. Run the attached repro project on iOS
2. Note how both Grids display the same way
3. Run the attached repro project on Android
4. Note how the two Grids do not display the same way


### Expected Result
Controls should be placed on top of each other in the same order they are added to a Grid. So the first control is placed on the bottom, and the last control is placed on the top.


### Actual Result
The Frame control is always on top, regardless of where it was placed within the Grid.


### Build Date & Hardware
April 28, 2017
iPad Air 1 - iOS 10.3.1
iPhone 6 Plus - iOS 10.3.1
Nexus 5 Simulator - Android 7.1
Nexus 9 Simulator - Android 7.1


### Workarounds
- Wrap the Frame with a ContentView.
- Embed controls with the Frame itself.
Comment 1 Jimmy [MSFT] 2017-05-02 18:55:07 UTC
Thank you for filing this report! I ran the project you attached and I can see the issue you described. I am confirming the report so the team can look into this.


### Version Tests
2.3.6.91    BAD
2.3.5-pre2  BAD
2.3.4.231   BAD
2.3.3.193   BAD
Comment 2 Jason Willett 2017-09-14 19:46:53 UTC
What do you mean by "Embed controls with the Frame itself"? I'm also running into this bug putting a FAB between 2 views for a form page, and the frame is on top of the FAB.
Comment 3 jared.fritsch 2017-09-14 20:03:56 UTC
Jason Willett - by that I just simply meant use the Frame as a container for the controls it should be underneath (in terms of z-positioning).

So if you open repro project I uploaded, you'll see that the following doesn't work. We have two controls within the Grid.

    <Grid
      HorizontalOptions="Center"
      VerticalOptions="Center"
      WidthRequest="200"
      HeightRequest="200"
      BackgroundColor="Red">
      <Frame
        HorizontalOptions="Center"
        VerticalOptions="Center"
        HeightRequest="150"
        WidthRequest="150"
        BackgroundColor="Green"
        Padding="0" />
      <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        HeightRequest="100"
        WidthRequest="100"
        BackgroundColor="Blue">
        <Label
          Text="TEST1"/>
        <Label
          Text="TEST2"/>
        <Label
          Text="TEST3"/>
      </StackLayout>
    </Grid>

However, if you just embed the StackLayout within the Frame, it does work as expected.

    <Grid
      HorizontalOptions="Center"
      VerticalOptions="Center"
      WidthRequest="200"
      HeightRequest="200"
      BackgroundColor="Red">
      <Frame
        HorizontalOptions="Center"
        VerticalOptions="Center"
        HeightRequest="150"
        WidthRequest="150"
        BackgroundColor="Green"
        Padding="0">
        <StackLayout
          HorizontalOptions="Center"
          VerticalOptions="Center"
          HeightRequest="100"
          WidthRequest="100"
          BackgroundColor="Blue">
          <Label
            Text="TEST1"/>
          <Label
            Text="TEST2"/>
          <Label
            Text="TEST3"/>
        </StackLayout>
      </Frame>
    </Grid>

In this case, a Grid is probably no longer necessary. I don't expect this workaround to work in every use case. Wrapping your Frame in a ContentView may be better for you. Hopefully the bug just gets fixed.
Comment 4 batmaci 2017-11-27 00:51:11 UTC
is that difficult fix? why cant we get fix for this?
Comment 5 batmaci 2017-11-28 19:33:17 UTC
This is the same problem, I reported in SO over here. Using Frame Inside Absolutelayout causes that Frame is always on top, nothing can overlay above a frame. 

https://stackoverflow.com/questions/45427276/absolutelayout-doesnt-align-controls-as-expected-when-positions-are-same
Comment 6 p.k 2018-04-06 11:44:01 UTC
This seems to be related to the Elevation of the CardView. Since I had a custom renderer anyway, I tried to call SetZ with different values. I noticed that, when I called SetZ(1), the shadow nearly vanished, but I have been able to overlay controls over the CardView. Anyway, when I'm setting the Elevation *after* calling SetZ(1), the shadow re-appears, but so does the issue. GetZ() returns 24 after setting the elevation to 30.
Comment 7 p.k 2018-04-06 11:46:22 UTC
I was wrong. The issue still exists when setting Z to 1.