Popup V2

samples/CommunityToolkit.Maui.Sample/App.xaml

@@ -10,42 +10,34 @@
             </ResourceDictionary.MergedDictionaries>
 
             <Style TargetType="{x:Type popups:ImplicitStylePopup}">
-                <Setter Property="Size" Value="100,100" />
-                <Setter Property="Color" Value="Red" />
-                <Setter Property="HorizontalOptions" Value="Start" />
-                <Setter Property="VerticalOptions" Value="Start" />
-                <Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="True" />
+                <Setter Property="WidthRequest" Value="100" />
+                <Setter Property="HeightRequest" Value="100" />
+                <Setter Property="BackgroundColor" Value="Red" />
             </Style>
 
             <Style x:Key="ExplicitPopupStyle" TargetType="{x:Type popups:ExplicitStylePopup}">
-                <Setter Property="Size" Value="200,100" />
-                <Setter Property="Color" Value="Yellow" />
-                <Setter Property="HorizontalOptions" Value="End" />
-                <Setter Property="VerticalOptions" Value="Start" />
-                <Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="True" />
+                <Setter Property="WidthRequest" Value="200" />
+                <Setter Property="HeightRequest" Value="100" />
+                <Setter Property="BackgroundColor" Value="Yellow" />
             </Style>
 
             <Style x:Key="BasePopupStyle" TargetType="{x:Type popups:StyleInheritancePopup}">
-                <Setter Property="Size" Value="200,200" />
+                <Setter Property="WidthRequest" Value="200" />
+                <Setter Property="HeightRequest" Value="200" />
             </Style>
             <Style x:Key="InheritancePopupStyle" TargetType="{x:Type popups:StyleInheritancePopup}" BasedOn="{StaticResource BasePopupStyle}">
-                <Setter Property="Color" Value="SkyBlue" />
-                <Setter Property="HorizontalOptions" Value="End" />
-                <Setter Property="VerticalOptions" Value="End" />
-                <Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="True" />
+                <Setter Property="BackgroundColor" Value="SkyBlue" />
             </Style>
 
             <Style x:Key="DynamicBasePopupStyle" TargetType="{x:Type popups:DynamicStyleInheritancePopup}">
-                <Setter Property="Size" Value="150,150" />
+                <Setter Property="WidthRequest" Value="150" />
+                <Setter Property="HeightRequest" Value="150" />
             </Style>
             <Style x:Key="DynamicInheritancePopupStyle1" TargetType="{x:Type popups:DynamicStyleInheritancePopup}" BasedOn="{StaticResource DynamicBasePopupStyle}">
-                <Setter Property="Color" Value="Purple" />
-                <Setter Property="VerticalOptions" Value="End" />
+                <Setter Property="BackgroundColor" Value="Purple" />
             </Style>
             <Style x:Key="DynamicInheritancePopupStyle2" TargetType="{x:Type popups:DynamicStyleInheritancePopup}" BaseResourceKey="DynamicInheritancePopupStyle1">
-                <Setter Property="Color" Value="Orange" />
-                <Setter Property="HorizontalOptions" Value="End" />
-                <Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="True" />
+                <Setter Property="BackgroundColor" Value="Orange" />
             </Style>
 
         </ResourceDictionary>

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

@@ -121,7 +121,6 @@ public partial class AppShell : Shell
 		CreateViewModelMapping<AvatarViewSizesPage, AvatarViewSizesViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<BasicMapsPage, BasicMapsViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<CameraViewPage, CameraViewViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
-		CreateViewModelMapping<CustomSizeAndPositionPopupPage, CustomSizeAndPositionPopupViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<DrawingViewPage, DrawingViewViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<ExpanderPage, ExpanderViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<LazyViewPage, LazyViewViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
@@ -130,12 +129,13 @@ public partial class AppShell : Shell
 		CreateViewModelMapping<MediaElementCarouselViewPage, MediaElementCarouselViewViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<MediaElementCollectionViewPage, MediaElementCollectionViewViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<MediaElementMultipleWindowsPage, MediaElementMultipleWindowsViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
