A multi container to help organise content in a single form app

This is one of the components in rixControls (version available on Nuget currently only for .NET Framework but will be on NET 5 later in the year

Its another take on the splitcontainer/form layout problem, here’s a test form with the control dropped in place:

You can see the lighter grey on the left, right and bottom areas, these will hold user controls which themselves form the layout of your application

I have made some test usercontrols for this demo, here they are in my project:

The one called ucLeftTester1.vb is shown in design mode. These user controls just have a label on them, except one which has a rixConsole

This is the code I use to get started, the name of the multi control is rixMulti1 in this case:

I declare form level variables for the controls that will go into the mutli:

  Private mLeft1 As New ucLeftTester1 With {.Tag = "Left one"}
  Private mLeft2 As New ucLeftTester2 With {.Tag = "Left two"}
  Private mRight1 As New ucRightTester1 With {.Tag = "Team Explorer"}
  Private mRight2 As New ucRightTester2 With {.Tag = "Properties"}
  Private mBottom1 As New ucBottomTester1 With {.Tag = "Bottom one"}
  Private mBottom2 As New ucBottomTester2 With {.Tag = "Bottom two"}

  Private mConsole As New ucConsole

Then in my form load event I pass them to the Multi control like this:

    With RixMulti1
    End With

The StartWith method takes the path to a folder in which the control will save settings, this is the size of each open panel and which panels are open, so that when the application is run again it can start from wherever it left off

This is what the settings file looks like once created:

rixMulti settings file contents

And so given the code above, I should now be able to run the app and interact with the Multi control on the form, and see all of my user controls in the app:

The control rixMulti in full swing

There is a property called BottomMode which enables you to set whether the bottom panel sits between the left and right panels (below), or out on its own (above)

With AutoShrink set to false, you can manually shrink the menu panels by clicking anywhere where there isn’t a button, here I have collapsed the right menu:

Soon as you hover over this menu it pops back out again

By default, this happens automatically – going back to the settings file you can see AutoShrink is set to True (the AutoShrink time is the time in milliseconds after the last detected mouse movement that the shrink occurs)

So all menu items will shrink back to give more space:

Because you declared variables for each user control in the Form, you will be able to access its members via that variable. If you need for any of the user controls to access the form, then just pass the form to the usercontrol in its constructor, this way its very similar to the contents of the user control being within the form itself

You can see below, with all of the panels collapsed (and there could be plenty) – the vast majority of screen space is available:

The Multi is set up with the dark theme I use for most of the controls in rixControls

future versions

I’m waiting on a Visual Studio preview that includes the ability to make user controls with NET 5 (Windows Forms), when that comes through I will be porting rixControls into it

I will add the ability to click and hold a menu button that relates to a panel that isn’t currently visible, and have that panel open up alongside the already open panel, meaning two panels can be opened at the same time for each ‘side’ of the form (left, right & bottom)

The user will have an icon to select whether the two panels are ‘sharing the space of one panel’ or if ‘both panels show in full size’

Leave a Reply

Your email address will not be published. Required fields are marked *