Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
60
How to open or close flyout tabs with a click
posted

I was asked to make flyout tabs open or close with a mouse click. Took a bit of doing so I thought I'd share it here as a way of saying thanks for all the other helpful examples I've taken advantage of.

Here's my page XAML

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:igDock="http://infragistics.com/DockManager"
  x:Class="FlyoutTabTest.MainWindow"
  x:Name="Window"
  Title="MainWindow"
  Width="640" Height="480">

  <Grid x:Name="LayoutRoot">
    <igDock:XamDockManager x:Name="PART_RibbonDockManager" Theme="Office2k7Silver"
      FlyoutAnimation="Slide" Focusable="False">

      <igDock:ContentPane>
        <StackPanel>
          <TextBlock Text="Hi"/>
        </StackPanel>
      </igDock:ContentPane>
           
      <igDock:XamDockManager.Panes>

        <igDock:SplitPane x:Name="_splitHistoryPane"
          igDock:XamDockManager.InitialLocation="DockedRight" MinWidth="250">
          <igDock:ContentPane x:Name="HistoryPane"
            Header="History" IsPinned="False" AllowClose="False"
            AllowDockingBottom="False" AllowDockingTop="False"
            AllowDockingInTabGroup="False">
            <StackPanel>
              <TextBlock Text="Hi"/>
            </StackPanel>
          </igDock:ContentPane>
        </igDock:SplitPane>

        <igDock:SplitPane x:Name="_splitPresencePane"
          igDock:XamDockManager.InitialLocation="DockedRight" MinWidth="250">
          <igDock:ContentPane x:Name="PresencePane"
            Header="Presence" IsPinned="False" AllowClose="False"
            AllowDockingBottom="False" AllowDockingTop="False"
            AllowDockingInTabGroup="False">
            <StackPanel>
              <TextBlock Text="Hi"/>
            </StackPanel>
          </igDock:ContentPane>
        </igDock:SplitPane>
                   
      </igDock:XamDockManager.Panes>
           
    </igDock:XamDockManager>
  </Grid>
</Window>

And the code-behind:

using System.Windows;
using System.Windows.Input;
using Infragistics.Windows.DockManager;

namespace FlyoutTabTest
{
  /// <summary>
  /// Interaction logic for MainWindow.xaml
  /// </summary>
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      this.InitializeComponent();

      // Insert code required on object creation below this point.

      // Register preview mouse down events on the flyout tabs
      EventManager.RegisterClassHandler(typeof(PaneTabItem),
        Mouse.PreviewMouseDownEvent,
        new RoutedEventHandler(OnPaneTabItemMouseDown), true);
    }

    // handles preview mouse down events on flyout tab headers to open/close tab
    // when not pinned
    private void OnPaneTabItemMouseDown(object sender, RoutedEventArgs e)
      {
        PaneTabItem pti = sender as PaneTabItem;
        if (pti != null)
        {
          ContentPane pane = pti.Pane as ContentPane;
          if (pane != null)
          {
            // don't mess with pinned content panes
            if (pane.IsPinned == false)
            {
              // if flown out and in an unpinned state, fly back in
              if (pane.PaneLocation == PaneLocation.Unpinned)
              {
                pane.ExecuteCommand(ContentPaneCommands.FlyIn);
              }
              else
              {
                pane.ExecuteCommand(ContentPaneCommands.Flyout);
              }
            }
          }
        }
      }
    }
}

The window initialization registers a class event handler that intercepts PreviewMouseDown events on any PaneTabItem objects. These are the tab headers on an unpinned pane.

When a mouse click occurs, the handler obtains the content pane from the pane tab item. If the content pane is unpinned, it gets tested and either flown in or out.

There's a little quirk if the pane is displayed as a result of a hover rather than a click that I wasn't able to figure out. But maybe this will help somebody else out.

Parents
No Data
Reply
  • 138253
    Offline posted

    Hello mikeym,

    Thank you for your post. We appreciate it and believe that other community users can benefit from it as well.

    Thanks again.

Children
No Data