Add popup sizing page to cover more test scenarios (#1770)

* Initial work

* Add a CollectionView sample

* Remove try/catch block

* Update BaseGalleryPage.cs

* Update Formatting

* `dotnet format`

---------

Co-authored-by: Shaun Lawrence <17139988+bijington@users.noreply.github.com>
Co-authored-by: Brandon Minnick <13558917+brminnick@users.noreply.github.com>

samples/CommunityToolkit.Maui.Sample/AppShell.xaml.cs

@@ -129,6 +129,7 @@ public partial class AppShell : Shell
 		CreateViewModelMapping<PopupAnchorPage, PopupAnchorViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<PopupLayoutAlignmentPage, PopupLayoutAlignmentViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<PopupPositionPage, PopupPositionViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
+		CreateViewModelMapping<PopupSizingIssuesPage, PopupSizingIssuesViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<SemanticOrderViewPage, SemanticOrderViewPageViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<ShowPopupInOnAppearingPage, ShowPopupInOnAppearingPageViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<StylePopupPage, StylePopupViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),

samples/CommunityToolkit.Maui.Sample/MauiProgram.cs

@@ -199,6 +199,7 @@ static void RegisterViewsAndViewModels(in IServiceCollection services)
 		services.AddTransientWithShellRoute<SemanticOrderViewPage, SemanticOrderViewPageViewModel>();
 		services.AddTransientWithShellRoute<ShowPopupInOnAppearingPage, ShowPopupInOnAppearingPageViewModel>();
 		services.AddTransientWithShellRoute<StylePopupPage, StylePopupViewModel>();
+		services.AddTransientWithShellRoute<PopupSizingIssuesPage, PopupSizingIssuesViewModel>();
 
 		// Add Popups
 		services.AddTransientPopup<CsharpBindingPopup, CsharpBindingPopupViewModel>();

samples/CommunityToolkit.Maui.Sample/Pages/Alerts/AlertsGalleryPage.cs

@@ -2,10 +2,7 @@
 
 namespace CommunityToolkit.Maui.Sample.Pages.Alerts;
 
-public class AlertsGalleryPage : BaseGalleryPage<AlertsGalleryViewModel>
+public class AlertsGalleryPage(IDeviceInfo deviceInfo, AlertsGalleryViewModel alertsGalleryViewModel) : BaseGalleryPage<AlertsGalleryViewModel>("Alerts", deviceInfo, alertsGalleryViewModel)
 {
-	public AlertsGalleryPage(IDeviceInfo deviceInfo, AlertsGalleryViewModel alertsGalleryViewModel)
-		: base("Alerts", deviceInfo, alertsGalleryViewModel)
-	{
-	}
+
 }

samples/CommunityToolkit.Maui.Sample/Pages/Base/BaseGalleryPage.cs

@@ -17,13 +17,13 @@ protected BaseGalleryPage(string title, IDeviceInfo deviceInfo, TViewModel viewM
 		{
 			SelectionMode = SelectionMode.Single,
 		}.ItemTemplate(new GalleryDataTemplate())
-		 .Bind(ItemsView.ItemsSourceProperty,
-					static (BaseGalleryViewModel vm) => vm.Items,
-					mode: BindingMode.OneTime)
-		 .Invoke(collectionView => collectionView.SelectionChanged += HandleSelectionChanged);
+			.Bind(ItemsView.ItemsSourceProperty,
+				static (BaseGalleryViewModel vm) => vm.Items,
+				mode: BindingMode.OneTime)
+			.Invoke(static collectionView => collectionView.SelectionChanged += HandleSelectionChanged);
 	}
 
-	async void HandleSelectionChanged(object? sender, SelectionChangedEventArgs e)
+	static async void HandleSelectionChanged(object? sender, SelectionChangedEventArgs e)
 	{
 		ArgumentNullException.ThrowIfNull(sender);
 
@@ -36,12 +36,8 @@ async void HandleSelectionChanged(object? sender, SelectionChangedEventArgs e)
 		}
 	}
 
