A netizen asked: How to pop up a dialog box in a Prism Module? Like the main interface popping up an About dialog?
About dialog popup effect:
The effect is average; if a designer is involved, it could look very nice.
This article won't go into great detail; you can check the source code for specifics (repository link at the end). Also, for Prism learning, refer to the following articles:
- NET Core 3.x WPF MVVM Framework Prism Series (applicable to later versions)
https://dotnet9.com/album/wpf-prism
- WPF Enterprise Development Framework Setup Guide (Revelation), 2020 from Beginner to Abandonment
https://jhrs.com/2020/37391.html
1 How is the About dialog popped up?
1.1 Generic dialog window registration
App.xaml.cs
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
...
containerRegistry.RegisterDialogWindow<DialogWindow>();// Register custom dialog window
...
}
As shown above, RegisterDialogWindow is the code for registering the dialog window, meaning all popped dialogs are wrapped inside DialogWindow. The code is simple so I won't paste it; just know it's a Window. See the source code for details: DialogWindow.
1.2 Actual dialog registration
Also in App.xaml.cs, the following code registers the actual dialogs: QQ Group dialog, About dialog, Recommended Website dialog, etc. The string in parentheses (e.g., "About") is used to identify the dialog when popping it up. Note: The actual dialogs are based on UserControl, so they can be embedded into RegisterDialogWindow (which is a Window).
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
...
containerRegistry.RegisterDialogWindow<DialogWindow>();// Register custom dialog window
containerRegistry.RegisterDialog<QQGroupView, QQGroupViewModel>("QQGroup");
containerRegistry.RegisterDialog<AboutView, AboutViewModel>("About");
containerRegistry.RegisterDialog<WebView, WebViewModel>("Web");
...
}
1.3 Menu trigger for showing the dialog
This is even simpler, directly used in XAML. For example, the About menu in the main window:
<menuitem
Command="{Binding RaiseShowDialogCommand}"
CommandParameter="About"
Header="{markup:I18n {x:Static i18NResources:Language.About}}"
>
<MenuItem.Icon>
<Path
Width="16"
Data="{StaticResource InfoGeometry}"
Fill="{DynamicResource SuccessBrush}"
/>
</MenuItem.Icon>
</menuitem>
RaiseShowDialogCommand is defined in the base class ViewModelBase. The actual call code is:
/// <summary>
/// Show dialog
/// </summary>
/// <param name="dlgName"></param>
private void RaiseShowDialogHandler(string dlgName)
{
DialogService.ShowDialog(dlgName);
}
The parameter dlgName is the string specified when registering the dialog in section 1.2, determined by the situation.
2 How to pop up dialogs in a Module?
This section is the focus of this article.
2.1 Key: IModule's RegisterTypes method
Modules are loaded dynamically. Dialogs in a module cannot be written in App.xaml.cs, right? If you are familiar with Prism, look at each module's entry class that implements IModule, specifically the method RegisterTypes(IContainerRegistry containerRegistry). Here you can inject types and dialogs used by the module, which can be used by this module or other modules.
2.2 Implementing a module dialog
Take the LQClass.ModuleOfLog module as an example. We register the add log dialog below:
public void RegisterTypes(IContainerRegistry containerRegistry)
{
...
containerRegistry.RegisterDialog<AddView, AddViewModel>("AddLogView");
...
}
AddView is the add log view, no different from a regular user control. You can refer to how the About dialog is written. The view link for this project is AddView.xaml.
2.3 How to call it?
The calling method is the same as the main window menu. Code file path: src\LQClass.AdminForWPF\Modules\LQClass.ModuleOfLog\Views. The Add button declaration is as follows:
<Button
Margin="10,15,10,0"
Style="{StaticResource ButtonSuccess}"
Command="{Binding RaiseShowDialogCommand}"
CommandParameter="AddLogView"
Content="{markup:I18n {x:Static i18NResources:Language.Add}}"/>
The command parameter AddLogView is the name given when registering the view in section 2.2.
Effect as shown below, just a demonstration of how to pop up a dialog in a module, no actual business logic:
3 How to run the project?
Note: The service side of this project is built with WTM, and the client is written in WPF.
3.1 Running the service side
If you need to run and see the client effect, first compile the service side src\LQClass.Admin. As for how to compile, please search on your own if you don't know. After successful compilation, debug and run the service project, or double-click the service exe: src\LQClass.Admin\LQClass.Admin\bin\Debug\net5.0\LQClass.Admin.exe. The service defaults to port 5000.
3.2 Running the WPF client
If you only want to look at the source code, you can skip this step.
Make sure the client's connection address to the service is correct in App.config:
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<appSettings>
...
<add key="API" value="http://localhost:5000/api/"/>
</appSettings>
...
</configuration>
Project path: src\LQClass.AdminForWPF. After successful build, debug the client project, or double-click the client exe: \src\LQClass.AdminForWPF\Build\LQClass.AdminForWPF.exe to run the client.
Default backend admin account:
admin
000000
Finally, a full demonstration:
Repository (issues welcome): https://github.com/dotnet9/lqclass.com