WinForms and WPF Tile Navigation Control (Coming Soon in v14.1)

Thinking Out Loud
16 April 2014

If you’ve ever used Microsoft Dynamics CRM, then you are familiar with its innovative navigation menu and breadcrumbs with 3 levels of hierarchy. In our upcoming major update v14.1 (scheduled for release late May, 2014), you’ll be able to introduce this very UI to your next WinForms and WPF application with ease.

Microsoft Dynamics Inspired Tile Navigation Pane

WinForms and WPF TileNav Pane

Designed to be positioned at the top of your application window (like a Ribbon), the TileNavPane can be thought of as a touch-friendly version of traditional navigation elements used within Windows desktop apps. With it, you and your end-users will be able to:

  • Navigate the app’s structure much like our Outlook-inspired Navigation Bar.
  • Introduce animations within the NavPane using our new Transition Manager Control.
  • Quickly determine where the user is within the application’s navigation hierarchy.
  • Display and activate a drop down menu with sub nodes for each Tile.
  • Fully customize individual Tiles and associated drop down menus (from its height and appearance all the way to group header look and feel).
  • Use custom Tile buttons and custom category buttons.
  • Manage navigation processes using the SelectedElementChanging event.


TileNav Pane with Custom Buttons

Microsoft Dynamics Inspired Tile Navigation Pane

Now, if you like the idea of using the TileNav but don’t require hierarchy levels and/or breadcrumbs, v14.1 will ship with a simplified version called the TileBar.

WinForms and WPF TileBar Control

As its name implies, the TileBar displays a set of tiles within its container and allows you to introduce simple/straightforward navigation experiences to your WinForms and WPF applications. Planned features include the following:

  • Display drop downs for each individual Tile.
  • Place any control within the Tile’s drop down region.
  • Position the TileBar anywhere within your app (Top, Bottom, Left and Right)
  • Customize the appearance of individual Tile items.
  • Built-in glyph skinning. You provide a monochrome glyph for the Tile and the TileBar will colorize it to a complimentary color.
  • Finally, as you might expect, the TileBar will ship with a Visual Studio designer so you can quickly create the user experience most appropriate for your business needs.


Customized TileBar Items

Microsoft Dynamics Inspired Tile Nav Bar

We are working hard to make v14.1 the best ever and over the coming weeks, we’ll share many other new features/products we have planned for our upcoming release.

I look forward to your feedback…let me know what you think of our upcoming TileNav and TileBar Controls.

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Alexander Krakhotko (Xafari team)
Alexander Krakhotko (Xafari team)

plan to add it in XAF 14.1?

16 April 2014
Rafik Samman
Rafik Samman

Is the winforms control going to be a default in XAF?

Is there going to be a XAF like product for WPF applications?

16 April 2014
Ray Navasarkian (DevExpress)
Ray Navasarkian (DevExpress)

XAF's WinForms UI is built around that of Outlook and not MS Dynamics. It's unlikely that it will be ported, but I'm sure Dennis will chime in with his opinion on the matter.

16 April 2014
QUALCO SA
QUALCO SA

Is a silverlight version comming, since most code is shared please add it to silverlight

16 April 2014
Gosha
Gosha

Dynamics products are targeting business customers thats kind of XAF target users as well. This control would make XAF way more modern. So its definately good idea to have it in XAF.

16 April 2014
Sergey Ivanov
Sergey Ivanov

What about the same for VCL?

16 April 2014
stefanr
stefanr

So much more could be done with this UI than just use it as a kind of menu :

If you would implement a drag-and-drop mechanism this could be used as a generic object-representation area. Would you consider this ? Thanks a lot !

16 April 2014
Jens Fudickar [DX-Squad]
Jens Fudickar [DX-Squad]

Yes I want to see it also for VCL :-)

16 April 2014
Toloknov Denis
Toloknov Denis

VCL last century ...

16 April 2014
Polo Capital
Polo Capital

Awesome. Definitely going to use this control for WPF if it's MVVM friendly

16 April 2014
SteveDude
SteveDude

Now that is cool! I have an immediate use for it once it is released.

16 April 2014
Michael Lange
Michael Lange

We use MS CRM and I can tell you from experience that the new Tile Nav sucks when you're using it on a regular computer. It's designed for tablet or touch screen users. If the menu is too long for the width of your monitor, you have to move your mouse all the way to the right side to click a skinny page next button. If you miss it with the mouse, guess what, the menu goes away and you have to start all over. On a tablet, awesome. On a computer, this system sucks and I wouldn't put my customers through such a horrible experience. Hopefully DevEx has done something to address the short-comings of this control.

16 April 2014
Steven Rasmussen
Steven Rasmussen

Will there be options to keep the navigation area open (not collapsed) if the user starts working on the current page?  This way it behaves much like a normal menu.