+		CreateViewModelMapping<SemanticOrderViewPage, SemanticOrderViewPageViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<MultiplePopupPage, MultiplePopupViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
+		CreateViewModelMapping<CustomSizeAndPositionPopupPage, CustomSizeAndPositionPopupViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		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

@@ -122,7 +122,6 @@ public static MauiApp CreateMauiApp()
 						.AddStandardResilienceHandler(static options => options.Retry = new MobileHttpRetryStrategyOptions());
 
 		builder.Services.AddSingleton<AppShell>();
-		builder.Services.AddSingleton<PopupSizeConstants>();
 
 		RegisterViewsAndViewModels(builder.Services);
 		RegisterEssentials(builder.Services);
@@ -267,9 +266,27 @@ static void RegisterViewsAndViewModels(in IServiceCollection services)
 		services.AddTransientWithShellRoute<PopupSizingIssuesPage, PopupSizingIssuesViewModel>();
 
 		// Add Popups
-		services.AddTransientPopup<CsharpBindingPopup, CsharpBindingPopupViewModel>();
-		services.AddTransientPopup<UpdatingPopup, UpdatingPopupViewModel>();
-		services.AddTransientPopup<XamlBindingPopup, XamlBindingPopupViewModel>();
+		services.AddPopup<ApplyToDerivedTypesPopup>();
+		services.AddPopup<ButtonPopup>();
+		services.AddPopup<CsharpBindingPopup, CsharpBindingPopupViewModel>();
+		services.AddPopup<DynamicStyleInheritancePopup>();
+		services.AddPopup<DynamicStylePopup>();
+		services.AddPopup<ExplicitStylePopup>();
+		services.AddPopup<ImplicitStylePopup>();
+		services.AddPopup<MultipleButtonPopup>();
+		services.AddPopup<NoOutsideTapDismissPopup>();
+		services.AddPopup<OpenedEventSimplePopup>();
+		services.AddPopup<RedBlueBoxPopup>();
+		services.AddPopup<ReturnResultPopup>();
+		services.AddPopup<SimplePopup>();
+		services.AddPopup<StyleClassPopup>();
+		services.AddPopup<StyleInheritancePopup>();
+		services.AddPopup<ToggleSizePopup>();
+		services.AddPopup<TransparentPopup>();
+		services.AddPopup<UpdatingPopup, UpdatingPopupViewModel>();
+		services.AddPopup<XamlBindingPopup, XamlBindingPopupViewModel>();
+
+		services.AddPopup<PopupContentView, PopupContentViewModel>();
 	}
 
 	static void RegisterEssentials(in IServiceCollection services)

samples/CommunityToolkit.Maui.Sample/Pages/Views/MediaElement/MediaElementPage.xaml.cs

@@ -1,4 +1,5 @@
 using System.ComponentModel;
+using CommunityToolkit.Maui.Core;
 using CommunityToolkit.Maui.Core.Primitives;
 using CommunityToolkit.Maui.Sample.ViewModels.Views;
 using CommunityToolkit.Maui.Views;
@@ -243,7 +244,7 @@ async void ChangeAspectClicked(object? sender, EventArgs e)
 		MediaElement.Aspect = (Aspect)aspectEnum;
 	}
 
-	void DisplayPopup(object sender, EventArgs e)
+	async void DisplayPopup(object sender, EventArgs e)
 	{
 		MediaElement.Pause();
 		var popupMediaElement = new MediaElement
@@ -256,8 +257,6 @@ void DisplayPopup(object sender, EventArgs e)
 		};
 		var popup = new Popup
 		{
-			VerticalOptions = LayoutAlignment.Center,
-			HorizontalOptions = LayoutAlignment.Center,
 			Content = new StackLayout
 			{
 				Children =
@@ -267,11 +266,8 @@ void DisplayPopup(object sender, EventArgs e)
 			}
 		};
 
