Mopups 1.3.1

dotnet add package Mopups --version 1.3.1
NuGet\Install-Package Mopups -Version 1.3.1
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Mopups" Version="1.3.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Mopups --version 1.3.1
#r "nuget: Mopups, 1.3.1"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Mopups as a Cake Addin
#addin nuget:?package=Mopups&version=1.3.1

// Install Mopups as a Cake Tool
#tool nuget:?package=Mopups&version=1.3.1

<br /> <p align="center"> <h1 align="center">Mopups</h3> <p align="center"> Customisable Popups for MAUI <br /> </p> </p>

Table of Contents

NuGet Downloads nuget

About The Project

Mopups is a replacement for the "Rg.Plugins.Popups" plugin for Xamarin. Mopups intends to provide a similar experience to this plugin, however also clean up the code base and provide forward looking enhancements. Developers familar with the original plugin should find it a smooth transition, but we do recommend reading the wiki and reaching out with any issues.

The "PreBaked" is a neat blend of Mopups and AsyncAwaitBestPractices plugins to bring you a quick way to add popups into your MAUIs App using familiar concepts

Platforms Supported (Current)

  • Android
  • iOS
  • Windows
  • MacOS (Mac Catalyst) (This is a bit iffy..)

Below is a video by @jfversluis introducing Mopups Watch the video

Getting Started

First, you must follow the initialisation

Installation

You can install the nuget by looking up 'Mopups' in your nuget package manager, or by getting it here

Usage

here is an example of what this plugin makes easy (Looks slow due to giphy)

Gif Example

New Example

To Use the plugin for its inbuilt popup pages in a basic setting (Dual/Single Response, Login, TextInput EntryInput,and loader.) All you need are these one liners

SingleResponse Popup Page

return await SingleResponseViewModel.AutoGenerateBasicPopup(Color.HotPink, Color.Black, "I Accept", Color.Gray, "Good Job, enjoy this single response example", "thumbsup.png");

DualResponse Popup Page

return await DualResponseViewModel.AutoGenerateBasicPopup(Color.WhiteSmoke, Color.Red, "Okay", Color.WhiteSmoke, Color.Green, "Looks Good!", Color.DimGray, "This is an example of a dual response popup page", "thumbsup.png");

Loader Popup Page

  await PreBakedMopupService.GetInstance().WrapTaskInLoader(Task.Delay(10000), Color.Blue, Color.White, LoadingReasons(), Color.Black);

Text Input PopupPage

await TextInputViewModel.AutoGenerateBasicPopup(Color.WhiteSmoke, Color.Red, "Cancel", Color.WhiteSmoke, Color.Green, "Submit", Color.DimGray, "Text input Example", string.Empty);

Entry Input PopupPage

await EntryInputViewModel.AutoGenerateBasicPopup(Color.WhiteSmoke, Color.Red, "Cancel", Color.WhiteSmoke, Color.Green, "Submit", Color.DimGray, "Text input Example", string.Empty);

LoginPage PopupPage

var (username, password) = await LoginViewModel.AutoGenerateBasicPopup(Color.WhiteSmoke, Color.Red, "Cancel", Color.WhiteSmoke, Color.Green, "Submit", Color.DimGray, string.Empty, "Username Here", string.Empty, "Password here", "thumbsup.png", 0, 0);

or, to return from the loader a value

await PreBakedMopupService.GetInstance().WrapReturnableTaskInLoader<bool, LoaderPopupPage>(IndepthCheckAgainstDatabase(), Color.Blue, Color.White, LoadingReasons(), Color.Black);

you can also add in synchronous functions, however they are wrapped in a task


private bool LongRunningFunction(int millisecondDelay)
{
    Thread.Sleep(millisecondDelay);
    return true;
}
await PreBakedMopupService.GetInstance().WrapReturnableFuncInLoader(LongRunningFunction, 6000, Color.Blue, Color.White, LoadingReasons(), Color.Black);

That's it! for advanced usage read on

In Version 1.2.0, Mopups has added some pre created pages that can provide users the ability to return data from popups. I have also added the ability to overload the look of these pages and create your own.

I do wish it were simpler, however, with the limited time i have to work on this, it'll have to do.

This set of API's will be used for when the basic API wont cut it, without relying on me making another overload for every situation under the sun.

