Bug 42921 - Button width inconsistent between phone and non-phone devices
Summary: Button width inconsistent between phone and non-phone devices
Status: CONFIRMED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 2.3.1
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2016-07-29 15:15 UTC by John Hardman
Modified: 2016-08-01 17:34 UTC (History)
3 users (show)

Tags: Button Grid iOS Android Windows ac
Is this bug a regression?: ---
Last known good build:


Attachments
Screenshot typical of output on phone devices (4.48 KB, image/png)
2016-07-29 15:15 UTC, John Hardman
Details
Screenshot typical of output on desktops (3.11 KB, image/png)
2016-07-29 15:16 UTC, John Hardman
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 42921 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 2016-07-29 15:15:34 UTC
Created attachment 16832 [details]
Screenshot typical of output on phone devices

Use the following code to populate a ContentPage.

Run it on phones (Android, iOS, WinPhone 8.1 RT) and then run it on desktop (WinRT 8.1, UWP).
Despite there being no relating to Device.Idiom here, the visual output is different (see attached pictures) between phones and desktops.

Having confirmed that, uncomment the WidthRequest line in the code. When WidthRequest is set to 1, the behavior that would have been expected without setting WidthRequest does finally occur.

There would appear to be two issues. The first is the inconsistency between phone and desktop platforms. The second is that setting WidthRequest makes a difference.


            Label label = new Label
            {
                BackgroundColor = Color.Lime,
                FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
                HorizontalOptions = LayoutOptions.Start,
                Text = "July",
                TextColor = Color.White,
                VerticalOptions = LayoutOptions.Center,
                VerticalTextAlignment = TextAlignment.Center,
            };

            StackLayout innerStackLayout = new StackLayout
            {
                BackgroundColor = Color.Aqua,
                HorizontalOptions = LayoutOptions.Start,
                Padding = 0,
                VerticalOptions = LayoutOptions.Center,
                Children =
                {
                    label
                }
            };

            int tapCount = 0;
            Button button = new Button
            {
                BackgroundColor = Color.Transparent,
                BorderColor = Color.Transparent,
                BorderRadius = 0,
                BorderWidth = 0,
                Command = new Command(() =>
                {
                    label.Text = (++tapCount).ToString();
                }),
                HorizontalOptions = LayoutOptions.Fill,
                Margin = 0,
                TextColor = Color.Transparent,
                VerticalOptions = LayoutOptions.Fill,
                //WidthRequest = 1, // TODO - Put this in and see the difference
            };

            Grid grid = new Grid
            {
                BackgroundColor = Color.Red,
                ColumnDefinitions = new ColumnDefinitionCollection(),
                ColumnSpacing = 0,
                HorizontalOptions = LayoutOptions.Start,
                IsClippedToBounds = false,
                IsVisible = true,
                MinimumHeightRequest = 44,
                MinimumWidthRequest = 44,
                Padding = 0,
                RowDefinitions = new RowDefinitionCollection(),
                RowSpacing = 0,
                VerticalOptions = LayoutOptions.Fill
            };

            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
            grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });

            grid.Children.Add(innerStackLayout, 0, 1, 0, 1);
            grid.Children.Add(button, 0, 1, 0, 1);

            ContentView yearContentViewButton = new ContentView
            {
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Center,
                HeightRequest = 44,
                MinimumWidthRequest = 44,
                Content = grid,
                BackgroundColor = Color.Fuchsia,
                Padding = 0,
            };

            StackLayout middleStackLayout = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                BackgroundColor = Color.Pink,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                Spacing = 4,
                Padding = 0,
                Margin = 2,
                Children =
                {
                    yearContentViewButton
                }
            };

            this.BackgroundColor = Color.White;
            this.Content = middleStackLayout;
            return;
Comment 1 John Hardman 2016-07-29 15:16:09 UTC
Created attachment 16833 [details]
Screenshot typical of output on desktops