Also, will there be any runtime customization?  Drag and drop capabilities to reorder button items?

16 April 2014
Hariharan Kilakkencherry
Hariharan Kilakkencherry

Are tiles expected to replace tabs? Currently we have several tabs in our application so just trying to understand the use case for tiles.

16 April 2014
Mandeep Singh 10
Mandeep Singh 10

Eager to know what gets added to XAF! Web version is screaming for a revamp

16 April 2014
Justin Zeng
Justin Zeng

Is there any possible in 14.1  of  the InstantFeedback of LookUpEdit in WPF.

16 April 2014
Yuri Alekseev
Yuri Alekseev

Silverlight version please!!!

16 April 2014
marco coppi
marco coppi

I think XAF really needs some UI improvements since actually both Win and Web application interface seem to be old. Please, work on that!!

17 April 2014
Ray Navasarkian (DevExpress)
Ray Navasarkian (DevExpress)

QUALCO SA:

No immediate plans for Silverlight.

17 April 2014
Ray Navasarkian (DevExpress)
Ray Navasarkian (DevExpress)

Michael:

I appreciate your thoughts on this and like anything else, there is a time to use this UX and there is a time not to use it. Certainly wouldn't use this if my app was all about word processing. We'll have more to say about the use-case for this as we get closer to launch.

17 April 2014
np33kf
Ricardo Soares

It would be great to see this control in XAF!

18 April 2014
David Shannon
David Shannon

I like this control for winforms apps, but I'm not sure that it has much of a place in XAF.  The navigation system in the XAF winforms UI seems pretty tightly coupled to the Outlook-style presentation.  My apps in particular have come to rely on the visibility of lots of choices in the navigation pane (I typically use the tree-style display).  I don't know how that would work with the TileNav pane, but I wouldn't want to sacrifice much screen space or visibility just to have the new look.  But who knows, maybe the developers at DX can come up with something that makes it work.

20 April 2014
Dennis (DevExpress)
Dennis Garavsky (DevExpress)

@Alexander, Rafik, Gosha, np33kf:

I had to agree with Ray and David Shannon on this, because it is difficult to imagine that this two-level navigation will be a default choice for the majority of XAF developers, at least based on many real-life examples of apps they typically create. Like David mentioned, most use a tree-like navigation to cover all those tons of items that can be very complex (e.g., check this screenshot for an example of an app created by our old customers using the XAFARI.NET platform). However, I also see the practical application of this control in certain scenarios when you do not need a complex navigation structure, e.g., a WinForms app working on a Windows 8 Pro touch device. In that case, nothing prevents you from using this control for navigation yourself as XAF enables customizing or replacing each and every application UI section. Technically, this integration will be in implemented in an IActionContainer that will be mapped to the ViewsNavigation category. If you forgot, Action Container is nothing more than a visual control that displays Actions (the ShowNavigationItemAction in this case) in the UI and you can get inspiration or ideas for future implementation from ...\DevExpress.ExpressApp.Win\Templates\ActionContainers\NavigationActionContainer.cs.

If you will allow me to continue on this, then I would say that I see a better application of the Tile Control for navigating here, and I also have seen several XAF customers implementing custom Action Containers based on it. So, you can consider this idea as well. Thanks!

@Rafik: While we do not have immediate plans for providing a WPF UI in XAF, you may be interested in checking our DevExpress MVVM Framework (learn more...).

22 April 2014
Dennis (DevExpress)
Dennis Garavsky (DevExpress)

I just found an example of alternative tile-based navigation implemented in an XAF app (view the screenshot or watch the video at 0:20 or 1:40).

22 April 2014
QUALCO SA
QUALCO SA

Since the code is mostly shared between SL & WPF why no plans for SL.

Up to now you had nearly all controls between SL & WPF in parity.

Is there a change in direction to really stop doing SL Components?

23 April 2014
QUALCO SA
QUALCO SA

Petty I thought that codebase was common between SL and Silverlight and up to now you had excellence parity between WPF and SL Components.

Does that mean you are reducing SL parity with WPF components?

:(

23 April 2014
RICARDO PINZON DIAZ
RICARDO PINZON DIAZ

when we will have a beta versión (TileBar Control)

28 April 2014
Edgar Ricárdez Peralta
Edgar Ricárdez Peralta

When we will have v14.1?

6 May 2014
Philip van Diem2
Philip van Diem2

This will be so more useful to desktop clients who find the tile navigation menu too slow to get to where you need to quickly. Looking forward to TileNav ASAP.

Thank you.

15 May 2014
gabriel caro
gabriel caro

Hello,

It is seen that the hierarchy level is limited to three levels. ¿Usarlor is possible on more levels ?, for example:

Business -> Consortium> Customers -> Branches

Thank you.

6 November 2014

Please login or register to post comments.