Add Resources and Style to Popup (#1351)

.github/PULL_REQUEST_TEMPLATE.md

@@ -29,7 +29,7 @@
  - [ ] Has samples (if omitted, state reason in description)
  - [ ] Rebased on top of `main` at time of PR
  - [ ] Changes adhere to [coding standard](https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#contributing-code---best-practices)
- - [ ] Documentation created or updated: https://github.com/MicrosoftDocs/CommunityToolkit/pull/XYZ <!-- Replace XYZ with your docs PR #. The checkbox will be automatically checked once the docs PR has been merged -->
+ - [ ] Documentation created or updated: https://github.com/MicrosoftDocs/CommunityToolkit/pulls <!-- Replace this link to the direct link to your Pull Request in the MicrosoftDocs/CommunityToolkit repo  -->
 
 
  ### Additional information ###

samples/CommunityToolkit.Maui.Sample/App.xaml

@@ -1,12 +1,53 @@
 <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:popups="clr-namespace:CommunityToolkit.Maui.Sample.Views.Popups"
              x:Class="CommunityToolkit.Maui.Sample.App">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                 <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
             </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" />
+            </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" />
+            </Style>
+
+            <Style x:Key="BasePopupStyle" TargetType="{x:Type popups:StyleInheritancePopup}">
+                <Setter Property="Size" Value="200,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" />
+            </Style>
+
+            <Style x:Key="DynamicBasePopupStyle" TargetType="{x:Type popups:DynamicStyleInheritancePopup}">
+                <Setter Property="Size" Value="150,150" />
+            </Style>
+            <Style x:Key="DynamicInheritancePopupStyle1" TargetType="{x:Type popups:DynamicStyleInheritancePopup}" BasedOn="{StaticResource DynamicBasePopupStyle}">
+                <Setter Property="Color" Value="Purple" />
+                <Setter Property="VerticalOptions" Value="End" />
+            </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" />
+            </Style>
+
         </ResourceDictionary>
     </Application.Resources>
 </Application>

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

@@ -129,6 +129,7 @@ public partial class AppShell : Shell
 		CreateViewModelMapping<PopupPositionPage, PopupPositionViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<SemanticOrderViewPage, SemanticOrderViewPageViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 		CreateViewModelMapping<ShowPopupInOnAppearingPage, ShowPopupInOnAppearingPageViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
+		CreateViewModelMapping<StylePopupPage, StylePopupViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
 	});
 
 	public AppShell() => InitializeComponent();

samples/CommunityToolkit.Maui.Sample/CommunityToolkit.Maui.Sample.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFrameworks>$(NetVersion)-ios;$(NetVersion)-android;$(NetVersion)-maccatalyst</TargetFrameworks>

samples/CommunityToolkit.Maui.Sample/MauiProgram.cs

@@ -192,6 +192,7 @@ static void RegisterViewsAndViewModels(in IServiceCollection services)
 		services.AddTransientWithShellRoute<PopupPositionPage, PopupPositionViewModel>();
 		services.AddTransientWithShellRoute<SemanticOrderViewPage, SemanticOrderViewPageViewModel>();
 		services.AddTransientWithShellRoute<ShowPopupInOnAppearingPage, ShowPopupInOnAppearingPageViewModel>();
+		services.AddTransientWithShellRoute<StylePopupPage, StylePopupViewModel>();
 
 		// Add Popups
 		services.AddTransient<CsharpBindingPopup, CsharpBindingPopupViewModel>();

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

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<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:TypeArguments="viewModels:StylePopupViewModel"
+             x:DataType="viewModels:StylePopupViewModel"
+             x:Class="CommunityToolkit.Maui.Sample.Pages.Views.StylePopupPage"
+             Title="StylePopupPage">
+
+    <ScrollView Orientation="Vertical">
+        <StackLayout Orientation="Vertical" Spacing="5">
+            <Label Text="This sample demonstrates various ways of using applying a Style to a Popup"
+                   HorizontalOptions="Center"
+                   HorizontalTextAlignment="Center"
+                   VerticalTextAlignment="Start"/>
+
+            <Button
+                Text="Implicit Style"
+                BackgroundColor="Blue"
+                TextColor="White"
+                Command="{Binding DisplayImplicitStylePopupCommand}"/>
+            <Button
+                Text="Explicit Style"
+                BackgroundColor="Blue"
+                TextColor="White"
+                Command="{Binding DisplayExplicitStylePopupCommand}"/>
+            <Button
+                Text="Dynamic Style"
+                BackgroundColor="Blue"
+                TextColor="White"
+                Command="{Binding DisplayDynamicStylePopupCommand}"/>
+            <Button
+                Text="ApplyToDerivedTypes"
+                BackgroundColor="Blue"
+                TextColor="White"
+                Command="{Binding DisplayApplyToDerivedTypesPopupCommand}"/>
+            <Button
+                Text="Style Inheritance"
+                BackgroundColor="Blue"
+                TextColor="White"
+                Command="{Binding DisplayStyleInheritancePopupCommand}"/>
+            <Button
+                Text="Dynamic Style Inheritance"
+                BackgroundColor="Blue"
+                TextColor="White"
+                Command="{Binding DisplayDynamicStyleInheritancePopupCommand}"/>
+            <Button
+                Text="Style Class"
+                BackgroundColor="Blue"
+                TextColor="White"
+                Command="{Binding DisplayStyleClassPopupCommand}"/>
+        </StackLayout>
+    </ScrollView>
+
+</pages:BasePage>

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

