Show TabStripItem CloseButton on mouse Hover

7 posts, 1 answers
  1. Silvano
    Silvano avatar
    4 posts
    Member since:
    Aug 2012

    Posted 23 Oct 2013 Link to this post

    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
  2. Dess
    Admin
    Dess avatar
    1609 posts

    Posted 25 Oct 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Silvano
    Silvano avatar
    4 posts
    Member since:
    Aug 2012

    Posted 28 Oct 2013 Link to this post

    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
  5. Dess
    Admin
    Dess avatar
    1609 posts

    Posted 30 Oct 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Silvano
    Silvano avatar
    4 posts
    Member since:
    Aug 2012

    Posted 01 Nov 2013 Link to this post

    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
  7. Answer
    Dess
    Admin
    Dess avatar
    1609 posts

    Posted 06 Nov 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  8. Silvano
    Silvano avatar
    4 posts
    Member since:
    Aug 2012

    Posted 08 Nov 2013 Link to this post

    Hello Desislava,

    Your solution works! Thank you very much for your help!
    Silvano
Back to Top
UI for WinForms is Visual Studio 2017 Ready