[Popup] Add ComplexPopup to CommunityToolkit.Maui.Sample

samples/CommunityToolkit.Maui.Sample/MauiProgram.cs

@@ -269,6 +269,7 @@ static void RegisterViewsAndViewModels(in IServiceCollection services)
 		// Add Popups
 		services.AddTransientPopup<ApplyToDerivedTypesPopup>();
 		services.AddTransientPopup<ButtonPopup>();
+		services.AddTransientPopup<ComplexPopup, ComplexPopupViewModel>();
 		services.AddTransientPopup<CsharpBindingPopup, CsharpBindingPopupViewModel>();
 		services.AddTransientPopup<DynamicStyleInheritancePopup>();
 		services.AddTransientPopup<DynamicStylePopup>();

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

@@ -48,6 +48,8 @@
 
                 <Button Text="OnDisappearing Popup" Clicked="HandleOnDisappearingPopupClicked" />
 
+                <Button Text="Complex Popup" Clicked="HandleComplexPopupClicked" />
+
             </VerticalStackLayout>
         </ScrollView>
     </ContentPage.Content>

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

@@ -1,3 +1,4 @@
+using CommunityToolkit.Maui.Alerts;
 using CommunityToolkit.Maui.Extensions;
 using CommunityToolkit.Maui.Markup;
 using CommunityToolkit.Maui.Sample.Pages.Views.Popup;
@@ -130,4 +131,38 @@ async void HandleSelfClosingPopupButtonClicked(object? sender, EventArgs e)
 
 		await this.ClosePopupAsync();
 	}
+
+	async void HandleComplexPopupClicked(object? sender, EventArgs e)
+	{
+		var complexPopupOptionsViewModel = new ComplexPopupOptionsViewModel();
+		var complexPopupOptions = new PopupOptions
+		{
+			BindingContext = complexPopupOptionsViewModel,
+			Shape = new RoundRectangle
+			{
+				CornerRadius = new CornerRadius(4),
+				StrokeThickness = 12,
+				Stroke = Colors.Orange
+			}
+		};
+		complexPopupOptions.SetBinding<ComplexPopupOptionsViewModel, Color>(PopupOptions.PageOverlayColorProperty, static x => x.PageOverlayBackgroundColor, source: complexPopupOptionsViewModel);
+
+		var popupResultTask = popupService.ShowPopupAsync<ComplexPopup, string>(Navigation, complexPopupOptions);
+
+		// Rotate `PopupOptions.PageOverlayBackgroundColor` every 2 seconds using random colors 
+		while (!popupResultTask.IsCompleted)
+		{
+			await Task.Delay(TimeSpan.FromSeconds(2));
+
+			complexPopupOptionsViewModel.PageOverlayBackgroundColor =
+				Color.FromRgba(Random.Shared.NextDouble(), Random.Shared.NextDouble(), Random.Shared.NextDouble(), 0.2f);
+		}
+
+		var popupResult = await popupResultTask;
+		if (!popupResult.WasDismissedByTappingOutsideOfPopup)
+		{
+			// Display Popup Result as a Toast
+			await Toast.Make($"You entered {popupResult.Result}").Show();
+		}
+	}
 }

samples/CommunityToolkit.Maui.Sample/ViewModels/Views/Popup/ComplexPopupOptionsViewModel.cs

@@ -0,0 +1,9 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
+
+public partial class ComplexPopupOptionsViewModel : ObservableObject
+{
+	[ObservableProperty]
+	public partial Color PageOverlayBackgroundColor { get; set; } = Colors.Orange.WithAlpha(0.2f);
+}

samples/CommunityToolkit.Maui.Sample/ViewModels/Views/Popup/ComplexPopupViewModel.cs

@@ -0,0 +1,21 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
+
+public partial class ComplexPopupViewModel(IPopupService popupService) : ObservableObject
+{
+	readonly IPopupService popupService = popupService;
+	readonly INavigation navigation = Application.Current?.Windows[0].Page?.Navigation ?? throw new InvalidOperationException("Unable to locate INavigation");
+
+	[ObservableProperty, NotifyCanExecuteChangedFor(nameof(ReturnButtonTappedCommand))]
+	public partial string ReturnText { get; set; } = string.Empty;
+
+	bool CanReturnButtonExecute => ReturnText?.Length > 0;
+
+	[RelayCommand(CanExecute = nameof(CanReturnButtonExecute))]
+	async Task OnReturnButtonTapped(CancellationToken token)
+	{
+		await popupService.ClosePopupAsync<string>(navigation, ReturnText, token);
+	}
+}

samples/CommunityToolkit.Maui.Sample/Views/Popups/ComplexPopup.xaml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<mct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+           xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
+           xmlns:vm="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Views"
+           xmlns:system="clr-namespace:System;assembly=System.Runtime"
+           x:Class="CommunityToolkit.Maui.Sample.Views.Popups.ComplexPopup"
+           x:DataType="vm:ComplexPopupViewModel"
+           x:TypeArguments="system:String">
+
+    <VerticalStackLayout Spacing="12">
+
+        <Label Text="Complex Popup"
+               FontSize="24"
+               HorizontalTextAlignment="Center"
+               VerticalTextAlignment="Center"
+               HorizontalOptions="Center"
+               VerticalOptions="Center"
+               FontAttributes="Bold" />
+
+        <Label x:Name="DescriptionLabel"
+               Text="This text will change upon the Opened event firing"
+               HorizontalTextAlignment="Center"
+               VerticalTextAlignment="Center"
+               HorizontalOptions="Center"
+               VerticalOptions="Center"
+               LineBreakMode="WordWrap" />
+
+        <Entry Placeholder="Enter text here then click Return"
+               HorizontalOptions="Center"
+               VerticalOptions="Center"
+               Text="{Binding ReturnText, Mode=OneWayToSource}" />
+
+        <Button Text="Return"
+                HorizontalOptions="Center"
+                VerticalOptions="Center"
+                Command="{Binding ReturnButtonTappedCommand}" />
+
+    </VerticalStackLayout>
+
+</mct:Popup>

samples/CommunityToolkit.Maui.Sample/Views/Popups/ComplexPopup.xaml.cs

@@ -0,0 +1,24 @@
+using CommunityToolkit.Maui.Sample.ViewModels.Views;
+using CommunityToolkit.Maui.Views;
+
+namespace CommunityToolkit.Maui.Sample.Views.Popups;
+
+public partial class ComplexPopup : Popup<string>
+{
+	public ComplexPopup(ComplexPopupViewModel viewModel)
+	{
+		InitializeComponent();
+
+		CanBeDismissedByTappingOutsideOfPopup = false;
+
+		BindingContext = viewModel;
+		Opened += HandlePopupOpened;
+	}
+
+	async void HandlePopupOpened(object? sender, EventArgs e)
+	{
+		// Delay for one second to ensure the user sees the previous text
+		await Task.Delay(TimeSpan.FromSeconds(1));
+		DescriptionLabel.Text = "This Popup demonstrates constructor injection to pass in a value using Dependency Injection using PopupService, demonstrates how to use the Opened event to trigger an action once the Popup appears, demonstrates how to bind to PopupOptions, and demonstrates how to return a result.";
+	}
+}