-	class GalleryDataTemplate : DataTemplate
+	sealed class GalleryDataTemplate() : DataTemplate(CreateDataTemplate)
 	{
-		public GalleryDataTemplate() : base(CreateDataTemplate)
-		{
-
-		}
 
 		enum Row { TopPadding, Content, BottomPadding }
 		enum Column { LeftPadding, Content, RightPadding }
@@ -60,11 +56,11 @@ static Grid CreateDataTemplate() => new()
 
 			Children =
 			{
-				new Card().Row(Row.Content).Column(Column.Content).DynamicResource(Border.StyleProperty, "BorderGalleryCard")
+				new Card().Row(Row.Content).Column(Column.Content).DynamicResource(StyleProperty, "BorderGalleryCard")
 			}
 		};
 
-		class Card : Border
+		sealed class Card : Border
 		{
 			public Card()
 			{
@@ -85,15 +81,19 @@ public Card()
 						new Label()
 							.Row(CardRow.Title)
 							.Bind(Label.TextProperty,
-									static (SectionModel section) => section.Title,
-									mode: BindingMode.OneTime)
+								static (SectionModel section) => section.Title,
+								mode: BindingMode.OneTime)
 							.DynamicResource(Label.StyleProperty, "LabelSectionTitle"),
 
-						new Label { MaxLines = 4, LineBreakMode = LineBreakMode.WordWrap }
+						new Label
+							{
+								MaxLines = 4,
+								LineBreakMode = LineBreakMode.WordWrap
+							}
 							.Row(CardRow.Description).TextStart().TextTop()
 							.Bind(Label.TextProperty,
-									static (SectionModel section) => section.Description,
-									mode: BindingMode.OneTime)
+								static (SectionModel section) => section.Description,
+								mode: BindingMode.OneTime)
 							.DynamicResource(Label.StyleProperty, "LabelSectionText")
 					}
 				};

samples/CommunityToolkit.Maui.Sample/Pages/Converters/ConvertersGalleryPage.cs

@@ -2,10 +2,7 @@
 
 namespace CommunityToolkit.Maui.Sample.Pages.Converters;
 
-public class ConvertersGalleryPage : BaseGalleryPage<ConvertersGalleryViewModel>
+public class ConvertersGalleryPage(IDeviceInfo deviceInfo, ConvertersGalleryViewModel convertersGalleryViewModel) : BaseGalleryPage<ConvertersGalleryViewModel>("Converters", deviceInfo, convertersGalleryViewModel)
 {
-	public ConvertersGalleryPage(IDeviceInfo deviceInfo, ConvertersGalleryViewModel convertersGalleryViewModel)
-		: base("Converters", deviceInfo, convertersGalleryViewModel)
-	{
-	}
+
 }

samples/CommunityToolkit.Maui.Sample/Pages/Essentials/EssentialsGalleryPage.cs

@@ -2,10 +2,7 @@
 
 namespace CommunityToolkit.Maui.Sample.Pages.Essentials;
 
-public class EssentialsGalleryPage : BaseGalleryPage<EssentialsGalleryViewModel>
+public class EssentialsGalleryPage(IDeviceInfo deviceInfo, EssentialsGalleryViewModel essentialsGalleryViewModel) : BaseGalleryPage<EssentialsGalleryViewModel>("Essentials", deviceInfo, essentialsGalleryViewModel)
 {
-	public EssentialsGalleryPage(IDeviceInfo deviceInfo, EssentialsGalleryViewModel essentialsGalleryViewModel)
-		: base("Essentials", deviceInfo, essentialsGalleryViewModel)
-	{
-	}
+
 }

samples/CommunityToolkit.Maui.Sample/Pages/Extensions/ExtensionsGalleryPage.cs

@@ -2,10 +2,7 @@
 
 namespace CommunityToolkit.Maui.Sample.Pages.Extensions;
 
-public class ExtensionsGalleryPage : BaseGalleryPage<ExtensionsGalleryViewModel>
+public class ExtensionsGalleryPage(IDeviceInfo deviceInfo, ExtensionsGalleryViewModel extensionsGalleryViewModel) : BaseGalleryPage<ExtensionsGalleryViewModel>("Extensions", deviceInfo, extensionsGalleryViewModel)
 {
-	public ExtensionsGalleryPage(IDeviceInfo deviceInfo, ExtensionsGalleryViewModel extensionsGalleryViewModel)
-		: base("Extensions", deviceInfo, extensionsGalleryViewModel)
-	{
-	}
+
 }

