diff --git a/docs/maui/TOC.yml b/docs/maui/TOC.yml index 7582d625..8e7ed25d 100644 --- a/docs/maui/TOC.yml +++ b/docs/maui/TOC.yml @@ -243,6 +243,10 @@ items: href: views/Popup.md - name: "Popup Service" href: views/popup-service.md + - name: "Customizing Popup behavior and appearance" + href: views/popup/popup-options.md + - name: "Returning a value from a Popup" + href: views/popup/popup-result.md - name: SemanticOrderView href: views/semantic-order-view.md - name: C# Markup diff --git a/docs/maui/images/views/popup/popup-blue-border.png b/docs/maui/images/views/popup/popup-blue-border.png new file mode 100644 index 00000000..524b8a8c Binary files /dev/null and b/docs/maui/images/views/popup/popup-blue-border.png differ diff --git a/docs/maui/images/views/popup/popup-green-shadow.png b/docs/maui/images/views/popup/popup-green-shadow.png new file mode 100644 index 00000000..2c78a826 Binary files /dev/null and b/docs/maui/images/views/popup/popup-green-shadow.png differ diff --git a/docs/maui/images/views/popup/popup-no-border.png b/docs/maui/images/views/popup/popup-no-border.png new file mode 100644 index 00000000..57352bd0 Binary files /dev/null and b/docs/maui/images/views/popup/popup-no-border.png differ diff --git a/docs/maui/images/views/popup/popup-no-shadow.png b/docs/maui/images/views/popup/popup-no-shadow.png new file mode 100644 index 00000000..52cb1222 Binary files /dev/null and b/docs/maui/images/views/popup/popup-no-shadow.png differ diff --git a/docs/maui/images/views/popup/popup-page-overlay-opaque.png b/docs/maui/images/views/popup/popup-page-overlay-opaque.png new file mode 100644 index 00000000..16c33ffd Binary files /dev/null and b/docs/maui/images/views/popup/popup-page-overlay-opaque.png differ diff --git a/docs/maui/images/views/popup/popup-page-overlay-translucent.png b/docs/maui/images/views/popup/popup-page-overlay-translucent.png new file mode 100644 index 00000000..d92dbd5a Binary files /dev/null and b/docs/maui/images/views/popup/popup-page-overlay-translucent.png differ diff --git a/docs/maui/images/views/popup/popup-result.png b/docs/maui/images/views/popup/popup-result.png new file mode 100644 index 00000000..b546ba2f Binary files /dev/null and b/docs/maui/images/views/popup/popup-result.png differ diff --git a/docs/maui/images/views/popup/popup-with-button.png b/docs/maui/images/views/popup/popup-with-button.png new file mode 100644 index 00000000..dead16bb Binary files /dev/null and b/docs/maui/images/views/popup/popup-with-button.png differ diff --git a/docs/maui/images/views/popup/popup-with-padding.png b/docs/maui/images/views/popup/popup-with-padding.png new file mode 100644 index 00000000..94d0e696 Binary files /dev/null and b/docs/maui/images/views/popup/popup-with-padding.png differ diff --git a/docs/maui/views/Popup.md b/docs/maui/views/Popup.md index d42505f0..b3b49a61 100644 --- a/docs/maui/views/Popup.md +++ b/docs/maui/views/Popup.md @@ -7,282 +7,182 @@ ms.date: 04/12/2022 # Popup -Popups are a very common way of presenting information to a user that relates to their current task. Operating systems provide a way to show a message and require a response from the user, these alerts are typically restrictive in terms of the content a developer can provide and also the layout and appearance. +Popups are a common way of presenting information to a user that relates to their current task. Operating systems provide a way to show a message and require a response from the user, these alerts are typically restrictive in terms of the content a developer can provide and also the layout and appearance. > [!NOTE] > If you wish to present something to the user that is more subtle then checkout our [Toast](../alerts/toast.md) and [Snackbar](../alerts/snackbar.md) options. The `Popup` view allows developers to build their own custom UI and present it to their users. -## Building a Popup +The .NET MAUI Community Toolkit provides 2 approaches to create a `Popup` that can be shown in a .NET MAUI application. These approaches will depend on the use case. This page focuses on the simplest form of `Popup` - simply rendering an overlay in an application. For a more advanced approach, enabling the ability to return a result from the `Popup`, please refer to [Popup - Returning a result](./popup/popup-result.md). -A `Popup` can be created in XAML or C#: +## Displaying a Popup -### XAML +The .NET MAUI Community Toolkit provides multiple approaches to display a `Popup` in a .NET MAUI application: -#### Including the XAML namespace +1. In a `ContentPage`, call to the `this.ShowPopupAsync()` extension method, passing in a `View` to display in the Popup + - **Note:** To further customize a Popup, please refer to the [**PopupOptions** documentation](./popup/popup-options.md). +2. Returning a result from the `Popup` + - Please refer to the [**Popup - Returning a result** documentation](./popup/popup-result.md). +3. Using the `PopupService` + - Please refer to the [**PopupService** documentation](./popup-service.md). -[!INCLUDE [XAML usage guidance](../includes/xaml-usage.md)] +The documentation below demonstrates the simplest way to display a Popup using the `.ShowPopupAsync()` extension method. This method returns a `Task` that will complete when the Popup closes. The `PopupOptions` provided are optional. -#### Defining your Popup - -Please note that if a `Popup` is created in XAML it must have a C# code behind file as well. To understand why this is required please refer to this [.NET MAUI documentation page](/dotnet/maui/xaml/runtime-load). - -The easiest way to create a `Popup` is to add a new `.NET MAUI ContentView (XAML)` to your project and then change each of the files to the following: - -```xaml - - - - - - -``` - -```csharp -public partial class SimplePopup : Popup +```cs +public class MainPage : ContentPage { - public SimplePopup() - { - InitializeComponent(); - } -} -``` - -> [!IMPORTANT] -> If the code behind file is not created along with the call to `InitializeComponent` then an exception will be thrown when trying to display your `Popup`. - -### C# - -```csharp -using CommunityToolkit.Maui.Views; + // ... -var popup = new Popup -{ - Content = new VerticalStackLayout + async void DisplayPopupButtonClicked(object? sender, EventArgs e) { - Children = + await this.ShowPopupAsync(new Label { - new Label + Text = "This is a very important message!" + }, new PopupOptions + { + CanBeDismissedByTappingOutsideOfPopup = false, + Shape = new RoundRectangle { - Text = "This is a very important message!" + CornerRadius = new CornerRadius(20, 20, 20, 20), + StrokeThickness = 2, + Stroke = Colors.LightGray } - } - } -}; -``` - -## Presenting a Popup - -Once the `Popup` has been built it can then be presented through the use of our `Popup` extension methods or through the [`IPopupService`](popup-service.md) implementation from this toolkit. + }) -> [!IMPORTANT] -> A `Popup` can only be displayed from a `Page` or an implementation inheriting from `Page`. - -```csharp -using CommunityToolkit.Maui.Views; - -public class MyPage : ContentPage -{ - public void DisplayPopup() - { - var popup = new SimplePopup(); + /**** Alternatively, Shell.Current can be used to display a Popup - this.ShowPopup(popup); + await Shell.Current.ShowPopupAsync(new Label + { + Text = "This is a very important message!" + }, new PopupOptions + { + CanBeDismissedByTappingOutsideOfPopup = false, + Shape = new RoundRectangle + { + CornerRadius = new CornerRadius(20, 20, 20, 20), + StrokeThickness = 2, + Stroke = Colors.LightGray + } + }) + ****/ } } ``` -## Closing a Popup +![Popup with padding](../images/views/popup/popup-with-padding.png "Popup rendering with padding around a simple label") -There are 2 different ways that a `Popup` can be closed; programmatically or by tapping outside of the popup. +Alternatively, a `Popup` can be created in XAML or C# and passed into `ShowPopupAsync()`. -### Programmatically closing a Popup +### Building a Popup in XAML -In order to close a `Popup` a developer must call `Close` or `CloseAsync` on the `Popup` itself. This is typically performed by responding to a button press from a user. +The easiest way to create a `Popup` is to add a new `.NET MAUI ContentView (XAML)` to your project. This will create 2 files: a _*.xaml_ file and a _*.xaml.cs_ file. -We can enhance the previous XAML example by adding an **OK** `Button`: +Replace the contents of _*.xaml_ with the following: -```xml - +```xaml + - -