Bug 60013 - On UWP, page content is obscured by toolbar when using SetToolbarPlacement(ToolbarPlacement.Bottom)
Summary: On UWP, page content is obscured by toolbar when using SetToolbarPlacement(To...
Status: CONFIRMED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms (show other bugs)
Version: 2.4.0
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2017-10-06 11:05 UTC by John Hardman
Modified: 2017-10-11 22:58 UTC (History)
3 users (show)

Tags: UWP, SetToolbarPlacement, bottom toolbar, ac
Is this bug a regression?: ---
Last known good build:

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 60013 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 John Hardman 2017-10-06 11:05:22 UTC
On UWP, using XF 2.3.4.270, when using a bottom toolbar, page content is hidden behind the bottom toolbar. It's as if the page dimensions are not adjusted to take into account the presence of the bottom toolbar.

The bottom toolbar is implemented using: SetToolbarPlacement(ToolbarPlacement.Bottom);

May be related to:
https://bugzilla.xamarin.com/show_bug.cgi?id=32213
https://bugzilla.xamarin.com/show_bug.cgi?id=48726
https://bugzilla.xamarin.com/show_bug.cgi?id=59025

Note that the page content is populated in an OnAppearing() override, rather than in the page constructor. I know this showed up a similar problem on iOS (see links above).
Comment 1 John Hardman 2017-10-06 12:20:15 UTC
Here's a repro sample. Simply push an instance of Bug60013PageView onto the navigation stack and follow the on-screen instruction:

using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.WindowsSpecific;

namespace ViewsUsingXamarinForms
{
	public static class RelativeLayoutExtensions
	{
		public static void Add(this RelativeLayout.IRelativeList<View> relativeList, RelativeLayoutItem v)
		{
			relativeList.Add(v.View, v.XConstraint, v.YConstraint, v.WidthConstraint, v.HeightConstraint);
		}

	} // public static class RelativeLayoutExtensions

	public class RelativeLayoutItem
	{
		public View View { get; }
		public Constraint XConstraint { get; }
		public Constraint YConstraint { get; }
		public Constraint WidthConstraint { get; }
		public Constraint HeightConstraint { get; }

		public RelativeLayoutItem(
			View view,
			Constraint xConstraint,
			Constraint yConstraint,
			Constraint widthConstraint,
			Constraint heightConstraint)
		{
			this.View = view;
			this.XConstraint = xConstraint;
			this.YConstraint = yConstraint;
			this.WidthConstraint = widthConstraint;
			this.HeightConstraint = heightConstraint;
		}

	} // public class RelativeLayoutItem

	public class Bug60013PageViewModel
	{

	} // public class Bug60013PageViewModel

	public class Bug60013PageView : ContentPage
	{
		public Bug60013PageView()
		{
			BindingContext = new Bug60013PageViewModel();
		}

		protected override async void OnAppearing()
		{
			Title = "Bug 60013";
			BackgroundColor = Color.White;

			Content = new StackLayout
			{
				HorizontalOptions = LayoutOptions.FillAndExpand,
				VerticalOptions = LayoutOptions.FillAndExpand,
				BackgroundColor = Color.White,

				Children = // of StackLayout
				{
					new RelativeLayout
					{
						HorizontalOptions = LayoutOptions.Fill,
						VerticalOptions = LayoutOptions.FillAndExpand,

						Children = // of RelativeLayout
						{
							new RelativeLayoutItem(
								new StackLayout
								{
									Padding = new Thickness(5, 0, 5, 5), // left, top, right, bottom
									HorizontalOptions = LayoutOptions.Fill,
									VerticalOptions = LayoutOptions.FillAndExpand,
									BackgroundColor = Color.FromRgba(0.2, 0.3, 0.5, 1.0),

									Children = // of StackLayout
									{
										new StackLayout
										{
											Padding = new Thickness(5, 0, 5, 5), // left, top, right, bottom
											HorizontalOptions = LayoutOptions.FillAndExpand,
											VerticalOptions = LayoutOptions.FillAndExpand,
											BackgroundColor = Color.White,

											Children = // of StackLayout
											{
												new Label
												{
													Text = "Loading web page",
													TextColor = Color.Black,
													HorizontalOptions = LayoutOptions.CenterAndExpand,
													VerticalOptions = LayoutOptions.CenterAndExpand,
													BackgroundColor = Color.White,
													IsVisible = false,
												} // Label
												,
												new WebView
												{
													HorizontalOptions = LayoutOptions.Fill,
													VerticalOptions = LayoutOptions.FillAndExpand,

												} // WebView
												,
												new Label
												{
													Text = "Wait 5 seconds for toolbar to appear, then can this be seen?",
													TextColor = Color.Yellow,
													HorizontalOptions = LayoutOptions.FillAndExpand,
													VerticalOptions = LayoutOptions.End,
													BackgroundColor = Color.Red,
												} // Label
											} // Children of StackLayout
										} // StackLayout
									} // Children of StackLayout
								} // StackLayout
								,
								Constraint.Constant(0),
								Constraint.Constant(0),
								Constraint.RelativeToParent(parent => parent.Width),
								Constraint.RelativeToParent(parent => parent.Height)),
						} // Children of RelativeLayout
					} // RelativeLayout
				} // Children of StackLayout
			}; // StackLayout

			NavigationPage.SetHasNavigationBar(this, true);
			NavigationPage.SetBackButtonTitle(this, "Back");
			NavigationPage.SetHasBackButton(this, true);
			On<Windows>().SetToolbarPlacement(ToolbarPlacement.Bottom);

			await Task.Run(async () =>
			{
				await Task.Delay(5000);
				Device.BeginInvokeOnMainThread(() =>
				{
					ToolbarItems.Add(new ToolbarItem
					{
						Text = "Copy to clipboard",
						Order = ToolbarItemOrder.Primary,
					}); // ToolbarItem
				});
			});
		}

	} // public class Bug60013PageView : ContentPage

} // namespace ViewsUsingXamarinForms

// eof
Comment 2 Paul DiPietro [MSFT] 2017-10-11 22:58:44 UTC
Seems like resizing the window helps, but that would make sense.