samples/CommunityToolkit.Maui.Sample/Pages/ImageSources/ImageSourcesGalleryPage.cs

@@ -2,10 +2,7 @@
 
 namespace CommunityToolkit.Maui.Sample.Pages.ImageSources;
 
-public class ImageSourcesGalleryPage : BaseGalleryPage<ImageSourcesGalleryViewModel>
+public class ImageSourcesGalleryPage(IDeviceInfo deviceInfo, ImageSourcesGalleryViewModel imageSourcesGalleryViewModel) : BaseGalleryPage<ImageSourcesGalleryViewModel>("Image Sources", deviceInfo, imageSourcesGalleryViewModel)
 {
-	public ImageSourcesGalleryPage(IDeviceInfo deviceInfo, ImageSourcesGalleryViewModel imageSourcesGalleryViewModel)
-		: base("Image Sources", deviceInfo, imageSourcesGalleryViewModel)
-	{
-	}
+
 }

samples/CommunityToolkit.Maui.Sample/Pages/Layouts/LayoutsGalleryPage.cs

@@ -2,10 +2,7 @@
 
 namespace CommunityToolkit.Maui.Sample.Pages.Layouts;
 
-public class LayoutsGalleryPage : BaseGalleryPage<LayoutsGalleryViewModel>
+public class LayoutsGalleryPage(IDeviceInfo deviceInfo, LayoutsGalleryViewModel layoutGalleryViewModel) : BaseGalleryPage<LayoutsGalleryViewModel>("Layouts", deviceInfo, layoutGalleryViewModel)
 {
-	public LayoutsGalleryPage(IDeviceInfo deviceInfo, LayoutsGalleryViewModel layoutGalleryViewModel)
-		: base("Layouts", deviceInfo, layoutGalleryViewModel)
-	{
-	}
+
 }

samples/CommunityToolkit.Maui.Sample/Pages/Views/Popup/PopupSizingIssuesPage.xaml

@@ -0,0 +1,31 @@
+<pages:BasePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
+                xmlns:viewModels="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Views"
+                x:Class="CommunityToolkit.Maui.Sample.Pages.Views.PopupSizingIssuesPage"
+                Title="MultiplePopupPage"
+                x:TypeArguments="viewModels:PopupSizingIssuesViewModel"
+                x:DataType="viewModels:PopupSizingIssuesViewModel"
+                x:Name="Self">
+
+    <ContentPage.Content>
+        <ScrollView>
+            <VerticalStackLayout Spacing="12">
+                <Label Text="Select a container to show a popup" />
+                <Picker 
+                    ItemsSource="{Binding Containers}" 
+                    SelectedItem="{Binding SelectedContainer}" 
+                    ItemDisplayBinding="{Binding Name}"/>
+
+                <Label Text="Padding" />
+                <Entry Text="{Binding Padding}" />
+
+                <Label Text="Margin" />
+                <Entry Text="{Binding Margin}" />
+
+                <Button Text="Show Popup" Command="{Binding ShowPopupCommand}" CommandParameter="{Binding Source={x:Reference Self}}" />
+            </VerticalStackLayout>
+        </ScrollView>
+    </ContentPage.Content>
+
+</pages:BasePage>

samples/CommunityToolkit.Maui.Sample/Pages/Views/Popup/PopupSizingIssuesPage.xaml.cs

@@ -0,0 +1,12 @@
+using CommunityToolkit.Maui.Sample.ViewModels.Views;
+
+namespace CommunityToolkit.Maui.Sample.Pages.Views;
+
+public partial class PopupSizingIssuesPage : BasePage<PopupSizingIssuesViewModel>
+{
+	public PopupSizingIssuesPage(PopupSizingIssuesViewModel popupSizingIssuesViewModel)
+		: base(popupSizingIssuesViewModel)
+	{
+		InitializeComponent();
+	}
+}