-		this.ShowPopup(popup);
-		popup.Closed += (s, e) =>
-		{
-			popupMediaElement.Stop();
-			popupMediaElement.Handler?.DisconnectHandler();
-		};
+		await Navigation.ShowPopup(popup, new PopupOptions());
+		popupMediaElement.Stop();
+		popupMediaElement.Handler?.DisconnectHandler();
 	}
 }

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

@@ -31,6 +31,20 @@
                 <Button Text="C# Binding Popup" Command="{Binding CsharpBindingPopupCommand}" />
 
                 <Button Text="Updating Popup" Command="{Binding UpdatingPopupCommand}" />
+
+                <Button Text="Show Popup content" Command="{Binding ShowPopupContentCommand}" />
+
+                <Button Text="Custom Positioning Popup" Clicked="HandlePopupPositionButtonClicked" />
+
+                <Button Text="Anchor Popup" Clicked="HandlePopupAnchorButtonClicked" />
+
+                <Button Text="Popup Layout Page" Clicked="HandlePopupLayoutAlignmentButtonClicked" />
+
+                <Button Text="Popup Sizing Issues Page" Clicked="HandlePopupSizingIssuesButtonClicked" />
+
+                <Button Text="Show Popup in OnAppearing" Clicked="HandleShowPopupInOnAppearingButtonClicked" />
+
+                <Button Text="Popup Style Page" Clicked="HandleStylePopupButtonClicked" />
             </VerticalStackLayout>
         </ScrollView>
     </ContentPage.Content>

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

@@ -1,76 +1,100 @@
+using CommunityToolkit.Maui.Core;
 using CommunityToolkit.Maui.Sample.Models;
 using CommunityToolkit.Maui.Sample.ViewModels.Views;
 using CommunityToolkit.Maui.Sample.Views.Popups;
 using CommunityToolkit.Maui.Views;
