[Popup] Add ComplexPopup to CommunityToolkit.Maui.Sample (#2771)

* Add Complex Popup

* Add Comments

* Remove ComplexPopupOptionsViewModel

* Add `CancellationToken.None`

Author: TheCodeTraveler

samples/CommunityToolkit.Maui.Sample/MauiProgram.cs

@@ -271,6 +271,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,35 @@ async void HandleSelfClosingPopupButtonClicked(object? sender, EventArgs e)
 
 		await this.ClosePopupAsync();
 	}
+
+	async void HandleComplexPopupClicked(object? sender, EventArgs e)
+	{
+		var complexPopupOpenedCancellationTokenSource = new CancellationTokenSource();
+		var complexPopupOptions = new PopupOptions
+		{
+			BindingContext = this.BindingContext,
+			Shape = new RoundRectangle
+			{
+				CornerRadius = new CornerRadius(4),
+				StrokeThickness = 12,
+				Stroke = Colors.Orange
+			}
+		};
+		complexPopupOptions.SetBinding<PopupsViewModel, Color>(PopupOptions.PageOverlayColorProperty, static x => x.PageOverlayBackgroundColor);
+
+		var popupResultTask = popupService.ShowPopupAsync<ComplexPopup, string>(Navigation, complexPopupOptions, CancellationToken.None);
+
+		// Trigger Command in ViewModel to Rotate PopupOptions.PageOverlayColorProperty
+		BindingContext.ComplexPopupOpenedCommand.Execute(complexPopupOpenedCancellationTokenSource.Token);
+
+		var popupResult = await popupResultTask;
+		await complexPopupOpenedCancellationTokenSource.CancelAsync();
+
+		if (!popupResult.WasDismissedByTappingOutsideOfPopup)
+		{
+			// Display Popup Result as a Toast
+			await Toast.Make($"You entered {popupResult.Result}").Show(CancellationToken.None);
+		}
+
+	}
 }

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/ViewModels/Views/Popup/PopupsViewModel.cs

@@ -1,11 +1,15 @@
-using CommunityToolkit.Mvvm.Input;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 
 namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
 
 public partial class PopupsViewModel(IPopupService popupService) : BaseViewModel
 {
 	static INavigation currentNavigation => Application.Current?.Windows[0].Page?.Navigation ?? throw new InvalidOperationException($"{nameof(Page.Navigation)} not found");
 
+	[ObservableProperty]
+	public partial Color PageOverlayBackgroundColor { get; set; } = Colors.Orange.WithAlpha(0.2f);
+
 	[RelayCommand]
 	void OnCsharpBindingPopup()
 	{
@@ -28,4 +32,15 @@ Task OnShowPopupContent(CancellationToken token)
 	{
 		return popupService.ShowPopupAsync<PopupContentViewModel>(currentNavigation, cancellationToken: token);
 	}
+
+	[RelayCommand]
+	async Task OnComplexPopupOpened(CancellationToken token)
+	{
+		// Rotate the PopupOptions.PageOverlayBackgroundColor every second
+		while (!token.IsCancellationRequested)
+		{
+			PageOverlayBackgroundColor = Color.FromRgba(Random.Shared.NextDouble(), Random.Shared.NextDouble(), Random.Shared.NextDouble(), 0.2f);
+			await Task.Delay(TimeSpan.FromSeconds(1), CancellationToken.None);
+		}
+	}
 }

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

@@ -0,0 +1,49 @@
+<?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">
+
+    <mct:Popup.Resources>
+        <mct:AppThemeColor Light="Black" Dark="Black" x:Key="TextColor" />
+    </mct:Popup.Resources>
+
+    <VerticalStackLayout Spacing="12">
+        
+        <Label Text="Complex Popup"
+               TextColor="{mct:AppThemeResource TextColor}"
+               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"
+               TextColor="{mct:AppThemeResource TextColor}"
+               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}" 
+               TextColor="{mct:AppThemeResource TextColor}"/>
+
+        <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.";
+	}
+}