Hiding empty Command Bars

8 posts, 0 answers
  1. Nigel
    Nigel avatar
    4 posts
    Member since:
    May 2019

    Posted 31 May 2019 Link to this post

    Hi

     

    How to I hide / minimise the size of a CommandBar that is empty? (See attached image)

    Also, there is a small border around the edge of the area (like a Margin or Padding) that I cant reduce. Is there a way to make the CommandBar be positioned tight to the edge?

    I hope this makes sense.

    Regards

    Duane Suter

  2.
  3. Dimitar
    Admin
    Dimitar avatar
    2892 posts

    Posted 03 Jun 2019 Link to this post

    Hi Duane,

    You can use the Visible property to hide the commandbar, in other the other control to fill the space it must be docked. I have attached a small example that shows this. I cannot say where the padding is coming from without examining the form. Would it be possible to send me the designer file of your form so I can examine it locally? 

    I am converting this forum thread into a support ticket in order to allow attachments. You can find it in your Telerik account.

    I am looking forward to your reply.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Nigel
    Nigel avatar
    4 posts
    Member since:
    May 2019

    Posted 05 Jun 2019 Link to this post

    Hi Dimitar

    Thanks for your reply.

    Unfortunately, I still cannot get the CommandBars to work in the way I need.

    Basically what I need them to do, is when a CommandBar is or becomes empty (by the user floating and redocking a StripElement elsewhere), it needs to Auto-Hides or Auto-Collapse. 
    Then when or if a User wants to re-dock a Strip Element and therefore drags it into that CommanBar's dock area, it un-collapses.

    As I indicated in the image I attached previously, when the Bars are empty they are still visible.

    How can this be achieved?

    Many thanks

    Duane Suter.

  7. Dimitar
    Admin
    Dimitar avatar
    2892 posts

    Posted 06 Jun 2019 Link to this post

    Hi Duane,

    This is not supported out of the box but can be achieved. You can use the FloatingStripCreated and EndDrag events of the CommandBarStripElement to update the visibility of the CommandBar. Here is an example (the attached image shows the result): 
    public RadForm1()
    {
        InitializeComponent();
     
        commandBarStripElement2.EnableFloating = true;
        commandBarStripElement1.EnableFloating = true;
     
        radCommandBar1.FloatingStripCreated += RadCommandBar1_FloatingStripCreated;
        radCommandBar1.FloatingStripCreated += RadCommandBar1_FloatingStripCreated;
     
        commandBarStripElement1.EndDrag += CommandBarStripElement1_EndDrag;
        commandBarStripElement2.EndDrag += CommandBarStripElement1_EndDrag;
    }
     
    private void CommandBarStripElement1_EndDrag(object sender, EventArgs e)
    {
        if (radCommandBar1.Rows.Count == 0 || radCommandBar1.Rows[0].Strips.Count == 0)
        {
            radCommandBar1.Visible = false;
        }
        else
        {
            radCommandBar1.Visible = true;
        }
     
        if (radCommandBar2.Rows.Count == 0 || radCommandBar2.Rows[0].Strips.Count == 0)
        {
            radCommandBar2.Visible = false;
        }
        else
        {
            radCommandBar2.Visible = true;
        }
    }
     
    private void RadCommandBar1_FloatingStripCreated(object sender, EventArgs e)
    {
        if (radCommandBar1.Rows.Count == 0 || radCommandBar1.Rows[0].Strips.Count == 0)
        {
            radCommandBar1.Visible = false;
        }
        else
        {
            radCommandBar1.Visible = true;
        }
     
        if (radCommandBar2.Rows.Count == 0 || radCommandBar2.Rows[0].Strips.Count == 0)
        {
            radCommandBar2.Visible = false;
        }
        else
        {
            radCommandBar2.Visible = true;
        }
    }

    I hope this helps. Should you have any other questions, do not hesitate to ask.
     
    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8.
  9. Nigel
    Nigel avatar
    4 posts
    Member since:
    May 2019

    Posted 06 Jun 2019 Link to this post

    Hi Dimitar

    Perfect! That is exactly what I needed. Many thanks.

    However, how did you get the CommandBar to reappear when you hovered over it in your gif example?

    Regards

    Duane Suter

  11. Dimitar
    Admin
    Dimitar avatar
    2892 posts

    Posted 07 Jun 2019 Link to this post

    Hi Nigel,

    The EndDrag event is fired and I am using it to make the commandbar visible. Attached the entire project.

    Please let me know if there is something else I can help you with. 
     
    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  13. Nigel
    Nigel avatar
    4 posts
    Member since:
    May 2019

    Posted 07 Jun 2019 Link to this post

    Hi Dimitar

    Many thanks for that. Yes it has worked okay now.

    It hadnt worked with my code because I had a docked panel in the area between the two CommandBars. So I will have to find a way around that problem.

    Thanks again for your help.

    Duane Suter

  14.
  15. Dimitar
    Admin
    Dimitar avatar
    2892 posts

    Posted 10 Jun 2019 Link to this post

    Hello Nigel,

    I was able to reproduce this. What you can do is subscribe to the MouseMove event of the CommandBarFloatingForm and show the command bar when the mouse is at the top of the docked control. Here is an example:
    private void RadCommandBar1_FloatingStripCreated(object sender, EventArgs e)
    {
        var strip = sender as CommandBarStripElement;
        var form = strip.FloatingForm;
        form.MouseMove += Form_MouseMove;
     
        if (radCommandBar1.Rows.Count == 0 || radCommandBar1.Rows[0].Strips.Count == 0)
        {
            radCommandBar1.Visible = false;
        }
        else
        {
            radCommandBar1.Visible = true;
        }
     
        if (radCommandBar2.Rows.Count == 0 || radCommandBar2.Rows[0].Strips.Count == 0)
        {
            radCommandBar2.Visible = false;
        }
        else
        {
            radCommandBar2.Visible = true;
        }
    }
     
    private void Form_MouseMove(object sender, MouseEventArgs e)
    {
        if (!this.radCommandBar1.Visible && e.Button == MouseButtons.Left)
        {
            var form = sender as CommandBarFloatingForm;
            var location = form.PointToScreen(e.Location);
            var rect = new Rectangle(radListView1.PointToScreen(radListView1.Location), new Size(radListView1.Width, 30));
            
     
            if (rect.Contains(location))
            {
                radCommandBar1.Visible = true;
            }
        }
    }

    I hope this helps. Should you have any other questions, do not hesitate to ask.
     
    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top