Show TabStripItem CloseButton on mouse Hover

[Silvano]

I would like to show the close button of the TabStripItem only when the user moves the mouse over the tab strip item.
I have set the ShowToolCloseButton property of the RadDock object to true.
When I dock my control, I set the visibility of the CloseButton to Hidden and I attach the MouseHover and MouseLeave events.

MyTab tab = new MyTab();
var win = this.dock.DockControl(tab, DockPosition.Fill, DockType.Document);
win.TabStripItem.CloseButton.Visibility = ElementVisibility.Hidden;
win.TabStripItem.MouseHover += new EventHandler(TabStripItem_MouseHover);
win.TabStripItem.MouseLeave += new EventHandler(TabStripItem_MouseLeave);

On MouseHover I set the button visibility to Visible, On MouseLeave I set the button visibility to Hidden

void TabStripItem_MouseLeave(object sender, EventArgs e)
{
    var tabStripItem = (TabStripItem)sender;
    tabStripItem.CloseButton.Visibility = ElementVisibility.Hidden;
}


void TabStripItem_MouseHover(object sender, EventArgs e)
{
    var tabStripItem = (TabStripItem)sender;
    tabStripItem.CloseButton.Visibility = ElementVisibility.Visible;
}

My problem is that the close button "flickers" when I mouve the mouse over the TabStripItem. What am I doing wrong? Is it possible to achieve this behavior?

Thanks,
Silvano

[Dess | Tech Support Engineer, Principal]

Hello Silvano,

Thank you for contacting Telerik Support.

I have been able to reproduce the flicker only when the cursor is over the CloseButton, because TabStripItem_MouseLeave is fired as the mouse is detected by the CloseButton. This can be avoided by the following code:

win.TabStripItem.CloseButton.ShouldHandleMouseInput = false;
win.TabStripItem.CloseButton.NotifyParentOnMouseInput = true;

Please find attached a sample video (drag and drop over the browser to play), demonstrating my initial flicker behavior and the fixed behavior after the code modification:

public Form1()
{
    InitializeComponent();

    RadButton tab = new RadButton();
    var win = this.radDock1.DockControl(tab, DockPosition.Fill, DockType.Document);

    win.TabStripItem.ShowCloseButton = true;
    win.TabStripItem.CloseButton.Image = Properties.Resources.delete;

    win.TabStripItem.CloseButton.ShouldHandleMouseInput = false;
    win.TabStripItem.CloseButton.NotifyParentOnMouseInput = true;

    win.TabStripItem.MouseHover += new EventHandler(TabStripItem_MouseHover);

    win.TabStripItem.MouseLeave += new EventHandler(TabStripItem_MouseLeave);
}

void TabStripItem_MouseLeave(object sender, EventArgs e)
{
    var tabStripItem = (TabStripItem)sender;
    Console.WriteLine("Leave {0}",tabStripItem.CloseButton.Visibility);
    tabStripItem.CloseButton.Visibility = ElementVisibility.Hidden;
}

void TabStripItem_MouseHover(object sender, EventArgs e)
{
    var tabStripItem = (TabStripItem)sender;
    Console.WriteLine("Hover {0}",tabStripItem.CloseButton.Visibility);
    tabStripItem.CloseButton.Visibility = ElementVisibility.Visible;
}

private void Form1_Load(object sender, EventArgs e)
{
    this.radDock1.ActiveWindow.TabStripItem.CloseButton.Visibility = ElementVisibility.Hidden;
}

If it is not the issue you are facing, a sample project will be really appreciated reproducing the exact problem.

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

[Silvano]

Hello Desislava,
The flicker behavior is exactly the one you show on the video and your code solves this issue. But I have another problem now: when I click on the close button the Docked windows does not close anymore (the close button does not reacts to clicks anymore). Is there a way for the close button to react to clicks without the flickering effect?

Thanks,
Silvano

[Dess | Tech Support Engineer, Principal]

Hello Silvano,

Thank you for contacting us again.

In order to obtain the desired functionality, use the following sample code:

public Form1()
{
    InitializeComponent();
    new RadControlSpyForm().Show();

    RadButton tab = new RadButton();
    var win = this.radDock1.DockControl(tab, DockPosition.Fill, DockType.Document);

    win.TabStripItem.ShowCloseButton = true;
    win.TabStripItem.CloseButton.Image = Properties.Resources.delete;

    win.TabStripItem.CloseButton.ShouldHandleMouseInput = false;
    win.TabStripItem.CloseButton.NotifyParentOnMouseInput = true;

    win.TabStripItem.MouseHover += new EventHandler(TabStripItem_MouseHover);
    win.TabStripItem.MouseLeave += new EventHandler(TabStripItem_MouseLeave);
    win.TabStripItem.MouseUp += TabStripItem_Click;
}

