Bug 37364 - LayoutTo works once, but then second time doesn't work correctly (Bounds.Width looks wrong)
Summary: LayoutTo works once, but then second time doesn't work correctly (Bounds.Widt...
Status: RESOLVED NORESPONSE
Alias: None
Product: Forms
Classification: Xamarin
Component: Android ()
Version: 2.0.0
Hardware: Macintosh Mac OS
: --- normal
Target Milestone: ---
Assignee: Paul DiPietro [MSFT]
URL:
Depends on:
Blocks:
 
Reported: 2016-01-03 14:36 UTC by Paul Johnson
Modified: 2017-06-15 16:19 UTC (History)
3 users (show)

Tags: LayoutTo
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 on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
RESOLVED NORESPONSE

Description Paul Johnson 2016-01-03 14:36:08 UTC
I have a top bar with an icon on which creates a menu and sweeps it in from the right to cover 85% of the UI under it.

When I click on the menu the first time, the menu sweeps in fine then closes fine when I click the menu button again. If I click the menu a third time, the view sweeps in, but this time, only the left icon on the view appears (the menu view is a ContentView containing a ListView that in itself contains an image (32x32) and some text.

When I look at the Bounds for the menu, I'm seeing Width=40 rather than 85% of the screen width as the WidthRequest asks for.

The code looks like this.

In the original UI, I create the TopBar method. This passes in an stack layout that has a width of the full screen width and orientation horizontal.

The top bar code is this

public TopBar(string text = "", Page current = null, string leftImage = "", string rightImage = "", StackLayout stack = null)
        {
            Title = text;
            LeftImage = leftImage;
            RightImage = rightImage;
            currentPage = current;
            panel = stack;
        }

        public Grid CreateTopBar()
        {
            grid = new Grid
            {
                VerticalOptions = LayoutOptions.CenterAndExpand,
                BackgroundColor = Constants.Green,
                HeightRequest = 52,
                MinimumHeightRequest = 52,
                WidthRequest = App.ScreenSize.Width,
            };

            var padView = new ContentView
            {
                WidthRequest = 8
            };

            var leftView = new ContentView();
            var rightView = new ContentView();

            var leftCell = new Image();
            if (!string.IsNullOrEmpty(LeftImage))
            {
                leftCell.Source = LeftImage;
                leftCell.HeightRequest = leftCell.WidthRequest = 16;
                leftCell.HorizontalOptions = LayoutOptions.StartAndExpand;

                var gestLeft = new TapGestureRecognizer
                {
                    NumberOfTapsRequired = 1,
                };
                gestLeft.Tapped += async delegate
                {
                    await currentPage.Navigation.PopAsync();   
                };
                leftCell.GestureRecognizers.Add(gestLeft);
                leftView.Content = new StackLayout
                {
                    Orientation = StackOrientation.Horizontal,
                    Children = { padView, leftCell }
                };
            }

            dynamic title;
            if (!string.IsNullOrEmpty(Title))
            {
                title = new Label
                {
                    FontSize = 22,
                    TextColor = Color.White,
                    HorizontalTextAlignment = TextAlignment.Center,
                    VerticalTextAlignment = TextAlignment.Center,
                    MinimumWidthRequest = App.ScreenSize.Width - 64,
                    Text = Title
                };
            }
            else
            {
                title = new Image
                {
                    Source = "headerlogo.png",
                    HeightRequest = 42,
                    WidthRequest = 42,
                    VerticalOptions = LayoutOptions.Center
                };
            }

            rightCell = new Image();

            if (!string.IsNullOrEmpty(RightImage))
            {
                rightCell.Source = RightImage;
                rightCell.HeightRequest = rightCell.WidthRequest = 32;
                rightCell.HorizontalOptions = LayoutOptions.EndAndExpand;

                layout = new RelativeLayout
                {
                    VerticalOptions = LayoutOptions.FillAndExpand,
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                };

                rightView.Content = new StackLayout
                {
                    Orientation = StackOrientation.Horizontal,
                    Children = { rightCell, padView }
                };

                menu = new MenuView();
                Rectangle origBounds;

                var gestRight = new TapGestureRecognizer
                {
                    NumberOfTapsRequired = 1,
                    Command = new Command((o) =>
                        {
                            var bounds = panel.Children[0].Bounds;
                            bounds.X = App.ScreenSize.Width * .15;
                            if (!App.Self.PanelShowing)
                            {
                                Device.BeginInvokeOnMainThread(async() =>
                                    {
                                        panel.WidthRequest = panel.Width + menu.Content.WidthRequest;
                                            
                                        panel.Children.Add(new StackLayout
                                            {
                                                Padding = new Thickness(0, -8),
                                                Children = { menu }
                                            }
                                        );

                                        origBounds = panel.Children[1].Bounds;

                                        await panel.Children[1].LayoutTo(bounds, 250, Easing.CubicIn);

                                        App.Self.PanelShowing = true;
                                    });
                            }
                            else
                            {
                                Device.BeginInvokeOnMainThread(async() =>
                                        await panel.Children[1].LayoutTo(origBounds, 250, Easing.CubicOut)); 
                                panel.Children.Remove(menu);
                                panel.WidthRequest = panel.Width - menu.Content.WidthRequest;
                                App.Self.PanelShowing = false;
                            }
                        })
                };
                rightCell.GestureRecognizers.Add(gestRight);

                MessagingCenter.Subscribe<MenuView, string>(this, "Menu", (sender, args) =>
                    {
                        if (args == "Close")
                        {
                            if (App.Self.PanelShowing)
                            {
                                Device.BeginInvokeOnMainThread(async() =>
                            await panel.Children[1].LayoutTo(origBounds, 250, Easing.CubicOut)); 
                                panel.Children.Remove(menu);
                                App.Self.PanelShowing = false;
                            }
                        }
                    });
            }

            grid.Children.Add(leftView, 0, 0);
            grid.Children.Add(title, 1, 0);
            grid.Children.Add(rightView, 2, 0);
            return grid;
        }
    }

