How to apply the foreground and background for the selected Tabitems in Docking Manager?

1 min read

You can apply the foreground and background for the selected Tabitems of DockingManager as follows.

For example, in Metro theme, the MetroBrush and MetroHighlightedForegroundBrush properties of SkinStorage are used to apply foreground and background colors.

MetroBrush - This property is used for setting the background for the selected Tabitem in the Metro Theme.

MetroHighlightedForegroundBrush - This property is used for setting the foreground for the selected Tabitem of DockingManager in Metro Theme.

The following code example demonstrates how the MetroHighlightedForeground works.

/C# Code for setting the Foreground for the Selected Tabitems
DockingManager docking = new DockingManager();
            ContentControl content1 = new ContentControl();
            content1.Name = "Window1";
            ContentControl content2 = new ContentControl();
            content2.Name = "Window2";
            ContentControl content3 = new ContentControl();
            content3.Name = "Window3";
            DockingManager.SetHeader(content1, "Tabitem1");
            DockingManager.SetSideInDockedMode(content1, DockSide.Top);
            DockingManager.SetHeader(content2, "TabItem2");
            DockingManager.SetSideInDockedMode(content2, DockSide.Tabbed);
            DockingManager.SetTargetNameInDockedMode(content2, "Window1");
            DockingManager.SetHeader(content3, "TabItem3");
            DockingManager.SetTargetNameInDockedMode(content3, "Window2");
            DockingManager.SetSideInDockedMode(content3, DockSide.Tabbed);
            docking.Children.Add(content1);
            docking.Children.Add(content2);
            docking.Children.Add(content3);
            grid1.Children.Add(docking);
            SkinStorage.SetMetroHighlightedForegroundBrush(this, Brushes.Brown);

XAML

//XAML Code for setting the Foreground for the Selected Tabitems
<Window x:Class="Dockforegroundcolor_133355.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        syncfusion:SkinStorage.VisualStyle="Metro" 
        syncfusion:SkinStorage.MetroHighlighedForegroundBrush="Brown"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"  
        Title="MainWindow" Height="350" Width="525">
  <Grid Name="grid1">
      <syncfusion:DockingManager Name="Dock1" UseDocumentContainer="True" >
        <ContentControl Name="Window1"
                      syncfusion:DockingManager.Header="TabItem1"
                      syncfusion:DockingManager.SideInDockedMode="Top"/>
        <ContentControl Name="Window2"
                    syncfusion:DockingManager.Header="TabItem2" 
                    syncfusion:DockingManager.SideInDockedMode="Tabbed"
                    syncfusion:DockingManager.TargetNameInDockedMode ="Window1"/>
        <ContentControl Name="Window3"
                   syncfusion:DockingManager.Header="TabItem3"
                   syncfusion:DockingManager.SideInDockedMode="Tabbed”
                   syncfusion:DockingManager.TargetNameInDockedMode ="Window2"/>
          </syncfusion:DockingManager>
    </Grid>
</Window>

The following screenshot displays the MetroHighighlighedforeground brush applied for the selected Tabitems.

Figure 1: MetroHighighlighedforeground brush applied for the selected Tabitems

The following code example demonstrates how the MetroBrush works.

/C# Code for setting the Background for the Selected Tabitems
DockingManager docking = new DockingManager();
            ContentControl content1 = new ContentControl();
            content1.Name = "Window1";
            ContentControl content2 = new ContentControl();
            content2.Name = "Window2";
            ContentControl content3 = new ContentControl();
            content3.Name = "Window3";
            DockingManager.SetHeader(content1, "Tabitem1");
            DockingManager.SetSideInDockedMode(content1, DockSide.Top);
            DockingManager.SetHeader(content2, "TabItem2");
            DockingManager.SetSideInDockedMode(content2, DockSide.Tabbed);
            DockingManager.SetTargetNameInDockedMode(content2, "Window1");
            DockingManager.SetHeader(content3, "TabItem3");
            DockingManager.SetTargetNameInDockedMode(content3, "Window2");
            DockingManager.SetSideInDockedMode(content3, DockSide.Tabbed);
            docking.Children.Add(content1);
            docking.Children.Add(content2);
            docking.Children.Add(content3);
            grid1.Children.Add(docking);
            SkinStorage.SetMetroBrush(this, Brushes.Brown);

XAML

//XAML Code for setting the Backgrounds for the Selected Tabitems
<Window x:Class="Dockforegroundcolor_133355.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        syncfusion:SkinStorage.VisualStyle="Metro" 
        syncfusion:SkinStorage.MetroBrush="Brown"         xmlns:syncfusion="http://schemas.syncfusion.com/wpf"  
        Title="MainWindow" Height="350" Width="525">
  <Grid Name="grid1">
      <syncfusion:DockingManager Name="Dock1" UseDocumentContainer="True" >
        <ContentControl Name="Window1"
                      syncfusion:DockingManager.Header="TabItem1"
                      syncfusion:DockingManager.SideInDockedMode="Top"/>
        <ContentControl Name="Window2"
                    syncfusion:DockingManager.Header="TabItem2" 
                    syncfusion:DockingManager.SideInDockedMode="Tabbed"
                    syncfusion:DockingManager.TargetNameInDockedMode ="Window1"/>
        <ContentControl Name="Window3"
                   syncfusion:DockingManager.Header="TabItem3"
                   syncfusion:DockingManager.SideInDockedMode="Tabbed”
                   syncfusion:DockingManager.TargetNameInDockedMode ="Window2"/>
          </syncfusion:DockingManager>
    </Grid>
</Window>

The following screenshot displays the MetroBrush applied for the selected TabItems.

Figure 2: MetroBrush applied for the selected TabItems

Did you find this information helpful?

Yes

Comments (0)

How to apply the foreground and background for the selected Tabitems in Docking Manager?

Access denied