Drawing issue when migrating CirclePage + ActionButton to ContentPage + Button + Style = Bottom

[axa88]

Describe the bug Attempting to migrate away from CirclePage, It appears that the rendering for a Bottom Buttonon the ContentPageis drawn differently than that of the legacy CirclePagewith ActionButton

Using the Legacy CirclePage, making the ActionButtonvisible will result in a button anchored to the bottom of the page, drawn in an aesthetically pleasing way with no dead space:

When migrating as suggested to a ContentPagewith Button using Tizen specific Style ButtonStyle.Bottom:

ActionButton = new Button {BackgroundColor = Color.Orange};
ActionButton.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetStyle(ButtonStyle.Bottom);

The Bottom Button appears to be drawn in a less aesthetically pleasing way where there is dead space between the button and the page content above it:

The difference between the 2 is in order to make the button appear at the bottom of the page, the content of the page and the button, are now placed inside of an additional StackLayout:

var profileEditScrollView = new CircleScrollView { Content = profileEditView };
var stackLayout = new StackLayout { Children = { profileEditScrollView, ActionButton } };
Content = stackLayout;

This additional StackLayoutwas not needed with Legacy CirclePage+ ActionButton

Expected behavior There should be a way to anchor a bottom button to the screen and have it draw like CirclePagewith ActionButton

Environment (please complete the following information):

• Target Product:

• Tizen Platform Version [Tizen 5.5]

• Tizen.CircularUI Version [1.5.0 pre7]

Additional context If this is not recommended please advise. I do not see better code example than: https://developer.samsung.com/tizen/blog/en-us/2020/04/06/style-your-buttons-using-tizen-net

What is c# equivalent to suggested: AbsoluteLayout.LayoutBounds="75, 268, 210, 92" from: https://github.com/Samsung/Tizen.CircularUI/releases/tag/beta-1.5.0-pre7

[rookiejava]

@axa88, can you share the code you tested so that we can accurately reproduce the problem?

What is c# equivalent to suggested: AbsoluteLayout.LayoutBounds="75, 268, 210, 92"

here it is

AbsoluteLayout.SetLayoutBounds(ActionButton, new Rectangle(75, 268, 210, 92));

[axa88]

@rookiejava I created repository here to demonstrate issue. https://github.com/axa88/BottomButtonTest

Initial drawing of Bottom Buttonon ContentPageshows issue described above. Redraw of Bottom Buttonon ContentPageshows new issue below:

To reproduce, load solution in repository, and switch between Pages using Bottom Buttons.

Update to Tizen.CircularUI Version [1.5.0]

[myroot]

Because you use StackLayout each child can't overlap

[myroot]

Fixes your code

-                       var stackLayout = new StackLayout { Children = { profileEditScrollView, actionButton } };
-                       MainPage = new ContentPage { Content = stackLayout };
+                       var absoluteLayout = new AbsoluteLayout();
+                       absoluteLayout.Children.Add(profileEditScrollView, new Rectangle(0, 0, 1, 1), AbsoluteLayoutFlags.All);
+                       absoluteLayout.Children.Add(actionButton, new Rectangle(0, 1, 360, 92), AbsoluteLayoutFlags.PositionProportional);
+                       MainPage = new ContentPage { Content = absoluteLayout };

[axa88]

@myroot Thanks, this fixes my issue. I must learn more about layout design in XF