The WPF Workspace – Quick Start


Nuget Package:

PM> Install-Package HBD.WPF.Shell

As the Workspace for WPF had been introduced a few day back. So is this post I would like to show you how to get started with that application.

I.  Module Implementation.

1. Add New Project

  • Open Visual Studio and create a new WPF User Control Library project with project name is WPF.Demo.Module.
  • Install the latest version of HBD.WPF.Shell from Nuget.
  • Add a new class named DemoStartup and inherited from HBD.WPF.Shell.Modularity.WpfModuleBase and then override 2 methods (GetStartUpViewTypes and MenuConfiguration(IShellMenuService menuSet)) as below.
  • Remember to add the ModuleExport attribute into your DemoStartup class.

2. Setup the Module_*.json

  • Add a new json named Module_Demo.json with the below content.

  • Set the build action of this config file is Copy Alway.

3. Add a new User control

  • Add a new class named ViewModel1.cs inside folder ViewModels as below.

  • Add a new User Control named View1.xaml inside Views folder with the code behind as below.

4. Setup the Public folder

  • Copy folder [Solution Directory]\packages\HBD.WPF.Shell\tools\Shell to [Solution Directory]\Published\Shell.
  • Right click on the project select Properties
  • Add below code into Post-build event

  • Set Start external program under Debug to [Solution Directory]\Published\Shell\HBD.WPF.Shell.exe
  • And set Working directory to [Solution Directory]\Published\Shell folder.
Debug Setup

5. Run the application with this Module.

  • After finished all above steps, the project shall look like below.

  • Build and Run the application you will see the new Demo menu had been added. When clicking on the child menu item the View1 will be open on the Tab control.

II. Source Code

Download the WPF.Demo.Module here.

Hope my Workspace is useful.

The Workspace for WPF Application Introduction


Nuget Package:

PM> Install-Package HBD.WPF.Shell

I. HBD.WPF.Shell Introduction

Similar with HBD.WinForms.Shell and HBD.App.Shell. In this post, I would like to introduce one more Shell Foundation for WPF Application. This open source project had been developed based on Prism and WPF technologies, that allow to add-in the Modules at run-time. So that you can use this project as a Foundation of your application and then develop and maintain your modules separately and independence.

The Main window

II. The Available Regions

When working with Prism, the region is one of the good features allow to organize display area and navigation of the controls in the application. As the screenshot above there are 7 regions are available in this Shell.

1. The Menu Region

This region will be used to display the main menu of the Shell. The main menu view will be loaded into the menu region when the application started and it can’t be replaced or deactivated and the menu view must be inherited the  HBD.Mef.Shell.Views.IShellMainView interface. So that the Shell will extract the view from Mef container based on this interface type.

The sample code of the main menu view.

The Main Menu View

2. The Right Region

This region will be used to display the notification center of the Shell. Similar to the main menu view. The notification center view will be loaded into the right region when clicked the bell icon on the menu view. However, it can be replaced or deactivated. This view also requires being inherited the  HBD.Mef.Shell.Views.IShellNotificationCenterView interface.

The Notification View

3. The Status Region

This region will be used to display the status view of the Shell. This view will be loaded at app start and can’t be replaced or deactivated. This view required to be inherited the HBD.Mef.Shell.Views.IShellStatusView interface.

4. The Main Region

This region will be used to display the Tab Control View that allows adding the custom views from the Modules. The same with Status View, This view will be loaded at app start and not allow to replace or deactivate. It also required being inherited the  HBD.Mef.Shell.Views.IShellMainView interface.

5. The Left Region

This region is available and will be shared for all modules. The look and feel are similar to the left region.

6. The Tab Region

This region must be defined in the Tab Control View to tell the Shell that all custom views from the modules will be displayed in the Tab Control.

The Tab Control View

7. The Title Region

When creating a custom view of the Module. The view header and view title need to be specified. The view title will be displayed on the Tab header and view header will be displayed in the title region.  However, only view title will be displayed when loading to the Left orRight region as the screenshot below. As the other view, this title view needs to be HBD.Mef.Shell.Views.IShellTitleView inherited the interface.

Title region

Just hightlight that all Views of this Shell had been implemented in the separate library named HBD.WPF.Shell.UI and export into Mef container. So that, you can customize the views by replace HBD.WPF.Shell.UI with the other library that content the full set of the above views.

Refer the source code of HBD.WPF.Shell.UI for more details.

III. The Built-inServices of the Shell.

Below built-in services had been developed along with this project. I will post a separate post for each service to discuss the usage and customization later. In this section just introduce the service functionality and how to use it.

Please note that all built-in service had been added into the HBD.WPF.Shell.ViewModels.ViewModelBase abstract class.  So recommend that all view model should be delivered from this class.

1. Dialog Service

The dialog service is providing the easy way to interact with the dialog as

  • Display a UserControl as dialog.
  • Open the file browser dialog
  • Open the Folder browser dialog.

The service is an instance of  HBD.WPF.Shell.Services.IDialogService interfaces and exported to the Mef container.

  • Sample code

  • Dialog screenshot

2. Message Box service

The message box service is providing the common dialog as Information, Alert, Confirm and Error message box and shared across the modules. So that message box will be displayed consistently.

This service is an instance of  HBD.WPF.Shell.Services.IMessageBoxService interfaces and exported to the Mef container.

  • Sample code
  • Information Box
  • Alert Box
  • Confirmation Box

3. Notification Service

The notification service allows to display a notification on the screen and added into Notification automatically.  This service is an instance of  HBD.WPF.Shell.Services.INotificationService interfaces and also exported to the Mef container.

  • Sample code
  • Notification Screenshot.

4. Status Service.

The status service allows displaying the message onto the Status bar of the Shell. This service is an instance of  HBD.WPF.Shell.Services.IShellStatusService interfaces and also exported to the Mef container.

  • Sample code
  • Screenshot

5. Other Services.

  • Navigation Executer: this service will help to execute the  INavigationParameter
  • Shell Option Service: this service will save the states of the application: current position, current theme, window state and more.
  • Shell Region Navigation Service: This service provides an easy way to navigation between the views and regions.

6. Upcoming Services.

The services below are under development and hope it will be release soon.

  • Authentication service: this service will be using the Open Authentication technology that allows the application interact with the OAuth services as Google, Facebook, Outlook, Linked-In, and Twitter.
  • Module management service: that allow downloading, import and manage the Modules in the Shell.

Just hightlight that all Services of this Shell had been implemented in the separate library named HBD.WPF.Shell.Services and export into Mef container. So that, you can customize the views by replace HBD.WPF.Shell.Services with the other library that content the full set of the services above.

Refer the source code of HBD.WPF.Shell.Services for more details.

IV. Implement the new Module.

Please refer here for the quick star with Module development here.

V. Source code

You can download the full source code of this Shell here. All the controls of this Shell had been customized from the Microsoft standard controls. So that feel free to use this project for your business.