Thinking Out Loud

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

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.

Published Apr 16 2014, 02:11 AM by
Bookmark and Share

Comments

Alexander Krakhotko (Xafari team)

plan to add it in XAF 14.1?

April 16, 2014 4:52 AM

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?

April 16, 2014 5:59 AM

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.

April 16, 2014 5:59 AM

QUALCO SA

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

April 16, 2014 6:12 AM

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.

April 16, 2014 6:41 AM

Sergey Ivanov

What about the same for VCL?

April 16, 2014 8:05 AM

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 !

April 16, 2014 9:11 AM

Jens Fudickar [DX-Squad]

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

April 16, 2014 9:20 AM

Toloknov Denis

VCL last century ...

April 16, 2014 9:22 AM

Polo Capital

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

April 16, 2014 9:29 AM

SteveDude

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

April 16, 2014 10:15 AM

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.

April 16, 2014 10:50 AM

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?

April 16, 2014 11:00 AM

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.

April 16, 2014 11:43 AM

Mandeep Singh 10

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

April 16, 2014 11:49 AM

Justin Zeng

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

April 16, 2014 7:26 PM

Yuriy Alekseev 1

Silverlight version please!!!

April 16, 2014 7:40 PM

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!!

April 17, 2014 1:41 AM

Ray Navasarkian (DevExpress)

QUALCO SA:

No immediate plans for Silverlight.

April 17, 2014 2:06 PM

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.

April 17, 2014 2:10 PM

np33kf

It would be great to see this control in XAF!

April 18, 2014 9:53 AM

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.

April 20, 2014 8:15 PM

Dennis (DevExpress Support)

@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...).

April 22, 2014 8:36 AM

Dennis (DevExpress Support)

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).

April 22, 2014 8:58 AM

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?

April 23, 2014 6:29 AM

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?

:(

April 23, 2014 1:00 PM

RICARDO PINZON DIAZ

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

April 28, 2014 8:38 AM

Edgar Ricárdez Peralta

When we will have v14.1?

May 6, 2014 2:41 PM

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.

May 15, 2014 6:15 AM

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.

November 6, 2014 9:01 AM
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2016 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners