How can I control the panel width (using MVVM)?

[StefanKoell]

Hi,

consider the following layout:

                <uniDock:StackDockGroup TheOrientation="Horizontal">

                    <uniDock:StackDockGroup DockId="Left" IsStableGroup="True" TheOrientation="Horizontal" />
                    <uniDock:TabbedDockGroup DockId="Tabs" IsStableGroup="True" />
                    <uniDock:StackDockGroup DockId="Right" IsStableGroup="True" TheOrientation="Horizontal" />

                </uniDock:StackDockGroup>

Right now, adding a panel to the Left group will split the view in 50/50. In a typical explorer style or Visual Studio style app, the left and right panels are somewhat smaller (let's say 20% initially). Can I somehow control the size (width) of a panel after I added it to a StackDockGroup?

Bonus question: at the moment, a window resize is causing to resize all panels proportionally. Is there a way to keep a group at the same width? In the above example, the Left and Right group should stay the same size (width) but the tabs adapt to the new window size?

Thanks, Stefan

[npolyak]

I'll have to look, do not remember off my head. I'll answer you on Sunday.

[npolyak]

Yes, it is possible to do it. The parent StackDockGroup can define e.g. InitialSizeCoefficients="250 * 250", e.g.

        <np:StackDockGroup x:Name="TheStackGroup"
                           TheOrientation="Horizontal"
                           IsStableGroup="True"
                           Margin="20"
                           InitialSizeCoefficients="250 * 250">

Note there should be no commas between the coefficients (only spaces) and they should be in GridLength format - in the same way in which e.g. Avalonia Grid defineds its columns or rows.

If I remember correctly, adding extra sub items to the panel will continue according to the same rule - 50/50 of the last pane, but the first 3 panes should always be 250, then whatever is left, and then 250 again.

[npolyak]

I've added a new sample to NP.Ava.UniDock repository - Prototypes/NP.DockItemsWidthSample that demos it.

[npolyak]

Stefan, please close the issue if you question is answered. Thanks

[StefanKoell]

Hi Nick,

I tried but somehow I can't get it to work in my app.

My code from above now looks like this:

<uniDock:StackDockGroup TheOrientation="Horizontal" IsStableGroup="True" InitialSizeCoefficients="250 * 250">
    <uniDock:StackDockGroup DockId="Left" IsStableGroup="True" TheOrientation="Horizontal" />
    <uniDock:TabbedDockGroup DockId="Tabs" IsStableGroup="True" />
    <uniDock:StackDockGroup DockId="Right" IsStableGroup="True" TheOrientation="Horizontal" />
</uniDock:StackDockGroup>

Note that my panels and tabs are put into the dock groups using MVVM. Initially, I only put one panel to the Left dock group and it still is 50/50.

Also, I tried the sample app but I think there's once again something messed up with the sub modules. I can't really fetch/pull the repo anymore and git spits out the following error:

fatal: No url found for submodule path 'SubModules/NP.IoCy/SubModules/NP.Utilities' in .gitmodules
fatal: Failed to recurse into submodule path 'SubModules/NP.IoCy'

[npolyak]

Hey Stefan,

I fixed the missing project - should compile now.

Can you create a project that shows what exactly happens under MVVM in some public repository - then on Sunday, I'll try to make it work.

[StefanKoell]

Hi Nick,

I've uploaded a repro project here (based on the ViewModelSample): https://github.com/StefanKoell/Misc/tree/main/src/NP.ViewModelSample

In the MainWindow.axaml I've created the StackDockGroup as mentioned above. In the code behind I'm adding a left panel and a couple of tabs.

Note that I don't add a right panel. I defined the right panel but didn't add anything. In my "real world app", the right panel is used if the user chooses to add a specific panel to the right at a later point in time.

Regards, Stefan

[npolyak]

Thanks Stefan, I'll take a look over the weekend.