With the menu

    public class MenuListClass
    {
        public string image { get; set; }

        public string text { get; set; }
    }

    public class MenuView : ContentView
    {
        List<MenuListClass> menuList;

        public MenuView()
        {
            menuList = new List<MenuListClass>
            {
                new MenuListClass { image = "favourites_settings.png", text = LangResources.Favourites },
                new MenuListClass { text = LangResources.RegionalSettings, image = "regional.png" },
            };

            var listView = new ListView
            {
                ItemsSource = menuList,
                ItemTemplate = new DataTemplate(typeof(MenuListView)),
                RowHeight = 42,
                WidthRequest = App.ScreenSize.Width * .85,
                SeparatorColor = Constants.LightGrey
            };

            listView.ItemSelected += async (object sender, SelectedItemChangedEventArgs e) =>
            {
                var selected = e.SelectedItem as MenuListClass;
                Page page = null;
                if (selected.text == LangResources.RegionalSettings)
                    page = new RegionalSettings();
                else
                    page = new FavouriteUI();

                if (page != null)
                {
                    MessagingCenter.Send(this, "Menu", "Close");
                    await Navigation.PushAsync(page);
                }
            };

            Content = new StackLayout
            {
                BackgroundColor = Color.White,
                Orientation = StackOrientation.Vertical,
                WidthRequest = App.ScreenSize.Width * .85,
                HeightRequest = App.ScreenSize.Height - 52 - 36,
                Children = { listView }
            };
        }
    }

    public class MenuListView : ViewCell
    {
        public MenuListView()
        {
            var imgIcon = new Image
            {
                WidthRequest = 32,
                HeightRequest = 32,
            };
            imgIcon.SetBinding(Image.SourceProperty, new Binding("image"));

            var lblText = new CustomLabel
            {
                FontFamily = Constants.ProximaRegular,
                FontSize = 18,
                VerticalTextAlignment = TextAlignment.Center,
                TextColor = Constants.MainCopy
            };
            lblText.SetBinding(Label.TextProperty, new Binding("text"));

            View = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                Padding = new Thickness(8),
                Children = { imgIcon, lblText }
            };
        }
    }

The code works perfectly on iOS (and Windows Phone), but not on Android.

=== Xamarin Studio ===

Version 5.10.2 (build 49)
Installation UUID: 728e2a5d-c6a2-4d84-a931-ee64cb78694c
Runtime:
	Mono 4.2.2 (explicit/7b87787)
	GTK+ 2.24.23 (Raleigh theme)

	Package version: 402020010

=== Xamarin.Profiler ===

Not Installed

=== Apple Developer Tools ===

Xcode 7.2 (9548)
Build 7C68

=== Xamarin.iOS ===

Version: 9.4.1.12 (Business Edition)
Hash: 78c6cd3
Branch: master
Build date: 2015-12-17 18:29:42-0500

=== Xamarin.Android ===

Version: 6.0.1.5 (Business Edition)
Android SDK: /Users/PFJ/Library/Developer/Xamarin/android-sdk-macosx
	Supported Android versions:
		2.3    (API level 10)
		4.0.3  (API level 15)
		4.1    (API level 16)
		4.2    (API level 17)
		4.3    (API level 18)
		4.4    (API level 19)
		4.4.87 (API level 20)
		5.0    (API level 21)
		5.1    (API level 22)
		6.0    (API level 23)

SDK Tools Version: 24.4.1
SDK Platform Tools Version: 23.0.1
SDK Build Tools Version: 23.0.2

Java SDK: /usr
java version "1.7.0_71"
Java(TM) SE Runtime Environment (build 1.7.0_71-b14)
Java HotSpot(TM) 64-Bit Server VM (build 24.71-b01, mixed mode)

=== Xamarin Android Player ===

Not Installed

=== Xamarin.Mac ===

Version: 2.4.1.5 (Business Edition)

=== Build Information ===

Release ID: 510020049
Git revision: deed4cd240ff3611c8742bbc62296e207f46173d
Build date: 2015-12-17 11:13:36-05
Xamarin addins: 8bd975e7b465f6fe812b64d736f3b7e8c1a79a3e
Build lane: monodevelop-lion-cycle6-c6sr1

=== Operating System ===

Mac OS X 10.11.3
Darwin Pauls-MacBook-Pro.local 15.3.0 Darwin Kernel Version 15.3.0
    Thu Dec 10 18:20:09 PST 2015
    root:xnu-3248.30.4~2/RELEASE_X86_64 x86_64
Comment 1 Paul Johnson 2016-01-04 15:40:16 UTC
If the MinWidthRequest is set in the stack, the subsequent menu openings works. This is more a work around than fix though
Comment 2 stephan_bouthot 2016-07-21 20:37:38 UTC
I'm having this issue as well. I fixed one instance by changing VerticalOptions from LayoutOptions.StartAndExpand to LayoutOptions.FillAndExpand, but it still happens in a couple other places in spite of that. Started happening when I upgraded my xamarin.forms nuget package to 2.3.0.49.
Comment 3 Paul DiPietro [MSFT] 2017-03-09 18:46:15 UTC
If this is still occurring for anyone on the latest stable/prerelease/nightly, uploading a newer and hopefully simplified reproduction would be appreciated. The pasted code is a bit bloated and makes finding the root cause more difficult.
Comment 4 Paul DiPietro [MSFT] 2017-06-15 16:19:11 UTC
Closing this due to no response. Please reopen and attach a minimized reproduction project if the issue still exists as of the latest prerelease or nightly build.