How to: Create a multi-level BackstageView Control

• Nov 13, 2018
• 5 minutes to read

BackstageViewControls can be combined together to create attractive, multi-level control that navigates through its tabs. If combined together, BackstageView controls share their appearance settings, making it possible to apply the same color scheme for the entire object. In this example, you will learn how to create a simple control based on a BackstageView control that contains multiple child BackstageView controls.

As the BackstageView Control topic states, each BackstageView control has two main areas – the left pane containing BackstageViewButtonItem and BackstageViewTabItem objects and the right pane that displays tab item content. It is possible to set another BackstageView control as the tab item content. At design-time, this can be done by dropping the BackstageViewControl component to the parent BackstageView control’s right pane. To do the same in code, use the BackstageViewTabItem.ContentControl property.

C#

backstageViewTabItem1.ContentControl = backstageViewClientControl2;

VB.NET

backstageViewTabItem1.ContentControl = backstageViewClientControl2

You can repeat this step again and again, setting more and more BackstageView controls as tab item content. When you design the required item hierarchy, you can move on to the controls’ appearance. By default, all of the BackstageView controls’ BackstageViewControl.PaintStyle properties are set to Default (equal to the Skinned), which means these controls will be painted according to the currently applied application skin. Set this property to Flat for the parent BackstageView control and access its BackstageViewControl.Appearance section. This section provides access to BackColor, ForeColor, Font and other settings that specify the control’s appearance.

C#

backstageViewControl1.Appearance.BackColor = Color.Black;

VB.NET

backstageViewControl1.Appearance.BackColor = Color.Black

Then, select each BackstageViewTabItem added to the first BackstageView control and modify its BackstageViewItemBase.Appearance, BackstageViewItemBase.AppearanceHover and BackstageViewTabItem.AppearanceSelected properties as required. Since in the previous step you have set black as the tab item back color, pick a warm color to paint selected tabs and change selected tabs’ forecolors to match the chosen background.

C#

backstageViewTabItem1.AppearanceSelected.BackColor = backstageViewTabItem2.AppearanceSelected.BackColor = backstageViewTabItem3.AppearanceSelected.BackColor = Color.DarkOrange;
backstageViewTabItem1.AppearanceSelected.ForeColor = backstageViewTabItem2.AppearanceSelected.ForeColor = backstageViewTabItem3.AppearanceSelected.ForeColor = Color.Black;
backstageViewTabItem1.AppearanceHover.BackColor = backstageViewTabItem2.AppearanceHover.BackColor = backstageViewTabItem3.AppearanceHover.BackColor = backstageViewTabItem3.AppearanceHover.BackColor = Color.DimGray;

VB.NET

backstageViewTabItem1.AppearanceSelected.BackColor = backstageViewTabItem2.AppearanceSelected.BackColor = backstageViewTabItem3.AppearanceSelected.BackColor = Color.DarkOrange
backstageViewTabItem1.AppearanceSelected.ForeColor = backstageViewTabItem2.AppearanceSelected.ForeColor = backstageViewTabItem3.AppearanceSelected.ForeColor = Color.Black
backstageViewTabItem1.AppearanceHover.BackColor = backstageViewTabItem2.AppearanceHover.BackColor = backstageViewTabItem3.AppearanceHover.BackColor = backstageViewTabItem3.AppearanceHover.BackColor = Color.DimGray

Now, as you have customized the first BackstageView control’s left pane, the following BackstageView control will paint its own left pane according to the parent control’s appearance, stored within the BackstageViewControl.ParentAppearance object. This means your child BackstageView control’s left pane will have the same backcolor that selected tab items for the first control have. Following the described pattern, you can now customize AppearanceSelected properties for the second BackstageView control’s tab items and they will be passed to the third BackstageView control as its default backcolor. As the result, with minimum effort you are able to mix multiple BackstageView controls whose appearance settings are shared between each other. This creates a unified paint style as the figure below demonstrates.

UserControl1.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WindowsFormsApplication12 {
    public partial class UserControl1 : UserControl {
        public UserControl1() {
            InitializeComponent();
        }
    }
}

Program.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;
using DevExpress.Skins;

namespace WindowsFormsApplication12 {
    static class Program {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        [STAThread]
        static void Main() {
            SkinManager.EnableFormSkins();
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new Form1());
        }
    }
}

Form1.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using DevExpress.XtraBars.Ribbon;
using DevExpress.XtraEditors;

