[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Expand]Controls and Libraries
 [Collapse]Scaffolding Wizard
   Getting Started
  [Expand]Overview
  [Expand]Data Access Layer
   UI Generation
  [Expand]Examples
  [Collapse]Tutorials
   [Collapse]Building Outlook-Inspired and Hybrid UI Applications
     Lesson 1 - Automatically Generate Outlook-Inspired and Hybrid User Interfaces From Entity Framework
     Lesson 2 - Show Splash Screen on the Start of the Application
     Lesson 3 - Customize Layout of the Collection Views
     Lesson 4 - Show Sparkline Charts in Grid Cells
     Lesson 5 - Use Cards Layout in Collection Views
     Lesson 6 - Use Master-detail Data Representation in Collection Views
     Lesson 7 - Using Conditional Formatting in Grid
     Lesson 8 - Add Advanced End-user Filtering Functionality to Applications
     Lesson 9 - Show Windows 8-style Toast Notifications
     Lesson 10 - Add Windows 7-style Jump List to the Application
     Lesson 11 - Add Custom Actions to Application's Taskbar Thumbnail
   [Expand]Building Office-Inspired Applications
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 1 - Automatically Generate Outlook-Inspired and Hybrid User Interfaces From Entity Framework

This lesson describes how to generate Outlook-Inspired and Hybrid user interfaces from an Entity Framework Code First data model. The DevExpress.OutlookInspiredApp EF data model only and DevExpress.HybridApp EF data model only projects can be used as a starting point for this tutorial, as they already contain the Entity Framework data model and code that fills the database with sample data.

Note

To learn how to create an application using Scaffolding Wizards from the scratch, see the first lesson of the Building Office-Inspired Applications tutorial.

Expanded Step 1 - Data Structure

Both sample projects contain several classes representing a simple CRM data model.

All data model objects are inherited from the base DatabaseObject class that provides the primary key property and implements the IDataErrorInfo interface:

If you compile and run the downloaded project for the first time, you will see a splash screen indicating that the sample data is being generated.

Expanded Step 2 - Generate the Outlook-inspired UI

First, make sure you have rebuilt the DevExpress.OutlookInspiredApp project, so the Scaffolding Wizard can find and analyze the Data Access layer represented by the DepartmentContext class.

Right-click the project in Solution Explorer and select Add | New item. In the invoked New Item dialog, expand Templates | Visual C# and select the Windows category. Then, select the DevExpress Template Gallery item.

In the invoked DevExpress Template Gallery window, find and run the MS Outlook Inspired Solution template wizard.

In the Scaffolding Wizard window, select the DevAVDb Entity Framework model and click Next.

Follow the steps to complete building the Outlook Inspired MDI View as demonstrated in the screenshots below.

Rebuild the project. Drop the generated DevAVDbView user control (the root view for the generated Tabbed MDI UI) from the Toolbox onto the MainWindow.

Invoke the context menu on the dropped control and select the Layout/Reset All command.

The order and display names of modules in the UI are defined in the DevAVDbViewModel.CreateModules method.

Change it as shown in the code snippet below.

Run the application.

Expanded Step 3 - Generate the Hybrid UI

To generate the Hybrid UI, perform the same actions as described in the previous step with DevExpress.HybridApp and select the Hybrid UI Mdi View wizard in the DevExpress Template Gallery.

Change the order and display names of modules in the UI in the DevAVDbViewModel.CreateModules method and specify the second module as the startup module:

Run the application.

Expanded Step 4 - Result

Scaffolded applications provide a lot of functionality out of the box. In the following lessons of this tutorial, you will extend them to match specific requirements.

To learn more about the application structure Scaffolding Wizards generate, refer to the Structure of Classes in a Scaffolded Application topic.

Expanded See Also

Is this topic helpful?​​​​​​​