Custom content for Dialogs

[slimshader]

Hey,

I know how to use IContentDialogService to show simple dialogs but how to use this service to show Dialogs with additional input fields like TextBoxes etc. to create modal forms?

[Mithicor]

I create a new "Page" and then change it to a ui:ContentDialog:

<ui:ContentDialog x:Class="MyProgram.Dialogues.AddUserDialog"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                  xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
                  Title="ADD USER"
                  ui:Design.Background="{ui:ThemeResource ApplicationBackgroundBrush}"
                  ui:Design.Foreground="{ui:ThemeResource TextFillColorPrimaryBrush}"
                  DialogMaxWidth="1200"
                  mc:Ignorable="d">

    <ui:ContentDialog.Resources>
        <Style BasedOn="{StaticResource {x:Type ui:ContentDialog}}" TargetType="{x:Type L:AddUserDialog}" />
    </ui:ContentDialog.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="35"/>
            <RowDefinition Height="5"/>
            <RowDefinition Height="35"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Text="EMPLOYEE ID:"/>
        <ui:TextBox Grid.Row="0" Grid.Column="2" Text="{Binding EmployeeID}"/>

        <TextBlock Grid.Row="2" Grid.Column="0" Text="FULL NAME:"/>
        <ui:TextBox Grid.Row="2" Grid.Column="2" Text="{Binding FullName}"/>
        </Grid>
    </Grid>
</ui:ContentDialog>

---

namespace MyProgram.Dialogues;

public partial class AddUserDialog : ContentDialog
{
  public AddUserDialog(ContentPresenter contentPresenter, MainWindowVM mainWindowVM) : base(contentPresenter)
  {
      Dashboard = mainWindowVM;
  
      InitializeComponent();
  }
  
  protected override void OnButtonClick(ContentDialogButton button)
  {
      if (button.ToString() == "Close")
      {
          base.OnButtonClick(button);
          return;
      }
      else
      {
          //DO SOMETHING HERE
      }
  }
  
  
  
  public MainWindowVM Dashboard { get; }
}

[slimshader]

Looking good, I am assuming you just then ShowUserDialog.ShowAsync() directly without Icontentdialogservice involved?

Edit: is there a way to inject a ViewModel to such dialog?

[Mithicor]

It is called with the IContentDialogService, which I have declared as _dialogService.

I call it from a method in my Main Viewmodel like so:

var NewContentDialog = new AddUserDialog(_dialogService.GetContentPresenter(), this)
{
    Title = "ADD NEW USER",
    PrimaryButtonText = "CREATE USER",
    SecondaryButtonText = "",
    CloseButtonText = "CANCEL"
};


var result = await NewContentDialog.ShowAsync();

if (result == ContentDialogResult.Primary)
{
    _snackbarService.Show(
                "SUCCESS",
                "A new User was created.",
                ControlAppearance.Success,
                new SymbolIcon(SymbolRegular.Fluent24), TimeSpan.FromSeconds(SnackBarDuration));

    _ = OnRefreshData("False");
}
else
{
    _snackbarService.Show(
                "PROCESS CANCELLED",
                "No User was created.",
                ControlAppearance.Danger,
                new SymbolIcon(SymbolRegular.Fluent24), TimeSpan.FromSeconds(SnackBarDuration));
}

and yes, you can pass the ViewModel to it.

var NewContentDialog = new AddUserDialog(_dialogService.GetContentPresenter(), this)
{
    Title = "ADD NEW USER",
    PrimaryButtonText = "CREATE USER",
    SecondaryButtonText = "",
    CloseButtonText = "CANCEL"
};

"this" represents the ViewModel it was called from.