Tag: metro

Intro

I recently had the opportunity to use a beta release of the WPF controls coming in the exciting new 2012.1 release of DevExpress DXv2. This release is a major one for DevExpress’ WPF suite, the biggest addition being a set of Metro-inspired controls. With these controls, developers will have the ability to create desktop applications that look and feel like Windows 8 Metro apps. I had previously only used the ASP.NET controls from DevExpress, and I was pleasantly surprised at how easy it was to pick up the WPF controls and start using them. Here is a quick review of my impressions.

Install Experience

Even the installer has been given the Metro treatment. It looks cool, clean and simple. It feels more like an application than an installer. Kudos to the team for not forgetting how important first impressions can be. Here are a couple of the installer screens.

^{Figure 1 – Installer Welcome Screen}

^{Figure 2 – Ready to Install}

Demo Center

After the installer completes, it launches a Metro-styled Demo Center. There are several WPF demo applications to explore, including Video Rental, Realtor World, a Stock Market Trader and a mail client. The full source is available for each of the demo applications as well. I decided to explore the Realtor World app because it looks and feels like a Windows 8 Metro app.

^{Figure 3 – The Demo Center}

^{Figure 4 – WPF Demos}

Realtor World includes a main screen with Windows 8 styled buttons to navigate to the other screens in the app. The other screens show off controls like a Metro-styled listbox, graphs and charts. It is a cool-looking app that looks like something you would install from the Windows Marketplace in Windows 8.

^{Figure 5 – Realtor World Main Screen}

^{Figure 6 – Realtor World Loan Calculator}

WPF Project Templates

When you start a new WPF project, you have a couple of options. You can create a regular WPF Application project, or you can use the DXperience v12.1 WPF Application project template that is included with the controls.

^{Figure 7 – The New Project Dialog}

If you choose the DevExpress template, you are presented with another dialog where you can choose which features to include in the main dialog of your new application, such as Dock Manager, Toolbar Manager, Ribbon, Grid, Theming and others. Each of those features can be tweaked from the dialog. For example, if you choose to include the dock manager, you can select from different styles for the docked windows. One of the styles looks like Visual Studio tool windows which can be pinned, auto-hide or float. The can look even more like Visual Studio windows if you choose the Visual Studio 2010 theme for your application.

Controls

After playing around with the demos and tools for building a new project, I decided to get down to business and start a new project as if I were building a real application from scratch. When I build WPF apps, always use the Model-View-ViewModel (MVVM) pattern and usually use Laurent Bugion’s open source MVVM Light Toolkit. I found that the DXv2 controls’ data binding just works in MVVM applications.

Overall, the controls are intuitive to use and good-looking too. I built a simple music library application on top of the Chinook database. I used a DXRibbonWindow with the MetropolisDark theme, a BarManager, DockLayoutManager, a GridControl, and the TileLayoutControl. I am still working on enhancing the app, but putting together a nice looking read-only UI took only a few hours.

^{Figure 8 – Building ‘My Music Library’ in Expression Blend (In Progress)}

Summary

I had a lot of fun developing with the WPF controls in DXv2. I am really looking forward to spending more time with the controls and enhancing my application. You can download and try a trial version of the tools today. I think you will be as impressed as I was.

Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”