The One With

Designing beautiful apps is not an easy task. But with DXv2, building beautiful Metro inspired applications is easier than ever. Let me show you how:

Prepare the project

Create a new WinForms Project and add a DevExpress Form to it. This will be the main or “home” screen for the app.

We’ll need to bring in two assemblies:

1: DevExpress.Metro.Navigation: This assembly contains sample code for building basic Metro inspired layouts and navigation. You will also find additional goodies like Transitions, which you can use in other areas of your app.

2: MetropolisDark4Touch: This is a new Metropolis Dark skin that has been optimized for touch. We’ll register it like so:

static void Main() {
    DevExpress.Skins.SkinManager.Default.RegisterAssembly(
        typeof(DevExpress.UserSkins.MetropolisDark).Assembly
    );

    DevExpress.LookAndFeel.UserLookAndFeel.Default.SetSkinStyle(
        "Metropolis Dark 4 Touch"
    );

    DevExpress.Skins.SkinManager.EnableFormSkins();

    Application.EnableVisualStyles();
    Application.SetCompatibleTextRenderingDefault(false);
    Application.Run(new DXv2());
}

Add your business screens

After we prepare the app for Metro, we can start designing our screens. For the home screen, we’ll use the new TileControl.

Note: You can watch the Getting Started with Tile Control Video here.

To build a new app screen we simply create a new DevExpress Form and customize it to our needs. For example, a simple customers list displayed in a Grid at design time:

To switch to this screen in our app, simply invoke it from the click event:

private void CustomersItem_Click(object sender, TileItemEventArgs e) {
    this.GoTo<Customers>();
}

And that’s pretty much it

Download the sample app and skin here. (Build: 11.2.7+)

Cheers

Azret

EDIT: We have integrated this and many other features of building Windows 8 UI into a Document Manager. Document Manager ships with DXperience along with a brand new Metropolis Dark and Metropolis Light application skins.