@@ -0,0 +1,10 @@
+using CommunityToolkit.Maui.Sample.ViewModels.Views;
+namespace CommunityToolkit.Maui.Sample.Pages.Views;
+
+public partial class StylePopupPage : BasePage<StylePopupViewModel>
+{
+	public StylePopupPage(StylePopupViewModel stylePopupViewModel) : base(stylePopupViewModel)
+	{
+		InitializeComponent();
+	}
+}

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

@@ -0,0 +1,59 @@
+using CommunityToolkit.Maui.Sample.Views.Popups;
+using CommunityToolkit.Maui.Views;
+using CommunityToolkit.Mvvm.Input;
+
+namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
+
+public partial class StylePopupViewModel : BaseViewModel
+{
+	static Page MainPage => Shell.Current;
+
+	[RelayCommand]
+	static void DisplayImplicitStylePopup()
+	{
+		var popup = new ImplicitStylePopup();
+		MainPage.ShowPopup(popup);
+	}
+
+	[RelayCommand]
+	static void DisplayExplicitStylePopup()
+	{
+		var popup = new ExplicitStylePopup();
+		MainPage.ShowPopup(popup);
+	}
+
+	[RelayCommand]
+	static void DisplayDynamicStylePopup()
+	{
+		var popup = new DynamicStylePopup();
+		MainPage.ShowPopup(popup);
+	}
+
+	[RelayCommand]
+	static void DisplayApplyToDerivedTypesPopup()
+	{
+		var popup = new ApplyToDerivedTypesPopup();
+		MainPage.ShowPopup(popup);
+	}
+
+	[RelayCommand]
+	static void DisplayStyleInheritancePopup()
+	{
+		var popup = new StyleInheritancePopup();
+		MainPage.ShowPopup(popup);
+	}
+
+	[RelayCommand]
+	static void DisplayDynamicStyleInheritancePopup()
+	{
+		var popup = new DynamicStyleInheritancePopup();
+		MainPage.ShowPopup(popup);
+	}
+
+	[RelayCommand]
+	static void DisplayStyleClassPopup()
+	{
+		var popup = new StyleClassPopup();
+		MainPage.ShowPopup(popup);
+	}
+}

samples/CommunityToolkit.Maui.Sample/ViewModels/Views/ViewsGalleryViewModel.cs

@@ -32,6 +32,7 @@ public ViewsGalleryViewModel()
 			SectionModel.Create<PopupLayoutAlignmentViewModel>("Popup Layout Page", Colors.Red, "Popup.Content demonstrated using different layouts"),
 			SectionModel.Create<ShowPopupInOnAppearingPageViewModel>("Show Popup in OnAppearing", Colors.Red, "Proves that we now support showing a popup before the platform is even ready."),
 			SectionModel.Create<SemanticOrderViewPageViewModel>("Semantic Order View", Colors.Red, "SemanticOrderView allows developers to indicate the focus order of visible controls when a user is navigating via TalkBack (Android), VoiceOver (iOS) or Narrator (Windows)."),
+			SectionModel.Create<StylePopupViewModel>("Popup Style Page", Colors.Red, "A page demonstrating how Popups can be styled in a .NET MAUI application."),
 		})
 	{
 	}

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