namespace WindowsFormsApplication12 {
    public partial class Form1 : XtraForm {
        public Form1() {
            InitializeComponent();
            //Parent BackstageView controls' tab appearances
            backstageViewControl1.Appearance.BackColor = Color.Black;
            backstageViewControl1.Appearance.ForeColor = Color.White;
            foreach (BackstageViewTabItem tab in backstageViewControl1.Items.OfType<BackstageViewTabItem>()) {
                tab.AppearanceSelected.BackColor = Color.DarkOrange;
                tab.AppearanceSelected.ForeColor = Color.Black;
                tab.AppearanceHover.BackColor = Color.DimGray;
            }
            //Child BackstageView controls' tab appearances
            IEnumerable<BackstageViewTabItem> tabs2 = backstageViewControl2.Items.OfType<BackstageViewTabItem>();
            IEnumerable<BackstageViewTabItem> tabs3 = backstageViewControl3.Items.OfType<BackstageViewTabItem>();
            IEnumerable<BackstageViewTabItem> tabs4 = backstageViewControl4.Items.OfType<BackstageViewTabItem>();
            foreach (BackstageViewTabItem tab in tabs2.Concat(tabs3.Concat(tabs4))) {
                tab.AppearanceSelected.BackColor = Color.White;
                tab.AppearanceSelected.ForeColor = Color.Black;
                tab.AppearanceHover.BackColor = Color.SandyBrown;
            }
        }

        private void backstageViewButtonItem1_ItemClick(object sender, DevExpress.XtraBars.Ribbon.BackstageViewItemEventArgs e) {
            this.Close();
        }
    }
}

UserControl1.vb

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Drawing
Imports System.Data
Imports System.Linq
Imports System.Text
Imports System.Threading.Tasks
Imports System.Windows.Forms

Namespace WindowsFormsApplication12
    Partial Public Class UserControl1
        Inherits UserControl

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

Form1.vb

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Linq
Imports System.Text
Imports System.Threading.Tasks
Imports System.Windows.Forms
Imports DevExpress.XtraBars.Ribbon
Imports DevExpress.XtraEditors

Namespace WindowsFormsApplication12
    Partial Public Class Form1
        Inherits XtraForm

        Public Sub New()
            InitializeComponent()
            'Parent BackstageView controls' tab appearances
            backstageViewControl1.Appearance.BackColor = Color.Black
            backstageViewControl1.Appearance.ForeColor = Color.White
            For Each tab As BackstageViewTabItem In backstageViewControl1.Items.OfType(Of BackstageViewTabItem)()
                tab.AppearanceSelected.BackColor = Color.DarkOrange
                tab.AppearanceSelected.ForeColor = Color.Black
                tab.AppearanceHover.BackColor = Color.DimGray
            Next tab
            'Child BackstageView controls' tab appearances
            Dim tabs2 As IEnumerable(Of BackstageViewTabItem) = backstageViewControl2.Items.OfType(Of BackstageViewTabItem)()
            Dim tabs3 As IEnumerable(Of BackstageViewTabItem) = backstageViewControl3.Items.OfType(Of BackstageViewTabItem)()
            Dim tabs4 As IEnumerable(Of BackstageViewTabItem) = backstageViewControl4.Items.OfType(Of BackstageViewTabItem)()
            For Each tab As BackstageViewTabItem In tabs2.Concat(tabs3.Concat(tabs4))
                tab.AppearanceSelected.BackColor = Color.White
                tab.AppearanceSelected.ForeColor = Color.Black
                tab.AppearanceHover.BackColor = Color.SandyBrown
            Next tab
        End Sub

        Private Sub backstageViewButtonItem1_ItemClick(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Ribbon.BackstageViewItemEventArgs) Handles backstageViewButtonItem1.ItemClick
            Me.Close()
        End Sub
    End Class
End Namespace

Program.vb

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Threading.Tasks
Imports System.Windows.Forms
Imports DevExpress.Skins

Namespace WindowsFormsApplication12
    Friend NotInheritable Class Program

        Private Sub New()
        End Sub

        ''' <summary>
        ''' The main entry point for the application.
        ''' </summary>
        <STAThread> _
        Shared Sub Main()
            SkinManager.EnableFormSkins()
            Application.EnableVisualStyles()
            Application.SetCompatibleTextRenderingDefault(False)
            Application.Run(New Form1())
        End Sub
    End Class
End Namespace