We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to display tooltip to the header of the tabbed and MDI windows in WPF DockingManager?

Platform: WPF |
Control: DockingManager |
Published Date: April 6, 2018 |
Last Revised Date: August 3, 2021 |
.NET Framework: 4

ToolTip can be set to TDI (Tabbed Document Interface) Window header using TabCaptionToolTip property for DocumentContainer. By customizing the HeaderTemplate of WPF DockingManager, we can display the ToolTip for MDI window and the windows which are all added in Tabbed state in Dock window. The same has been explained in the following code snippet:

MainWindow.xaml :

<Window.Resources>
  <local:ToolTipConverter x:Key="tooltipconverter"/>
</Window.Resources>
<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="30"/>
    <RowDefinition />
  </Grid.RowDefinitions>
  <Menu>
    <MenuItem Header="Container Mode">
      <MenuItem x:Name="tdimenu" Header="TDI" Click="MenuItem_Click" />
      <MenuItem Header="MDI" x:Name="mdimenu" IsChecked="True" Click="MenuItem_Click_1"/>
    </MenuItem>
  </Menu>
  <syncfusion:DockingManager x:Name="DockingManager"  Grid.Row="1" UseDocumentContainer="True" ContainerMode="MDI" >
    <!--Customized Header Template-->
    <syncfusion:DockingManager.HeaderTemplate>
      <DataTemplate>
        <DockPanel LastChildFill="True" >
          <TextBlock Text="{Binding}" ToolTip="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource tooltipconverter}}" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" Margin="5,0,0,0" />
        </DockPanel>
      </DataTemplate>
    </syncfusion:DockingManager.HeaderTemplate>
 
    <syncfusion:DockingManager.Icon>
      <ImageBrush ImageSource="Images/DocIO.gif"/>
    </syncfusion:DockingManager.Icon>
 
    <!-- Dock window For the FindResult-->
    <TreeView Name="FindResult" syncfusion:DocumentContainer.TabCaptionToolTip="To display the Found results"
              syncfusion:DockingManager.Header="Find Results"
              syncfusion:DockingManager.CanClose="True"
              syncfusion:DockingManager.SideInDockedMode="Bottom"
              syncfusion:DockingManager.DesiredWidthInFloatingMode="350"
              syncfusion:DockingManager.DesiredWidthInDockedMode="350"
              syncfusion:DockingManager.DesiredHeightInDockedMode="150"
              syncfusion:DocumentContainer.MDIBounds="30,30,300,300">
      <!-- Customized Header Template-->
      <syncfusion:DockingManager.Icon>
        <ImageBrush ImageSource="Images/Sample.gif"/>
      </syncfusion:DockingManager.Icon>
      <TextBlock >Find Results 0 , Not Found.</TextBlock>
    </TreeView>
 
      <!--Dock Window For ErrorList -->
      <TreeView Name="ErrorList" syncfusion:DockingManager.Header="Error Log"
                syncfusion:DocumentContainer.TabCaptionToolTip="To display the list of errors"
                syncfusion:DockingManager.CanDrag="True"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
                syncfusion:DockingManager.TargetNameInDockedMode="FindResult"
                syncfusion:DocumentContainer.MDIBounds="30,30,300,300">
        <syncfusion:DockingManager.Icon>
          <ImageBrush ImageSource="Images\XlsIO.gif"/>
        </syncfusion:DockingManager.Icon>
        <ScrollViewer VerticalScrollBarVisibility ="Auto" Name ="Scroll">
          <StackPanel Name="evntlog" Orientation="Vertical"></StackPanel>
        </ScrollViewer>
      </TreeView>
 
      <ContentControl syncfusion:DockingManager.Header="DockTabItem" syncfusion:DocumentContainer.MDIBounds="30 30 300 300" syncfusion:DockingManager.State="Document" syncfusion:DocumentContainer.TabCaptionToolTip="Document Window"/>
      <!-- Dock Window For Solution Explorer -->
 
      <TreeView BorderThickness="0" FlowDirection="LeftToRight" HorizontalContentAlignment="Left" Name="solutionExp"
                syncfusion:DocumentContainer.TabCaptionToolTip="To display all items in the Explorer"
                syncfusion:DockingManager.Header="Solution Explorer"
                syncfusion:DockingManager.SideInDockedMode="Right"
                syncfusion:DockingManager.DesiredWidthInDockedMode="200"
                syncfusion:DocumentContainer.MDIBounds="30,30,300,300">
        <syncfusion:DockingManager.Icon>
          <ImageBrush ImageSource="Images\Grid.gif"/>
        </syncfusion:DockingManager.Icon>
       <TreeViewItem IsExpanded="true"  Header="Solution 'DockingDemo' (1 project)">
         <TreeViewItem Header="DockingDemo" IsExpanded="true"  >
           <TreeViewItem Header="Properties"  >
              <TreeViewItem Header="AssemblyInfo.cs"/>
              <TreeViewItem Header="Resources.resx" />
              <TreeViewItem Header="Resources1.resx" />
              <TreeViewItem Header="Settings.settings"  />
           </TreeViewItem>
           <TreeViewItem Header="References" />
           <TreeViewItem Header="Images" />
           <TreeViewItem Header="App.xaml" IsExpanded="true"  >
           <TreeViewItem Header="App.xaml.cs"  />          
          <TreeViewItem Header="Window1.xaml" IsExpanded="true">
            <TreeViewItem Header="Window1.xaml.cs"  />
          </TreeViewItem>
         </TreeViewItem>
       </TreeViewItem>
      </TreeView>
 
      <!-- Tabbed Dock Window-->
      <!-- Dock window for Properties -->
      <TreeView syncfusion:DockingManager.Header="Properties" Name="Properties"
                syncfusion:DockingManager.CanDrag="True"
                syncfusion:DockingManager.SideInDockedMode="Tabbed"
                syncfusion:DockingManager.TargetNameInDockedMode ="solutionExp"
                syncfusion:DockingManager.DesiredWidthInDockedMode="200"
                syncfusion:DocumentContainer.TabCaptionToolTip="To display properties"
                syncfusion:DockingManager.DesiredHeightInDockedMode="150"
                syncfusion:DocumentContainer.MDIBounds="30,30,300,300">
      </TreeView>
      <!-- Dock window for ToolBox -->
      <TreeView Name="toolbox" syncfusion:DockingManager.SideInDockedMode="Left"
                syncfusion:DockingManager.Header="Toolbox"
                syncfusion:DocumentContainer.TabCaptionToolTip="To display ToolBox items"
                syncfusion:DockingManager.DesiredWidthInDockedMode="200"
                syncfusion:DocumentContainer.MDIBounds="30,30,300,300"></TreeView>
  </syncfusion:DockingManager>
</Grid>

ToolTipConverter class:

public class ToolTipConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
    MDIWindow mdiwindow = VisualUtils.FindAncestor(value as Visual, typeof(MDIWindow)) as MDIWindow;
    if (mdiwindow != null)
    {
      return DocumentContainer.GetTabCaptionToolTip(mdiwindow.Content as DependencyObject);
    }
    else if (DockingManager.GetInternalDataContext(value as TextBlock) != null && DocumentContainer.GetTabCaptionToolTip(DockingManager.GetInternalDataContext(value as TextBlock)) != null)
    {
      TabItem tab = VisualUtils.FindAncestor(value as Visual, typeof(TabItem)) as TabItem;
      if (tab != null && tab.Content != null)
      {
        return DocumentContainer.GetTabCaptionToolTip(tab.Content as DependencyObject);
      }
      return null;
    }
    else
    {
      return null;
    }
  }
 
  public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  {
    return value;
  }
}

The following screenshot shows that the MDI window displays ToolTip

WPF DockingManager displays tooltip in MDI window

The following screenshots illustrates that the Tabbed windows displays ToolTip,

WPF DockingManager displays tooltip on tabbed windows

View sample in GitHub.

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile