I am writing this post in response to the recent blog from our WinForms team: https://community.devexpress.com/blogs/thinking/archive/2014/05/09/winforms-outlook-style-navigation-controls-coming-soon-in-v14-1.aspx. There were a lot of comments on whether it is possible to have this feature in XAF. Well, it is possible and this integration is quite easy if you really need it. After all, an XAF app is nothing more than a standard WinForms or ASP.NET Web Forms app, which means that the same approaches can be applied to develop it. The XAF documentation describes most of the integration scenarios and our support team is also ready to help if you are in a need for something special.

Another good news is that here, it is all standard and you just need basic WinForms development skills and a minute or two to follow the How to: Customize a Windows Forms Template article from the XAF's documentation.


Caution: I was not planning on replicating Outlook 2013 by any means here, but just experimented with alternative navigation controls. I also removed the status bar, placed the navigation bar under the main view site and did not use tree-like navigation in groups on purpose, because it was not very suitable just for this simple demo app. Replicating the Office 2013 UI requires additional customizations of templates and other UI elements, and is not covered in this post.

So, let's detail it step-by-step

0. If you are feeling lazy today, then  download this ready-to-use template from my test app, count to ten and skip to #5:-)

1. In  Solution Explorer, select YourSolutionName.Win project and press Control+Shift+A to add a new item and look for the DevExpress v14.1 XAF Main Form Windows Forms Template, call it CustomMainForm and finally press the Add button.

2. In the property grid, select the _statusBar component and remove it completely, because we do not need two bars at the bottom in our app.

3. In the property grid, select the viewSitePanel component and set its Dock property to None. Finally, decrease the viewSitePanel 's height to 60 pixels to allocate free space for the navigation bar:



4. Invoke the Toolbox (Control+Alt+X) and drag and drop the OfficeNavigationBar component to the form, right underneath of the viewSitePanel component. Then in the property grid, select the officeNavigationBar1 component and customize its properties as follows:

this.officeNavigationBar1.Dock = System.Windows.Forms.DockStyle.Bottom;
this.officeNavigationBar1.MinimumSize = new System.Drawing.Size(0, 60);
this.officeNavigationBar1.AllowHtmlDraw = true;

You may also want to adjust the height of the viewSitePanel and officeNavigationBar1 components to achieve a better fit:


5. Modify YourSolutionName.Win/CustomMainForm.cs file by adding the following code to the end of the OnLoad method:

            DevExpress.Utils.Navigation.INavigationBarClient navBar = this.navigation.NavigationControl as DevExpress.Utils.Navigation.INavigationBarClient;
            if(navBar != null) {
                this.officeNavigationBar1.NavigationClient = navBar;
            }

6. Modify YourSolutionName.Win/Program.cs file as follows:

           SimpleProjectManagerWindowsFormsApplication winApplication = new SimpleProjectManagerWindowsFormsApplication();
            winApplication.CreateCustomTemplate += (s, e) => {
                if(e.Context == TemplateContext.ApplicationWindow) {
                    e.Template = new CustomMainForm();
                }
            };

At this stage, you can run your application and obtain a result similar to what I showed at the beginning.

Of course, nothing (actually it is our docs and your imagination:-)) stops you from customizing this component further, e.g., by adding custom items to it:

this.officeNavigationBar1.Items.Add(new DevExpress.XtraBars.Navigation.NavigationBarItem() { Text = "Click me" });
this.officeNavigationBar1.Items.Add(new DevExpress.XtraBars.Navigation.NavigationBarItem() { Text = "<b><size=+6><color=red>And me too!</color></size><b>" });

Thoughts

I am not really sure if this nice component should be a part of the default XAF form template, because in my opinion, it is only suitable when you have a few navigation groups. In the majority of customer projects, I observed lots of navigation items and often tree-like navigation is only the option to present it nicely on the screen. In any event, XAF does not prevent you from experiments like this and allows using standard WinForms or ASP.NET approaches to achieve a custom look and feel. Just always remember that what is possible in WinForms and ASP.NET is also possible in XAF, because the framework is a built using these technologies and is no different from a regular non-XAF .NET app.

UPDATE:
I think it is also worth including a comment of mine from a discussion on the subject in our FaceBook page:

"I fully share your desire to refresh/extend default XAF templates so that XAF users could create Office 2013 apps with ease in minutes. This is indeed an interesting challenge and something the XAF team can work on in the future. Until these new templates are included in the standard delivery (and even regardless of that fact), I think that it is still helpful to constantly show XAF users various ways of customizing the default UI. In fact, there is a some misunderstanding among our customers that you cannot (or should not) do much beyond what you received with the default layout, templates, editors, etc. This is wrong and dispelling this myth was another purpose of my post. Our framework addresses 80% of common development tasks and it is normal and natural for a programmer to customize it to fulfill the rest (I admit this may be difficult to acknowledge after realizing what the framework already gives you). So, instead of waiting for something to be happening by default, customize the framework today as your custom needs dictate. After all its the same WinForms and ASP.NET wrapped into a flexible architecture, which was designed for extensibility and supposed to be used this way from the beginning. And don't worry about the platform evolution itself or default package - it will always be updated with stable and popular solutions and patterns proven by years and many developers - this solution set, in essence, is what gave birth to the platform in the past."