/WpfMaterialForms

Schema generated material dialogs in WPF

Primary LanguageC#MIT LicenseMIT

WPF Material Forms

NuGet - Install-Package WpfMaterialForms

A windows and dialogs library using Material Design In XAML Toolkit and MahApps.Metro.

The dialogs and windows are generated dynamically from data schemas. The API is aimed to be detached from XAML/WPF and the underlying libraries.

Check out MaterialForms.WpfDemo for easy to follow examples.

Examples

Basic dialogs

await WindowFactory.Alert("Hello World!").Show();
bool? result = await WindowFactory.Prompt("Delete item?").Show();

Customized dialogs

login

{
    Title = "Please log in to continue",
    PositiveAction = "LOG IN",
    Form = new MaterialForm
    {
        new StringSchema
        {
            Name = "Username",
            IconKind = PackIconKind.Account
        },
        new PasswordSchema
        {
            Name = "Password",
            IconKind = PackIconKind.Key
        },
        new BooleanSchema
        {
            Name = "Remember me",
            IsCheckBox = true
        }
    },
	Theme = DialogTheme.Light // DialogTheme.Dark
}

settings

{
    Title = "Settings",
    Form = new MaterialForm
    {
        new CaptionSchema
        {
            Name = "Connectivity"
        },
        new BooleanSchema
        {
            Name = "WiFi",
            IconKind = PackIconKind.Wifi,
            Value = true
        },
        new BooleanSchema
        {
            Name = "Mobile Data",
            IconKind = PackIconKind.Signal
        },
        new CaptionSchema
        {
            Name = "Device"
        },
        new NumberRangeSchema
        {
            Name = "Volume",
            IconKind = PackIconKind.VolumeHigh,
            MinValue = 0,
            MaxValue = 10,
            Value = 5
        },
        new KeyValueSchema
        {
            Name = "Ringtone",
            Value = "Over the horizon",
            IconKind = PackIconKind.MusicNote
        }
    }
}

email

{
    Title = "Send e-mail",
    PositiveAction = "SEND",
    Form = new MaterialForm
    {
        new StringSchema
        {
            Name = "To",
            IconKind = PackIconKind.Email
        },
        new StringSchema
        {
            Name = "Message",
            IsMultiLine = true,
            IconKind = PackIconKind.Comment
        }
    }
}

dialog

{
    Message = "Discard draft?",
    PositiveAction = "DISCARD"
}

How to use

In a WPF project

In your App.xaml you need to have the following resources included. If you are using Material Design in XAML for you UI you will have those already declared (the color theme does not matter).

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Yellow.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Outside of WPF (WinForms, Console)

You need to call this method only once before creating any Material window or dialog (in Main or somewhere during startup):

MaterialApplication.CreateApplication();

If you need a message loop you can call MaterialApplication.RunDispatcher();

Before stopping your application you need to shut down explicitly:

MaterialApplication.ShutDownApplication();

API guide

The MaterialDialog class describes displayed dialog contents { Title, Message, Form, PositiveAction, NegativeAction, ... }

The MaterialForm class is a list of data schemas that display as controls inside the dialogs. Schemas can hold values and can be given keys. You can access schema values in different ways:

string username = (string)Form["username"];
Dictionary<string, object> dictionary = Form.GetValuesDictionary();
List<object> schemaValues = Form.GetValuesList();

Dialogs can be hosted in two contexts: in a new WPF Window or in an existing DialogHost.

To host within a DialogHost, call await dialog.Show("DialogIdentifier") where "DialogIdentifier" is the DialogHost.Identifer that you specify in your window.

To host within a new Window, create a new MaterialWindow(dialog). MaterialWindow abstracts WPF Window properties and binds them automatically { Title, Width, Height, ShowCloseButton, ... }. To show the created window call await window.Show().

The async Show() method returns a bool? value. Usually true represents positive action click, false negative action click, and null that the dialog has been closed by other means.

The ShowTracked() method returns a Session object, which you can use to close the dialog host from code. If a dialog has been shown using ShowTracked, you can await its session.Task.