private void TabStripItem_Click(object sender, EventArgs e)
{
    TabStripItem tab = sender as TabStripItem;
    MouseEventArgs args = e as MouseEventArgs;

    if (tab != null && args != null && tab.CloseButton.ControlBoundingRectangle.Contains(args.Location))
    {
        documentTabStrip1.SelectedIndex++;
        tab.TabPanel.Hide();
        tab.Visibility = ElementVisibility.Collapsed;
    }
}

void TabStripItem_MouseLeave(object sender, EventArgs e)
{
    var tabStripItem = (TabStripItem)sender;
    Console.WriteLine("Leave {0}", tabStripItem.CloseButton.Visibility);
    tabStripItem.CloseButton.Visibility = ElementVisibility.Hidden;
}

void TabStripItem_MouseHover(object sender, EventArgs e)
{
    var tabStripItem = (TabStripItem)sender;
    Console.WriteLine("Hover {0}", tabStripItem.CloseButton.Visibility);
    tabStripItem.CloseButton.Visibility = ElementVisibility.Visible;
}

private void Form1_Load(object sender, EventArgs e)
{
    this.radDock1.ActiveWindow.TabStripItem.CloseButton.Visibility = ElementVisibility.Hidden;
}

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

[Silvano]

Hi Desislava,

Your code works correctly and hides the tab, but I would like to close and dispose it. 

I wrote this code for the click event handler:

private void TabStripItem_Click(object sender, EventArgs e)
 {
    TabStripItem tab = sender as TabStripItem;
    MouseEventArgs args = e as MouseEventArgs;

    if (tab != null && args != null && tab.CloseButton.ControlBoundingRectangle.Contains(args.Location))
    {
      ((DockWindow)tab.TabPanel).Close();
    }
}

The problem is that I get a Null Reference Exception when trying to close the window.

Could you help me to solve this problem?

Thanks,
Silvano

[Dess | Tech Support Engineer, Principal]

Hello Silvano,

Thank you for contacting Telerik Support.

In order to achieve Close and Dispose functionality of the CloseButton, it is necessary to use its default logic which deals with disposing objects. Please have a look at the following code snippet:

public Form1()
{
    InitializeComponent();
    new RadControlSpyForm().Show();

    RadButton tab = new RadButton();
    var win = this.radDock1.DockControl(tab, DockPosition.Fill, DockType.Document);

    win.TabStripItem.ShowCloseButton = true;
    win.TabStripItem.CloseButton.Image = Properties.Resources.delete;
    win.CloseAction = DockWindowCloseAction.CloseAndDispose;

    win.TabStripItem.MouseHover += new EventHandler(TabStripItem_MouseHover);
    win.TabStripItem.MouseLeave += new EventHandler(TabStripItem_MouseLeave);
    win.TabStripItem.CloseButton.MouseHover += CloseButton_MouseHover;
    win.TabStripItem.CloseButton.MouseLeave += CloseButton_MouseLeave;
}

private void CloseButton_MouseLeave(object sender, EventArgs e)
{
    MouseEventArgs args = e as MouseEventArgs;
    RadImageButtonElement button = sender as RadImageButtonElement;
    TabStripItem tab = button.Parent as TabStripItem;
    if (button != null && tab != null && args != null && !tab.ControlBoundingRectangle.Contains(args.Location))
    {
        button.Visibility = ElementVisibility.Hidden;
    }
}

private void CloseButton_MouseHover(object sender, EventArgs e)
{
    RadImageButtonElement button = sender as RadImageButtonElement;
    if (button != null)
    {
        button.Visibility = ElementVisibility.Visible;
    }
}

void TabStripItem_MouseLeave(object sender, EventArgs e)
{
    MouseEventArgs args = e as MouseEventArgs;
    TabStripItem tabStripItem = (TabStripItem)sender;
    if (!tabStripItem.CloseButton.ControlBoundingRectangle.Contains(args.Location))
    {
        tabStripItem.CloseButton.Visibility = ElementVisibility.Hidden;
    }
}

void TabStripItem_MouseHover(object sender, EventArgs e)
{
    TabStripItem tabStripItem = (TabStripItem)sender;
    tabStripItem.CloseButton.Visibility = ElementVisibility.Visible;
}

private void Form1_Load(object sender, EventArgs e)
{
    this.radDock1.ActiveWindow.TabStripItem.CloseButton.Visibility = ElementVisibility.Hidden;
}

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

[Silvano]

Hello Desislava,

Your solution works! Thank you very much for your help!
Silvano