Articles in this section
Category / Section

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

2 mins read

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.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied