[Material] + [Android, iOS] Refactored and fixed lots of button layout issues

Xamarin.Forms.Controls.Issues/Xamarin.Forms.Controls.Issues.Shared/Bugzilla39821.cs

@@ -123,7 +123,7 @@ async Task Kinetic(BoxView box)
 		public void DoesNotCrash()
 		{
 			RunningApp.Tap(q => q.Marked("Animate"));
-			RunningApp.WaitForElement(q => q.Marked("Success"));
+			RunningApp.WaitForElement(q => q.Marked("Success"), timeout:TimeSpan.FromSeconds(25));
 		}
 #endif
 	}

Xamarin.Forms.Controls.Issues/Xamarin.Forms.Controls.Issues.Shared/Bugzilla41415.cs

@@ -102,12 +102,12 @@ public void Bugzilla41415Test()
 			RunningApp.Tap(q => q.Marked(ButtonText));
 			RunningApp.WaitForElement(q => q.Marked("x: 100"));
 			RunningApp.WaitForElement(q => q.Marked("y: 100"));
-			RunningApp.WaitForElement(q => q.Marked("z: True"));
+			RunningApp.WaitForElement(q => q.Marked("z: True"), timeout: TimeSpan.FromSeconds(25));
 			RunningApp.WaitForElement(q => q.Marked("a: True"));
 			RunningApp.Tap(q => q.Marked(ButtonText));
 			RunningApp.WaitForElement(q => q.Marked("x: 200"));
 			RunningApp.WaitForElement(q => q.Marked("y: 100"));
-			RunningApp.WaitForElement(q => q.Marked("z: True"));
+			RunningApp.WaitForElement(q => q.Marked("z: True"), timeout: TimeSpan.FromSeconds(25));
 			RunningApp.WaitForElement(q => q.Marked("a: False"));
 		}
 

Xamarin.Forms.Controls.Issues/Xamarin.Forms.Controls.Issues.Shared/Issue2482.cs

@@ -75,7 +75,7 @@ public void AnimationCancel()
 		{
 			RunningApp.WaitForElement(ButtonId);
 			RunningApp.DoubleTap(ButtonId);
-			RunningApp.WaitForElement(Success);
+			RunningApp.WaitForElement(Success, timeout: TimeSpan.FromSeconds(25));
 		}
 #endif
 	}

Xamarin.Forms.Controls/CoreGallery.cs

@@ -306,6 +306,10 @@ public override string ToString()
 				new GalleryPageFactory(() => new ContextActionsGallery (tableView: true), "ContextActions Table Gallery"),
 				new GalleryPageFactory(() => new CoreBoxViewGalleryPage(), "BoxView Gallery"),
 				new GalleryPageFactory(() => new ButtonCoreGalleryPage(), "Button Gallery"),
+				new GalleryPageFactory(() => new ButtonLayoutGalleryPage(), "Button Layout Gallery"),
+				new GalleryPageFactory(() => new ButtonLayoutGalleryPage(VisualMarker.Material), "Button Layout Gallery (Material)"),
+				new GalleryPageFactory(() => new ButtonBorderBackgroundGalleryPage(), "Button Border & Background Gallery"),
+				new GalleryPageFactory(() => new ButtonBorderBackgroundGalleryPage(VisualMarker.Material), "Button Border & Background Gallery (Material)"),
 				new GalleryPageFactory(() => new DatePickerCoreGalleryPage(), "DatePicker Gallery"),
 				new GalleryPageFactory(() => new EditorCoreGalleryPage(), "Editor Gallery"),
 				new GalleryPageFactory(() => new FrameCoreGalleryPage(), "Frame Gallery"),

Xamarin.Forms.Controls/GalleryPages/ButtonBorderBackgroundGalleryPage.xaml

@@ -0,0 +1,101 @@
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+			 xmlns:local="clr-namespace:Xamarin.Forms.Controls"
+			 xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
+			 xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
+			 x:Class="Xamarin.Forms.Controls.ButtonBorderBackgroundGalleryPage"
+			 Title="Button Border &amp; Background">
+
+	<ContentPage.Resources>
+		<ResourceDictionary>
+			<Style TargetType="Label">
+				<Setter Property="FontSize" Value="12" />
+			</Style>
+		</ResourceDictionary>
+	</ContentPage.Resources>
+
+	<ScrollView>
+		<StackLayout Padding="20" Spacing="10">
+
+			<Label Text="Base:" Margin="0,5,0,0" FontAttributes="Bold" />
+
+			<Label Text="Defaults:" Margin="0,0,0,-5" />
+			<StackLayout Padding="0" Spacing="5">
+				<Button Text="Button Text" />
+			</StackLayout>
+
+			<Label Text="Modified:" Margin="0,5,0,0" FontAttributes="Bold" />
+
+			<Label Text="Backgrounds: (various background colors)" Margin="0,0,0,-5" />
+			<StackLayout Padding="0" Spacing="5">
+				<Button Text="Transparent" BackgroundColor="Transparent" />
+				<Button Text="Red" BackgroundColor="Red" />
+				<Button Text="Black" BackgroundColor="Black" />
+				<Button Text="Red, Image" BackgroundColor="Red" Image="bank.png" />
+			</StackLayout>
+
+			<Label Text="Corners: (various corner radii)" Margin="0,0,0,-5" />
+			<StackLayout Padding="0" Spacing="5">
+				<Button Text="Radius: 0" CornerRadius="0" />
+				<Button Text="Radius: 5" CornerRadius="5" />
+				<Button Text="Radius: 15" CornerRadius="15" />
+				<Button Text="Radius: 15, Image" CornerRadius="15" Image="bank.png" />
+				<Button Text="Radius: 15, Width: 5" CornerRadius="15" BorderWidth="5" BorderColor="Red" />
+			</StackLayout>
+
+			<Label Text="Border Widths: (various border widths, red color)" Margin="0,0,0,-5" />
+			<StackLayout Padding="0" Spacing="5">
+				<Button Text="Width: 5, Color: &lt;none&gt;" BorderWidth="5" />
+				<Button Text="Width: 0" BorderWidth="0" BorderColor="Red" />
+				<Button Text="Width: 1" BorderWidth="1" BorderColor="Red" />
+				<Button Text="Width: 15" BorderWidth="15" BorderColor="Red" />
+				<Button Text="Width: 15, Image" BorderWidth="15" BorderColor="Red" Image="bank.png" />
+			</StackLayout>
+
+			<Label Text="Border Colors: (various border colors, width 5)" Margin="0,0,0,-5" />
+			<StackLayout Padding="0" Spacing="5">
+				<Button Text="Red, Width: &lt;none&gt;" BorderColor="Red" />
+				<Button Text="Transparent" BorderColor="Transparent" BorderWidth="5" />
+				<Button Text="Red" BorderColor="Red" BorderWidth="5" />
+				<Button Text="Black" BorderColor="Black" BorderWidth="5" />
+				<Button Text="Red, Image" BorderColor="Red" BorderWidth="5" Image="bank.png" />
+			</StackLayout>
+
+			<Label Text="Circles:" Margin="0,5,0,0" FontAttributes="Bold" />
+
+			<Label Text="Defaults: (no padding/shadow)" Margin="0,0,0,-5" />
+			<StackLayout Padding="0" Spacing="5">
+				<StackLayout Padding="0" Spacing="5" Orientation="Horizontal">
+					<Button Text="Square" WidthRequest="100" HeightRequest="100" />
+					<Button Text="Circle" CornerRadius="50" WidthRequest="100" HeightRequest="100" />
+				</StackLayout>
+				<StackLayout Padding="0" Spacing="5" Orientation="Horizontal">
+					<Button Text="Red Square" BackgroundColor="Red" WidthRequest="100" HeightRequest="100" />
+					<Button Text="Red Circle" BackgroundColor="Red" CornerRadius="50" WidthRequest="100" HeightRequest="100" />
+				</StackLayout>
+				<StackLayout Padding="0" Spacing="5" Orientation="Horizontal">
+					<Button Text="Image Square" BackgroundColor="Red" Image="bank.png" WidthRequest="100" HeightRequest="100" />
+					<Button Text="Image Circle" BackgroundColor="Red" CornerRadius="50" Image="bank.png" WidthRequest="100" HeightRequest="100" />
+				</StackLayout>
+			</StackLayout>
+
+			<Label Text="Specifics: (with padding/shadow)" Margin="0,0,0,-5" />
+			<StackLayout Padding="0" Spacing="5">
+				<StackLayout Padding="0" Spacing="5" Orientation="Horizontal">
+					<Button Text="Square" WidthRequest="100" HeightRequest="100" android:Button.UseDefaultPadding="true" android:Button.UseDefaultShadow="true" />
+					<Button Text="Circle" CornerRadius="50" WidthRequest="100" HeightRequest="100" android:Button.UseDefaultPadding="true" android:Button.UseDefaultShadow="true" />
+				</StackLayout>
+				<StackLayout Padding="0" Spacing="5" Orientation="Horizontal">
+					<Button Text="Red Square" BackgroundColor="Red" WidthRequest="100" HeightRequest="100" android:Button.UseDefaultPadding="true" android:Button.UseDefaultShadow="true" />
+					<Button Text="Red Circle" BackgroundColor="Red" CornerRadius="50" WidthRequest="100" HeightRequest="100" android:Button.UseDefaultPadding="true" android:Button.UseDefaultShadow="true" />
+				</StackLayout>
+				<StackLayout Padding="0" Spacing="5" Orientation="Horizontal">
+					<Button Text="Image Square" BackgroundColor="Red" Image="bank.png" WidthRequest="100" HeightRequest="100" android:Button.UseDefaultPadding="true" android:Button.UseDefaultShadow="true" />
+					<Button Text="Image Circle" BackgroundColor="Red" CornerRadius="50" Image="bank.png" WidthRequest="100" HeightRequest="100" android:Button.UseDefaultPadding="true" android:Button.UseDefaultShadow="true" />
+				</StackLayout>
+			</StackLayout>
+
+		</StackLayout>
+	</ScrollView>
+
+</ContentPage>

Xamarin.Forms.Controls/GalleryPages/ButtonBorderBackgroundGalleryPage.xaml.cs

@@ -0,0 +1,56 @@
+using System;
+using Xamarin.Forms.Xaml;
+
+namespace Xamarin.Forms.Controls
+{
+	[XamlCompilation(XamlCompilationOptions.Compile)]
+	public partial class ButtonBorderBackgroundGalleryPage : ContentPage
+	{
+		public ButtonBorderBackgroundGalleryPage()
+			: this(VisualMarker.MatchParent)
+		{
+		}
+
+		public ButtonBorderBackgroundGalleryPage(IVisual visual)
+		{
+			InitializeComponent();
+			Visual = visual;
+
+			// buttons are transparent on default iOS, so we have to give them something
+			if (Device.RuntimePlatform == Device.iOS)
+			{
+				if (Visual != VisualMarker.Material)
+				{
+					SetBackground(Content);
+
+					void SetBackground(View view)
+					{
+						if (view is Button button && !button.IsSet(Button.BackgroundColorProperty))
+							view.BackgroundColor = Color.LightGray;
+
+						if (view is Layout layout)
+						{
+							foreach (var child in layout.Children)
+							{
+								if (child is View childView)
+									SetBackground(childView);
+							}
+						}
+					}
+				}
+			}
+		}
+
+		void HandleChecks_Clicked(object sender, System.EventArgs e)
+		{
+			var thisButton = sender as Button;
+			var layout = thisButton.Parent as Layout;
+			foreach (var child in layout.Children)
+			{
+				var button = child as Button;
+
+				Console.WriteLine($"{button.Text} => {button.Bounds}");
+			}
+		}
+	}
+}

Xamarin.Forms.Controls/GalleryPages/ButtonLayoutGalleryPage.xaml

@@ -0,0 +1,129 @@
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+			 xmlns:local="clr-namespace:Xamarin.Forms.Controls"
+			 x:Class="Xamarin.Forms.Controls.ButtonLayoutGalleryPage"
+			 Title="Button Layout">
+
+	<ContentPage.Resources>
+		<ResourceDictionary>
+			<local:ThicknessConverter x:Key="ThicknessConverter" />
+			<Style TargetType="Label">
+				<Setter Property="FontSize" Value="12" />
+			</Style>
+		</ResourceDictionary>
+	</ContentPage.Resources>
+
+	<ScrollView>
+		<StackLayout Padding="20" Spacing="10">
+
+			<Label Text="Buttons:" Margin="0,5,0,0" FontAttributes="Bold" />
+
+			<Label Text="Defaults:" Margin="0,0,0,-5" />
+			<StackLayout Orientation="Vertical" Padding="0" Spacing="5">
+				<Button />
+				<Button Text="Some Text" />
+				<Button Image="bank.png" />
+				<Button Text="Some Text" Image="bank.png" />
+			</StackLayout>
+
+			<Label Text="Autosized:" Margin="0,0,0,-5" />
+			<StackLayout Orientation="Horizontal" Padding="0" Spacing="5">
+				<Button x:Name="autosizedButton" Text="{Binding ButtonText}" Image="{Binding ButtonImage}" Padding="{Binding ButtonPadding}" ContentLayout="{Binding ButtonImageLayout}" FontSize="{Binding ButtonFontSize}" />
+			</StackLayout>
+
+			<Label Text="Explicit Size:" Margin="0,0,0,-5" />
+			<Grid Padding="0" RowSpacing="5" ColumnSpacing="5">
+				<Grid.RowDefinitions>
+					<RowDefinition Height="*" />
+					<RowDefinition Height="*" />
+				</Grid.RowDefinitions>
+				<Grid.ColumnDefinitions>
+					<ColumnDefinition Width="*" />
+					<ColumnDefinition Width="*" />
+				</Grid.ColumnDefinitions>
+
+				<Button
+					x:Name="explicitButton" Text="{Binding ButtonText}" Image="{Binding ButtonImage}" Padding="{Binding ButtonPadding}" ContentLayout="{Binding ButtonImageLayout}" FontSize="{Binding ButtonFontSize}"
+					WidthRequest="120" HeightRequest="60" HorizontalOptions="Start" VerticalOptions="Start" />
+				<Button
+					x:Name="explicitWidthButton" Text="{Binding ButtonText}" Image="{Binding ButtonImage}" Padding="{Binding ButtonPadding}" ContentLayout="{Binding ButtonImageLayout}" FontSize="{Binding ButtonFontSize}"
+					Grid.Column="1" Grid.RowSpan="2" WidthRequest="120" HorizontalOptions="Start" VerticalOptions="Start" />
+				<Button
+					x:Name="explicitHeightButton" Text="{Binding ButtonText}" Image="{Binding ButtonImage}" Padding="{Binding ButtonPadding}" ContentLayout="{Binding ButtonImageLayout}" FontSize="{Binding ButtonFontSize}"
+					Grid.Row="1" Grid.ColumnSpan="2" HeightRequest="60" HorizontalOptions="Start" VerticalOptions="Start" />
+			</Grid>
+
+			<Label Text="Stretched:" Margin="0,0,0,-5" />
+			<StackLayout Orientation="Vertical" Padding="0" Spacing="5">
+				<Button x:Name="stretchedButton" Text="{Binding ButtonText}" Image="{Binding ButtonImage}" Padding="{Binding ButtonPadding}" ContentLayout="{Binding ButtonImageLayout}" FontSize="{Binding ButtonFontSize}" />
+			</StackLayout>
+
+			<Label Text="Options:" Margin="0,5,0,0" FontAttributes="Bold" />
+
+			<StackLayout Orientation="Horizontal" Padding="0" Spacing="5" HorizontalOptions="FillAndExpand">
+
+				<StackLayout Orientation="Vertical" Padding="0" Spacing="0" HorizontalOptions="FillAndExpand">
+					<Label Text="Text:" />
+					<Entry Text="{Binding ButtonText}" HorizontalOptions="FillAndExpand" />
+				</StackLayout>
+
+				<StackLayout Orientation="Vertical" Padding="0" Spacing="0">
+					<Label Text="Text Size:" />
+					<StackLayout Orientation="Horizontal" Padding="0" Spacing="5">
+						<Stepper Minimum="-1" Maximum="100" Value="{Binding ButtonFontSize}" VerticalOptions="Center" HorizontalOptions="FillAndExpand" />
+						<Label Text="{Binding ButtonFontSize}" VerticalOptions="Center" />
+					</StackLayout>
+				</StackLayout>
+
+			</StackLayout>
+
+			<StackLayout Orientation="Horizontal" Padding="0" Spacing="5" HorizontalOptions="FillAndExpand">
+
+				<StackLayout Orientation="Vertical" Padding="0" Spacing="0" HorizontalOptions="FillAndExpand">
+					<Label Text="Image:" />
+					<Picker ItemsSource="{Binding ButtonImages}" SelectedItem="{Binding ButtonImage}" HorizontalOptions="FillAndExpand" />
+				</StackLayout>
+
+			</StackLayout>
+
+			<StackLayout Orientation="Horizontal" Padding="0" Spacing="5" HorizontalOptions="FillAndExpand">
+
+				<StackLayout Orientation="Vertical" Padding="0" Spacing="0" HorizontalOptions="FillAndExpand">
+					<Label Text="Content Position:" />
+					<Picker ItemsSource="{Binding ButtonImagePositions}" SelectedItem="{Binding ButtonImagePosition}" HorizontalOptions="FillAndExpand" />
+				</StackLayout>
+
+				<StackLayout Orientation="Vertical" Padding="0" Spacing="0">
+					<Label Text="Content Spacing:" />
+					<StackLayout Orientation="Horizontal" Padding="0" Spacing="5">
+						<Stepper Minimum="-100" Maximum="100" Value="{Binding ButtonImageSpacing}" VerticalOptions="Center" HorizontalOptions="FillAndExpand" />
+						<Label Text="{Binding ButtonImageSpacing}" VerticalOptions="Center" />
+					</StackLayout>
+				</StackLayout>
+
+			</StackLayout>
+
+			<StackLayout Orientation="Horizontal" Padding="0" Spacing="5" HorizontalOptions="FillAndExpand">
+
+				<StackLayout Orientation="Vertical" Padding="0" Spacing="0" HorizontalOptions="FillAndExpand">
+					<Label Text="Padding:" />
+					<Entry Text="{Binding ButtonPadding, Converter={StaticResource ThicknessConverter}, Mode=OneWayToSource, TargetNullValue='0, 0, 0, 0'}" HorizontalOptions="FillAndExpand" />
+				</StackLayout>
+
+				<StackLayout Orientation="Vertical" Padding="0" Spacing="0">
+					<Label Text="Border Width:" />
+					<StackLayout Orientation="Horizontal" Padding="0" Spacing="5">
+						<Stepper Minimum="-1" Maximum="100" Value="{Binding ButtonBorderWidth}" VerticalOptions="Center" HorizontalOptions="FillAndExpand" />
+						<Label Text="{Binding ButtonBorderWidth}" VerticalOptions="Center" />
+					</StackLayout>
+				</StackLayout>
+
+			</StackLayout>
+
+			<Label Text="Use Default Shadow/Padding: (Android only)" Margin="0,0,0,-5" />
+			<Picker ItemsSource="{Binding ButtonFlags}" SelectedIndexChanged="OnButtonDefaultShadowChanged" />
+
+		</StackLayout>
+	</ScrollView>
+
+</ContentPage>