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
1285
Working with tear away popup control containers - need help
posted

Howdy,

 I'm evaluating your controls and have a couple of things that are confounding me.  I have controls set to use the pop-up control container and allowing tearaway.  When I tear them away, they cannot be re-sized... I would be fine if you could get me an example of the filter code to add the grip from the gallery control when it pops up and if they tear it away... but that leads me to another thing... i have designed an entire .isl file that is based on the noir theme (loosely) and when I tear off anything, it has a persistent neon blue border that I cannot change... if you know how to get rid of that blue border...  I would love to know how...  (see screenshot below)

 the other thing I thought of doing is just taking the control out of the pop-up control container when the user starts to tear it away, but the only reference is to a "toolbar" object, so I'm not sure which container it is using and if I have an option to cancel the tearaway and replace the pop-up window with the persistent blue border with a nicely designed sizeable toolwindow of my own making...

 anyway, the controls seem pretty awesome in their flexibility minus these few things I have come across.. any help would be greatly appreciated... I would like to make a decision on your controls very soon. 

 Main Screen Shot

  • 44743
    Verified Answer
    posted

    I wouldn't recommend trying to move the contained control into another container. This could have a whole bunch of problems, especially when the initial drag occurs. However, I think we might be able to work around your issues without having to resort to that. If you want to be able to have a popup with a control in it as well as the ability to resize the floating toolbar when you tear it away, it might be better to use a ControlContainerTool. Add a PopupMenuTool to your toolbar instead of a PopupControlContainerTool. Set its Settings.PopupStyle to Toolbar. Then add a ControlContainerTool to its Tools collection (or just drop down the menu at design-time and add it). Put your control in the ControlContainerTool. Now, things should be pretty much the way they were when you were using a PopupControlContainerTool. This setup also does not support resizing the tearaway and you can submit a feature request for that ability for either tool here: http://devcenter.infragistics.com/Protected/RequestFeature.aspx. However, we can work around this and manually implement resizing for the tearaway (this code will only work for the ControlContainerTool in a menu and not the PopupControlContainerTool. That is why you need to make the change mentioned above). Add the following code to your Form and make sure to hook up the MouseEnterElement and MouseLeaveElement event handlers to your UltraToolbarsManager:

    private bool inResizeOperation;
    private ResizeSide resizeSide;
    private Point originalResizeScreenLocation;
    private Rectangle originalFloatingBounds;
    private Size originalControlSize;
    private FloatingToolbarWindowBase floatingWindow;
    private UIElement floatingWindowElement;
    private ControlContainerTool controlContainerTool;

    private void HookFloatingWindow( UIElement floatingWindowElement )
    {
     this.UnhookFloatingWindow();

     FloatingToolbarWindowBase floatingWindow = floatingWindowElement.Control as FloatingToolbarWindowBase;

     if ( floatingWindow == null )
      return;

     // Only a floating toolbar created from a tearaway should be resizable.
     if ( floatingWindow.Toolbar.TearawayToolOwner == null )
      return;

     if ( floatingWindow.Toolbar.Tools.Count != 1 )
      return;

     this.controlContainerTool = floatingWindow.Toolbar.Tools[ 0 ] as ControlContainerTool;

     // Only a floating toolbar with a single control container tool should be resizable.
     if ( this.controlContainerTool == null )
      return;

     this.floatingWindowElement = floatingWindowElement;
     this.floatingWindow = floatingWindow;
     this.floatingWindow.MouseDown += new MouseEventHandler( this.floatingWindow_MouseDown );
     this.floatingWindow.MouseMove += new MouseEventHandler( this.floatingWindow_MouseMove );
     this.floatingWindow.MouseUp += new MouseEventHandler( this.floatingWindow_MouseUp );
    }

    private void UnhookFloatingWindow()
    {
     if ( this.floatingWindow == null )
      return;

     this.floatingWindow.MouseDown -= new MouseEventHandler( this.floatingWindow_MouseDown );
     this.floatingWindow.MouseMove -= new MouseEventHandler( this.floatingWindow_MouseMove );
     this.floatingWindow.MouseUp -= new MouseEventHandler( this.floatingWindow_MouseUp );
     this.floatingWindow = null;
     this.floatingWindowElement = null;
     this.controlContainerTool = null;
    }

    private void floatingWindow_MouseDown( object sender, MouseEventArgs e )
    {
     this.inResizeOperation = this.floatingWindowElement.PointInAdjustableArea( e.Location );

     if ( this.inResizeOperation == false )
      return;

     this.originalResizeScreenLocation = this.floatingWindow.PointToScreen( e.Location );

     this.originalFloatingBounds = this.floatingWindow.Bounds;
     this.originalControlSize = this.controlContainerTool.Control.Size;

     Rectangle rect = this.floatingWindowElement.Rect;

     if ( e.Y <= rect.Top + 3 )
      this.resizeSide = ResizeSide.Top;
     else if ( e.Y >= rect.Bottom - 3 )
      this.resizeSide = ResizeSide.Bottom;
     else if ( e.X <= rect.Left + 3 )
      this.resizeSide = ResizeSide.Left;
     else if ( e.X >= rect.Right - 3 )
      this.resizeSide = ResizeSide.Right;
     else
      this.inResizeOperation = false;
    }

    private void floatingWindow_MouseMove( object sender, MouseEventArgs e )
    {
     if ( this.inResizeOperation == false )
      return;

     Point currentResizeScreenLocation = this.floatingWindow.PointToScreen( e.Location );
     Point diff = new Point(
      currentResizeScreenLocation.X - this.originalResizeScreenLocation.X,
      currentResizeScreenLocation.Y - this.originalResizeScreenLocation.Y );

     Point location = this.originalFloatingBounds.Location;
     Size size = this.originalFloatingBounds.Size;
     Size controlSize = this.originalControlSize;

     switch ( this.resizeSide )
     {
      case ResizeSide.Left:
       location.X += diff.X;
       size.Width -= diff.X;
       controlSize.Width -= diff.X;
       break;

      case ResizeSide.Top:
       location.Y += diff.Y;
       size.Height -= diff.Y;
       controlSize.Height -= diff.Y;
       break;

      case ResizeSide.Right:
       size.Width += diff.X;
       controlSize.Width += diff.X;
       break;

      case ResizeSide.Bottom:
       size.Height += diff.Y;
       controlSize.Height += diff.Y;
       break;
     }

     this.controlContainerTool.Control.Size = controlSize;

     this.floatingWindow.Toolbar.FloatingLocation = location;
     this.floatingWindow.Toolbar.FloatingSize = size;
    }

    private void floatingWindow_MouseUp( object sender, MouseEventArgs e )
    {
     this.inResizeOperation = false;
    }

    private void ultraToolbarsManager1_MouseEnterElement( object sender, UIElementEventArgs e )
    {
     if ( e.Element is FloatingToolbarUIElement )
      this.HookFloatingWindow( e.Element );
    }

    private void ultraToolbarsManager1_MouseLeaveElement( object sender, UIElementEventArgs e )
    {
     if ( e.Element is FloatingToolbarUIElement )
      this.UnhookFloatingWindow();
    }

    private enum ResizeSide
    {
     Top,
     Bottom,
     Left,
     Right
    }

    As far as the borders go, I looked into this and the colors are actually hard coded, but you can get around this as well with a DrawFilter. Add this draw filter implementation to your project:

    internal class BordersDrawFilter : IUIElementDrawFilter
    {
     bool IUIElementDrawFilter.DrawElement( DrawPhase drawPhase, ref UIElementDrawParams drawParams )
     {
      drawParams.DrawBorders(
       // Use any border style here
       UIElementBorderStyle.Solid,
       Border3DSide.All,
       // Use any color here, or use a different DrawBorders overload for multi-color border styles.
       Color.Red,
       drawParams.Element.Rect,
       drawParams.InvalidRect);

      // Return True so the default border drawing logic is not used.
      return true;
     }

     DrawPhase IUIElementDrawFilter.GetPhasesToFilter( ref UIElementDrawParams drawParams )
     {
      if ( drawParams.Element is FloatingToolbarUIElement )
       return DrawPhase.BeforeDrawBorders;

      return DrawPhase.None;
     }
    }

    Then just create an instance of this class and assign it to the DrawFilter on the UltraToolbarsManager.

  • 1285
    Offline posted in reply to Mike Dour

    Thanks for getting back to me.  I ended up adding a button to each control container to break them out into a pre-defined ultrawintoolbars formatted window because I also wanted the window to be able to break away from the owned forms of the application and apply topmost for my user's convenience.

     Do you have any idea about how to get rid of the blue border around floating toolbar windows and control containers that are torn away?  That was a big reason why I wanted to put the control into an outside window.  It also seems that there is a light colored seam between the main popup menu button and it's corresponding popup menu that I can't seem to get rid of in favor of my dark gray color scheme.  It only appears on the main pop-up tool menu item, not on the children of pop-up menu tool items.

     Thanks again for you help... I am sure that I will use this code for something - I do love the fact that you can customize so much of these controls.