[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]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
   [Expand]Building Outlook-Inspired and Hybrid UI Applications
   [Collapse]Building Office-Inspired Applications
     Lesson 1 - Scaffolding
     Lesson 2 - Creating a Table View
     Lesson 3 - Creating a Card View
     Lesson 4 - Creating a Main View
 [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]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 1 - Scaffolding

DevExpress UI controls are designed specifically to help you build Microsoft Office-inspired applications quickly and easily.

This quick start article will guide you through the process of building an Office-inspired Contact Management application - a Personal Organizer.

Note

The complete project for Visual Studio 2012 or later is available in the T111486: How to: Build an Office-inspired Application example.

Expanded Step 1 - Create a Basic Project with the DevExpress Template Gallery

The DevExpress Template Gallery is a Visual Studio project wizard that scaffolds the project structure for the style of app you wish to build.

To create a project, select FILE | New | Project… in the main menu of Visual Studio. In the New Project dialog, select DevExpress v18.1 Template Gallery and click OK.

The DevExpress Template Gallery provides project templates for each platform. You can filter templates by platform using the Platform dropdown.

Select the Blank Application template, specify the project name as "PersonalOrganizer" and click Create Project.

Once the application is created, you can customize the main window. DevExpress components provide design-time functionality that allows you to set properties with smart tag menus. The screenshot below highlights the options used to set the application theme or change the window type.

Expanded Step 2 - Create a Model Layer

You will use Entity Framework Code First, which automatically generates a database during the application's initial load. First, add the Entity Framework libraries to the application. The easiest way to do this is by using NuGet. To use NuGet, select PROJECT | Manage NuGet Packages…, locate the Entity Framework package and click the Install button.

Next, copy the data classes (the Model folder) from the completed solution and register ContactContextInitializer to populate the database with initial data.

Expanded Step 3 - Create a ViewModel Layer

The database contains only one entity – Contact.

The application will arrange contacts in two Views: a grid and a card view. The DevExpress Scaffolding Wizard, available in the Template Gallery, allows you to easily generate a backing ViewModel with a flexible structure and basic capabilities such as editing and saving. Right-click the PersonalOrganizer project in the Solution Explorer and select Add DevExpress Item | New Item to run the Template Gallery.

Select the Collection View Model template, click Run Wizard and select the data model.

Follow the remaining steps to complete ViewModel generation and get the resulting ContactCollectionViewModel class.

Expanded See Also

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