samples/CommunityToolkit.Maui.Sample/Pages/Views/ViewsGalleryPage.cs

@@ -2,10 +2,7 @@
 
 namespace CommunityToolkit.Maui.Sample.Pages.Views;
 
-public class ViewsGalleryPage : BaseGalleryPage<ViewsGalleryViewModel>
+public class ViewsGalleryPage(IDeviceInfo deviceInfo, ViewsGalleryViewModel viewsGalleryViewModel) : BaseGalleryPage<ViewsGalleryViewModel>("Views", deviceInfo, viewsGalleryViewModel)
 {
-	public ViewsGalleryPage(IDeviceInfo deviceInfo, ViewsGalleryViewModel viewsGalleryViewModel)
-		: base("Views", deviceInfo, viewsGalleryViewModel)
-	{
-	}
+
 }

samples/CommunityToolkit.Maui.Sample/ViewModels/Alerts/AlertsGalleryViewModel.cs

@@ -2,14 +2,8 @@
 
 namespace CommunityToolkit.Maui.Sample.ViewModels.Alerts;
 
-public class AlertsGalleryViewModel : BaseGalleryViewModel
-{
-	public AlertsGalleryViewModel()
-		: base(new[]
-		{
-			SectionModel.Create<SnackbarViewModel>("Snackbar", "Show Snackbar"),
-			SectionModel.Create<ToastViewModel>("Toast", "Show Toast")
-		})
-	{
-	}
-}
+public class AlertsGalleryViewModel() : BaseGalleryViewModel(
+[
+	SectionModel.Create<SnackbarViewModel>("Snackbar", "Show Snackbar"),
+	SectionModel.Create<ToastViewModel>("Toast", "Show Toast")
+]);

samples/CommunityToolkit.Maui.Sample/ViewModels/Behaviors/BehaviorsGalleryViewModel.cs

@@ -3,62 +3,23 @@
 
 namespace CommunityToolkit.Maui.Sample.ViewModels.Behaviors;
 