This API introduces

GeneratePopup<TPopupPage> Which allows you to supply your own popuppage xaml which will then be attached to whatever VM you called it from.

GeneratePopup(Dictionary<string, object> propertyDictionary) Which allows you have a dictionary of values that a popup uses, pass and automatically attach to the appropriate properties on the VM side

These are both non-static. and require you to have an instance of the ViewModel to work with. Hence

<ViewModelClassNameHere>.GenerateVM() Which provides you with a new instance of that VM

<ViewModelClassNameHere>.PullViewModelProperties() Which collects all the properties of a VM, and provides them to you in a dictionary, so you can reuse and also while debugging, check what exists/whats been changed Returns this Dictionary<string, (object property, Type propertyType)>

However, for initialisation, i internally (and you can use) the following function <ViewModelClassNameHere>.InitialiseOptionalProperties(Dictionary<string, object> optionalProperties) Which will attempt to set each of the viewmodel properties with the corrosponding value in the dictionary

So, to fix that, i provide <ViewModelClassNameHere>.FinalisePreparedProperties(Dictionary<string, (object property, Type propertyType)> viewModelProperties) Which takes in the Dictionary<string, (object property, Type propertyType)> and creates Dictionary<string, object> optionalProperties

If you want to make your own Popup Page

This is the real power of this Plugin . If you look at the source for DualResponsePopupPage, or the SingleResponse version you'll notice that they are just simple Xaml Pages. Nothing fancy.

You can create the full thing yourself

  1. Create Xaml Page with codebehind
  2. Create your ViewModel that is associated with the popup, lets call ours InformationPopupPage
  3. Ensure your ViewModel inherits from PopupViewModel<TReturnable> where TReturnable is what you want the popuppage to return to its caller
  4. Ensure that your xaml page codebehind inherits from PopupPage (requirement to use rg plugins popup) and IGenericViewModel<TViewModel> where TViewModel is your Viewmodel, in our case it will be IGenericViewModel<InformationPopupPage>
  5. You're ready to start using it the same as DualResponsePopupPage

or you can provide your own Xaml Page, with a codebehind that inherits from PopupPage and IGenericViewModel<TViewModel> where TViewModel is the plugin provided VM you wish to use.

to use this version, just call TViewModel.GeneratePopup<YourXamlPopupPage>()

License

This project uses the MIT License

Contact

My Github,

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-android34.0 is compatible.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-ios17.0 is compatible.  net8.0-maccatalyst was computed.  net8.0-maccatalyst17.0 is compatible.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net8.0-windows10.0.19041 is compatible. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (5)

Showing the top 5 NuGet packages that depend on Mopups:

Package Downloads
PolyhydraGames.Core.Maui

Package Description

UraniumUI.Dialogs.Mopups

Uranium is a Free & Open-Source UI Kit for MAUI.

Mopups.PreBaked

Transition Package for AwaitablePopups to use Mopups and Maui This package contains pre-built Popups for use in MAUI, see https://github.com/LuckyDucko/AwaitablePopups

Codecell.PersiandatePicker.MAUI

Persian DatePicker Control for .NET MAUI

ControlDays.Calendar.Maui

MauiDays is a .NET MAUI library that provides a customizable month and day calendar popup selector, along with a calendar page. It allows developers to easily add date selection functionality to their .NET MAUI apps.

GitHub repositories (3)

Showing the top 3 popular GitHub repositories that depend on Mopups:

Repository Stars
enisn/UraniumUI
Uranium is a Free & Open-Source UI Kit for MAUI.
LuckyDucko/Mopups
Popups For MAUI
ewerspej/maui-samples
Sample repository for various .NET MAUI, C# and MVVM features covered in blog
Version Downloads Last updated
1.3.1 12,843 3/8/2024
1.3.0 26,888 1/14/2024
1.2.0 57,622 10/9/2023
1.1.1 136,448 2/6/2023
1.1.0 57,395 12/5/2022
1.0.4 10,325 10/23/2022
1.0.3 1,150 9/18/2022
1.0.2 1,311 8/29/2022
1.0.1 3,012 7/13/2022
1.0.0 767 6/22/2022
1.0.0-preview.14.1 180 6/11/2022
0.0.1 292 2/13/2022

Added in several fixes from the community