+using Microsoft.Maui.Controls.Shapes;
 
 namespace CommunityToolkit.Maui.Sample.Pages.Views;
 
 public partial class MultiplePopupPage : BasePage<MultiplePopupViewModel>
 {
-	readonly PopupSizeConstants popupSizeConstants;
+	readonly IPopupService popupService;
 
-	public MultiplePopupPage(PopupSizeConstants popupSizeConstants,
-								MultiplePopupViewModel multiplePopupViewModel)
+	public MultiplePopupPage(MultiplePopupViewModel multiplePopupViewModel, IPopupService popupService)
 		: base(multiplePopupViewModel)
 	{
+		this.popupService = popupService;
 		InitializeComponent();
-
-		this.popupSizeConstants = popupSizeConstants;
 	}
 
 	async void HandleSimplePopupButtonClicked(object sender, EventArgs e)
 	{
-		var simplePopup = new SimplePopup(popupSizeConstants);
-		await this.ShowPopupAsync(simplePopup, CancellationToken.None);
+		await popupService.ShowPopupAsync<SimplePopup>(Navigation, new PopupOptions()
+		{
+			Shape = new RoundRectangle() { CornerRadius = new CornerRadius(15) }
+		}, CancellationToken.None);
 	}
 
 	async void HandleButtonPopupButtonClicked(object sender, EventArgs e)
 	{
-		var buttonPopup = new ButtonPopup(popupSizeConstants);
-		await this.ShowPopupAsync(buttonPopup, CancellationToken.None);
+		await popupService.ShowPopupAsync<ButtonPopup>(Navigation, new PopupOptions(), CancellationToken.None);
 	}
 
 	async void HandleMultipleButtonPopupButtonClicked(object sender, EventArgs e)
 	{
-		var multipleButtonPopup = new MultipleButtonPopup(popupSizeConstants);
-		await this.ShowPopupAsync(multipleButtonPopup, CancellationToken.None);
+		await popupService.ShowPopupAsync<MultipleButtonPopup, bool>(Navigation, new PopupOptions(), CancellationToken.None);
 	}
 
 	async void HandleNoOutsideTapDismissPopupClicked(object sender, EventArgs e)
 	{
-		var noOutsideTapDismissPopup = new NoOutsideTapDismissPopup(popupSizeConstants);
-		await this.ShowPopupAsync(noOutsideTapDismissPopup, CancellationToken.None);
+		await popupService.ShowPopupAsync<NoOutsideTapDismissPopup>(Navigation, new PopupOptions() { CanBeDismissedByTappingOutsideOfPopup = false }, CancellationToken.None);
 	}
 
 	async void HandleToggleSizePopupButtonClicked(object sender, EventArgs e)
 	{
-		var toggleSizePopup = new ToggleSizePopup(popupSizeConstants);
-		await this.ShowPopupAsync(toggleSizePopup, CancellationToken.None);
+		await popupService.ShowPopupAsync<ToggleSizePopup>(Navigation, new PopupOptions(), CancellationToken.None);
 	}
 
 	async void HandleTransparentPopupButtonClicked(object sender, EventArgs e)
 	{
-		var transparentPopup = new TransparentPopup();
-		await this.ShowPopupAsync(transparentPopup, CancellationToken.None);
+		await popupService.ShowPopupAsync<TransparentPopup>(Navigation, new PopupOptions(), CancellationToken.None);
 	}
 
 	async void HandleOpenedEventSimplePopupButtonClicked(object sender, EventArgs e)
 	{
-		var openedEventSimplePopup = new OpenedEventSimplePopup(popupSizeConstants);
-		await this.ShowPopupAsync(openedEventSimplePopup, CancellationToken.None);
+		await popupService.ShowPopupAsync<OpenedEventSimplePopup>(Navigation, new PopupOptions(), CancellationToken.None);
 	}
 
 	async void HandleReturnResultPopupButtonClicked(object sender, EventArgs e)
 	{
-		var returnResultPopup = new ReturnResultPopup(popupSizeConstants);
-		var result = await this.ShowPopupAsync(returnResultPopup, CancellationToken.None);
+		var result = await popupService.ShowPopupAsync<ReturnResultPopup, string>(Navigation, new PopupOptions(), CancellationToken.None);
 
-		await DisplayAlert("Pop Result Returned", $"Result: {result}", "OK");
+		await DisplayAlert("Pop Result Returned", $"Result: {result.Result}", "OK");
 	}
 
 	async void HandleXamlBindingPopupPopupButtonClicked(object sender, EventArgs e)
 	{
-		var xamlBindingPopup = new XamlBindingPopup(popupSizeConstants);
-		await this.ShowPopupAsync(xamlBindingPopup, CancellationToken.None);
+		await popupService.ShowPopupAsync<XamlBindingPopup>(Navigation, new PopupOptions(), CancellationToken.None);
+	}
+
+	async void HandlePopupPositionButtonClicked(object sender, EventArgs e)
+	{
+		await Navigation.PushAsync(new PopupPositionPage(new PopupPositionViewModel()));
+	}
+
+	async void HandlePopupAnchorButtonClicked(object sender, EventArgs e)
+	{
+		await Navigation.PushAsync(new PopupAnchorPage(DeviceInfo.Current, new PopupAnchorViewModel()));
+	}
+
+	async void HandlePopupLayoutAlignmentButtonClicked(object sender, EventArgs e)
+	{
+		await Navigation.PushAsync(new PopupLayoutAlignmentPage(new PopupLayoutAlignmentViewModel()));
+	}
+
+	async void HandlePopupSizingIssuesButtonClicked(object sender, EventArgs e)
+	{
+		await Navigation.PushAsync(new PopupSizingIssuesPage(new PopupSizingIssuesViewModel()));
+	}
+
+	async void HandleShowPopupInOnAppearingButtonClicked(object sender, EventArgs e)
+	{
+		await Navigation.PushAsync(new ShowPopupInOnAppearingPage(new ShowPopupInOnAppearingPageViewModel(), popupService));
+	}
+
+	async void HandleStylePopupButtonClicked(object sender, EventArgs e)
+	{
+		await Navigation.PushAsync(new StylePopupPage(new StylePopupViewModel()));
 	}
 }