@@ -0,0 +1,22 @@
+<?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"
+             x:Class="CommunityToolkit.Maui.Sample.Views.Popups.ApplyToDerivedTypesPopup">
+    <mct:Popup.Resources>
+        <Style TargetType="{x:Type mct:Popup}" ApplyToDerivedTypes="True">
+            <Setter Property="Size" Value="150,150" />
+            <Setter Property="Color" Value="Orange" />
+            <Setter Property="HorizontalOptions" Value="End" />
+            <Setter Property="VerticalOptions" Value="Center" />
+            <Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="True" />
+        </Style>
+    </mct:Popup.Resources>
+
+    <Grid VerticalOptions="Fill" HorizontalOptions="Fill" BackgroundColor="Transparent">
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
+    </Grid>
+</mct:Popup>

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

@@ -0,0 +1,15 @@
+using CommunityToolkit.Maui.Views;
+
+namespace CommunityToolkit.Maui.Sample.Views.Popups;
+
+/// <summary>
+/// This popup demonstrates how the ApplyToDerivedTypes property can allow for Popup implementations
+/// that inherit from Popup to still use a common Style definition.
+/// </summary>
+public partial class ApplyToDerivedTypesPopup : Popup
+{
+	public ApplyToDerivedTypesPopup()
+	{
+		InitializeComponent();
+	}
+}

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

@@ -0,0 +1,14 @@
+<?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"
+           x:Class="CommunityToolkit.Maui.Sample.Views.Popups.DynamicStyleInheritancePopup"
+           Style="{StaticResource DynamicInheritancePopupStyle2}">
+
+    <Grid VerticalOptions="Fill" HorizontalOptions="Fill" BackgroundColor="Transparent">
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
+    </Grid>
+</mct:Popup>

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

@@ -0,0 +1,11 @@
+using CommunityToolkit.Maui.Views;
+
+namespace CommunityToolkit.Maui.Sample.Views.Popups;
+
+public partial class DynamicStyleInheritancePopup : Popup
+{
+	public DynamicStyleInheritancePopup()
+	{
+		InitializeComponent();
+	}
+}

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

@@ -0,0 +1,24 @@
+<?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:popups="clr-namespace:CommunityToolkit.Maui.Sample.Views.Popups"
+           x:Class="CommunityToolkit.Maui.Sample.Views.Popups.DynamicStylePopup"
+           Style="{DynamicResource DynamicPopupStyle}">
+    <mct:Popup.Resources>
+        <Style TargetType="{x:Type popups:DynamicStylePopup}">
+            <Setter Property="Size" Value="100,200" />
+            <Setter Property="Color" Value="Green" />
+            <Setter Property="HorizontalOptions" Value="Center" />
+            <Setter Property="VerticalOptions" Value="Start" />
+            <Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="True" />
+        </Style>
+    </mct:Popup.Resources>
+
+    <Grid VerticalOptions="Fill" HorizontalOptions="Fill" BackgroundColor="Transparent">
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
+    </Grid>
+</mct:Popup>

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

@@ -0,0 +1,15 @@
+using CommunityToolkit.Maui.Views;
+
+namespace CommunityToolkit.Maui.Sample.Views.Popups;
+
+/// <summary>
+/// This popup demonstrates how a <see cref="Style"/> is applied to a <see cref="Popup"/>
+/// through the use of the <see cref="Popup.Style"/> property using the <see cref="DynamicResourceExtension"/>.
+/// </summary>
+public partial class DynamicStylePopup : Popup
+{
+	public DynamicStylePopup()
+	{
+		InitializeComponent();
+	}
+}

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

@@ -0,0 +1,14 @@
+<?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"
+           x:Class="CommunityToolkit.Maui.Sample.Views.Popups.ExplicitStylePopup"
+           Style="{StaticResource ExplicitPopupStyle}">
+
+    <Grid VerticalOptions="Fill" HorizontalOptions="Fill" BackgroundColor="Transparent">
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
+    </Grid>
+</mct:Popup>

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

@@ -0,0 +1,15 @@
+using CommunityToolkit.Maui.Views;
+
+namespace CommunityToolkit.Maui.Sample.Views.Popups;
+
+/// <summary>
+/// This popup demonstrates how a <see cref="Style"/> is applied to a <see cref="Popup"/> explicitly
+/// through the use of the <see cref="Popup.Style"/> property using the <see cref="StaticResourceExtension"/>.
+/// </summary>
+public partial class ExplicitStylePopup : Popup
+{
+	public ExplicitStylePopup()
+	{
+		InitializeComponent();
+	}
+}

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

@@ -0,0 +1,13 @@
+<?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"
+           x:Class="CommunityToolkit.Maui.Sample.Views.Popups.ImplicitStylePopup">
+
+    <Grid VerticalOptions="Fill" HorizontalOptions="Fill" BackgroundColor="Transparent">
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
+        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
+    </Grid>
+</mct:Popup>