-public class BehaviorsGalleryViewModel : BaseGalleryViewModel
-{
-	public BehaviorsGalleryViewModel()
-		: base(new[]
-		{
-			SectionModel.Create<EventToCommandBehaviorViewModel>(nameof(EventToCommandBehavior),
-				"Turns any event into a command that can be bound to"),
-
-			SectionModel.Create<MaskedBehaviorViewModel>(nameof(MaskedBehavior),
-				"Masked text in entry with specific pattern"),
-
-			SectionModel.Create<UserStoppedTypingBehaviorViewModel>(nameof(UserStoppedTypingBehavior),
-				"This behavior waits for the user to stop typing and then executes a Command"),
-
-			SectionModel.Create<MaxLengthReachedBehaviorViewModel>(nameof(MaxLengthReachedBehavior),
-				"This behavior invokes an EventHandler and executes a Command when the MaxLength of an InputView has been reached"),
-
-			SectionModel.Create<ProgressBarAnimationBehaviorViewModel>(nameof(ProgressBarAnimationBehavior),
-				"Animate the progress for the ProgressBar"),
-
-			SectionModel.Create<SetFocusOnEntryCompletedBehaviorViewModel>(nameof(SetFocusOnEntryCompletedBehavior),
-				"Set focus to another element when an entry is completed"),
-
-			SectionModel.Create<CharactersValidationBehaviorViewModel>(nameof(CharactersValidationBehavior),
-				"Changes an Entry's text color when an invalid string is provided."),
-
-			SectionModel.Create<TextValidationBehaviorViewModel>(nameof(TextValidationBehavior),
-				"Changes an Entry's text color when text validation is failed (based on regex)"),
-
-			SectionModel.Create<MultiValidationBehaviorViewModel>(nameof(MultiValidationBehavior),
-				"Combines multiple validation behavior"),
-
-			SectionModel.Create<UriValidationBehaviorViewModel>(nameof(UriValidationBehavior),
-				"Changes an Entry's text color when an invalid URI is provided"),
-
-			SectionModel.Create<RequiredStringValidationBehaviorViewModel>(nameof(RequiredStringValidationBehavior),
-				"Changes an Entry's text color when a required string is not provided"),
-
-			SectionModel.Create<NumericValidationBehaviorViewModel>(nameof(NumericValidationBehavior),
-				"Changes an Entry's text color when an invalid number is provided"),
-
-			SectionModel.Create<EmailValidationBehaviorViewModel>(nameof(EmailValidationBehavior),
-				"Changes an Entry's text color when an invalid e-mail address is provided"),
-
-			SectionModel.Create<AnimationBehaviorViewModel>(nameof(AnimationBehavior),
-				"Perform animation when a specified UI element event is triggered"),
-
-			SectionModel.Create<SelectAllTextBehaviorViewModel>(nameof(SelectAllTextBehavior),
-				"Select all text inside the Entry or Editor control."),
-
-			SectionModel.Create<IconTintColorBehaviorViewModel>(nameof(IconTintColorBehavior),
-				"Tint an icon with the selected color."),
-
-			SectionModel.Create<StatusBarBehaviorViewModel>(nameof(StatusBarBehavior),
-				"Change the Status Bar color."),
-		})
-	{
-	}
-}
+public class BehaviorsGalleryViewModel() : BaseGalleryViewModel(
+[
+	SectionModel.Create<EventToCommandBehaviorViewModel>(nameof(EventToCommandBehavior), "Turns any event into a command that can be bound to"),
+	SectionModel.Create<MaskedBehaviorViewModel>(nameof(MaskedBehavior), "Masked text in entry with specific pattern"),
+	SectionModel.Create<UserStoppedTypingBehaviorViewModel>(nameof(UserStoppedTypingBehavior), "This behavior waits for the user to stop typing and then executes a Command"),
+	SectionModel.Create<MaxLengthReachedBehaviorViewModel>(nameof(MaxLengthReachedBehavior), "This behavior invokes an EventHandler and executes a Command when the MaxLength of an InputView has been reached"),
+	SectionModel.Create<ProgressBarAnimationBehaviorViewModel>(nameof(ProgressBarAnimationBehavior), "Animate the progress for the ProgressBar"),
+	SectionModel.Create<SetFocusOnEntryCompletedBehaviorViewModel>(nameof(SetFocusOnEntryCompletedBehavior), "Set focus to another element when an entry is completed"),
+	SectionModel.Create<CharactersValidationBehaviorViewModel>(nameof(CharactersValidationBehavior), "Changes an Entry's text color when an invalid string is provided."),
+	SectionModel.Create<TextValidationBehaviorViewModel>(nameof(TextValidationBehavior), "Changes an Entry's text color when text validation is failed (based on regex)"),
+	SectionModel.Create<MultiValidationBehaviorViewModel>(nameof(MultiValidationBehavior), "Combines multiple validation behavior"),
+	SectionModel.Create<UriValidationBehaviorViewModel>(nameof(UriValidationBehavior), "Changes an Entry's text color when an invalid URI is provided"),
+	SectionModel.Create<RequiredStringValidationBehaviorViewModel>(nameof(RequiredStringValidationBehavior), "Changes an Entry's text color when a required string is not provided"),
+	SectionModel.Create<NumericValidationBehaviorViewModel>(nameof(NumericValidationBehavior), "Changes an Entry's text color when an invalid number is provided"),
+	SectionModel.Create<EmailValidationBehaviorViewModel>(nameof(EmailValidationBehavior), "Changes an Entry's text color when an invalid e-mail address is provided"),
+	SectionModel.Create<AnimationBehaviorViewModel>(nameof(AnimationBehavior), "Perform animation when a specified UI element event is triggered"),
+	SectionModel.Create<SelectAllTextBehaviorViewModel>(nameof(SelectAllTextBehavior), "Select all text inside the Entry or Editor control."),
+	SectionModel.Create<IconTintColorBehaviorViewModel>(nameof(IconTintColorBehavior), "Tint an icon with the selected color."),
+	SectionModel.Create<StatusBarBehaviorViewModel>(nameof(StatusBarBehavior), "Change the Status Bar color.")
+]);