Adding password box to input dialog in Mahapps Metro?

Question

I have a sample code for an input dialog that works perfectly in Mahapps Metro and only I need to change the text field to a password field. The actual dialog is found in this cs file and xaml file.

That sounds simple enough, all I have to do is pretty much just modify the xaml file With a password box, but keep everything else the same. Only problem is, to activate the dialog box a method is called in DialogManager called ShowInputAsync() that instantiates the InputDialog. Problem is, the constructor is internal.

namespace MahApps.Metro.Controls.Dialogs
{
    public partial class InputDialog : BaseMetroDialog
    {
        internal InputDialog(MetroWindow parentWindow, MetroDialogSettings settings)
            : base(parentWindow, settings)
        {
            InitializeComponent();
        }

The code from the DialogManager

using MahApps.Metro.Controls;
using MahApps.Metro.Controls.Dialogs;

namespace order
{
    public static class DialogManager
    {
        public static Task<string> ShowInputAsync(this MetroWindow window, string title, string message, MetroDialogSettings settings = null)
        {
            window.Dispatcher.VerifyAccess();
            return HandleOverlayOnShow(settings, window).ContinueWith(z =>
            {
                return (Task<string>)window.Dispatcher.Invoke(new Func<Task<string>>(() =>
                {
                    if (settings == null)
                        settings = window.MetroDialogOptions;

                    //create the dialog control
                    InputDialog dialog = new InputDialog(window, settings); // this is where I need my own dialog created (xaml/cs files)

Is there a way to re-use the code, or do I have to just Write all this plumbing from scratch?

Answer 1

Here is a simple function for achiving a basic login in Mahapps:

 private async void ShowLoginDialog(object sender, RoutedEventArgs e)
    {
        LoginDialogData result = await this.ShowLoginAsync("Authentication", "Enter your credentials", new LoginDialogSettings { ColorScheme = this.MetroDialogOptions.ColorScheme, InitialUsername = "MahApps"});
        if (result == null)
        {
            //User pressed cancel
        }
        else
        {
            MessageDialogResult messageResult = await this.ShowMessageAsync("Authentication Information", String.Format("Username: {0}\nPassword: {1}", result.Username, result.Password));
        }
    }

It can be found in the MahApps Github .It can be called like this if you want it simplified

ShowLoginDialog(null,null);

Answer 2

Since it is internal, you can always access the constructor in a class if it is located in the same namespace. Although this is usually a bad programming practice, you can inherit from that class in a new class located in MahApps.Metro.Controls.Dialogs:

namespace MahApps.Metro.Controls.Dialogs
{
    public class MyCustomDialog : InputDialog
    {
         public MyCustomDialog(MetroWindow parentWindow, MetroDialogSettings settings) : base(parentWindow, settings)
         {
         // Your custom code here
         }
    }
}

This is just an idea. Hope it helps!

Edit: Just found this here: How to add a passwordbox to dialog in Mahapp Maybe it will help.

Answer 3

I needed a custom Input Dialog. So I Created a CustomInputDialog class inherited from BaseMetroDialog.

I used this code to call the method:

public async Task<string> ShowCustomDialog(string message, string title)
        {
            var metroDialogSettings = new MetroDialogSettings()
            {
                AffirmativeButtonText = "OK",
                NegativeButtonText = "CANCEL",
                AnimateHide = true,
                AnimateShow = true,
                ColorScheme = MetroDialogColorScheme.Accented,
            };

            var dialog = new CustomInputDialog(View, metroDialogSettings)
            {
                Message = message,
                Title = title,
                Input = metroDialogSettings.DefaultText
            };

            return await InvokeOnCurrentDispatcher(async () =>
            {
                await View.ShowMetroDialogAsync(dialog, metroDialogSettings);

                await dialog.WaitForButtonPressAsync().ContinueWith((m) =>
                    {
                        InvokeOnCurrentDispatcher(() => View.HideMetroDialogAsync(dialog));
                    });

                return dialog.Input;
            });
        }

You can add a password box or whichever view you choose to display. You can look at the code in Mahapps.Metro's InputDialog for example

Like Message, Title and Input are dependency properties of CustomInputDialog. This is working at my end.