Forums Ultimate UI for WPF
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
Close
Jason Payne
1540
SplitPanes and splitters resizing perculiarly and losing anchorage when dragged in different directions
posted

I am having several layout issues using the XamDockManager.  The following is a very stripped-down version of the XAML for my application:

<Page ...>
  <DockPanel>
    <TextBlock DockPanel.Dock="Top">PDC Margin</TextBlock>
    <local:Ribbon DockPanel.Dock="Top" />
    <igDock:XamDockManager>
      <igDock:XamDockManager.Panes>
        <igDock:SplitPane Name="spMainPage">
          <igDock:ContentPane Width="300" />
        </igDock:SplitPane>
        <igDock:SplitPane Name="splitMain">
          <igDock:TabGroupPane>
            <ContentPane>
              <igDock:XamDockManager>
                <igDock:XamDockManager.Panes>
                  <igDock:SplitPane SplitterOrientation="Horizontal" igDock:XamDockManager.InitialLocation="DockedLeft">
                    <igDock:ContentPane>
                      <xcdg:DataGridControl />
                    </igDock:ContentPane>
                    <igDock:ContentPane>
                      <xcdg:DataGridControl />
                    </igDock:ContentPane>
                  </igDock:SplitPane>
                  <igDock:SplitPane SplitterOrientation="Horizontal" igDock:XamDockManager.InitialLocation="DockedRight">
                    <igDock:ContentPane>
                      <xcdg:DataGridControl />
                    </igDock:ContentPane>
                    <igDock:ContentPane>
                      <xcdg:DataGridControl />
                    </igDock:ContentPane>
                    <igDock:ContentPane>
                      <!-- Some controls here -->
                    </igDock:ContentPane>
                  </igDock:SplitPane>
                </igDock:XamDockManager.Panes>
              </igDock:XamDockManager>
            </ContentPane>
          </igDock:TabGroupPane>
        </igDock:SplitPane>
      </igDock:XamDockManager.Panes>
    </igDock:XamDockManager>
  </DockPanel>
</Page>

Upon starting my app, this is the result I see:

As can be seen, the SplitPane on the far right containing the three ContentPanes arranged vertically is squashed right up against the edge of the browser window.

If I click and drag the splitter to the left of this SplitPane on the left edge of the splitter (where the red arrow points) in the left direction, it resizes perfectly as below, but if I click and drag on the right edge of the splitter, it doesn't allow me to drag leftwards, it only allows me to drag rightwards.

 

However, as soon as I even touch the right edge of the splitter (green arrow), the right-hand SplitPane loses its anchorage to the right edge of the browser window.  This results in perculiar resizing issues.  If I drag the splitter leftwards (by the red arrow), the left SplitPane gets smaller, the splitter moves to where the mouse button is released (as expected), but the right SplitPane stays the same size but moves left.  If I drag the splitter rightwards (by the green arrow), when I release the mouse button, the splitter returns to its original position but the width of the right-hand SplitPane goes smaller by the amount I attempted to drag the splitter by, leaving a big gap.  See below:

If I now try to drag the right-hand edge of the the right-hand SplitPane (adjacent to the big gap) rightwards, the SplitPane's width doesn't increase, it stays the same size but just moves horizontally by the same distance dragged.  See below:

 

The behaviour I would like instead of all the above is for the panes to fill up the space nicely and remain anchored to adjacent window/pane edges as the splitters and edges are dragged around.  And certainly for the splitters to not have two almost indiscernible edges.  How can I achieve this?

Many thanks,

Jason

PS: I've noticed that the screenshots are clipped due to the reduced width of the discussion window, it never used to be so thin!

  • 54937
    Offline posted

    First, let me state some facts about the xaml snippet you provided and the layout that will result.

    * You have an outer xamDockManager that has 2 root splitpane -both are docked to the left (since the InitialPaneLocation was not set).

    * In the 1st outer root split pane, you can contain a single ContentPane. Since that ContentPane has an explicit Width, that split pane may be able to get smaller/larger but the ContentPane will not. In WPF when you set an explicit width that is the width that the element will always be until something explicitly changes that value - which normally doesn't happen. If you want that split and its contentpane to be resizable then you should set the Width on the root SplitPane itself. When its splitter is moved that will adjust the Width of the associated root splitpane.

    * In the 2nd outer root split pane, you have a tabgrouppane with a single ContentPane. That ContentPane contains a XamDockManager as its content. Since this pane is docked on the left and since it has been given no explicit Width on the outer root splitpane, the content (the tabgrouppane in this case) will be measured with an infinite width - i.e. it will be sized based on the (desired) size of the content.

    * The inner xamdockmanager has 2 split panes - one docked left and one docked right. Again neither have an explicit width so their content will be measured/arranged based on their desired size.

    XtreemX said:
    As can be seen, the SplitPane on the far right containing the three ContentPanes arranged vertically is squashed right up against the edge of the browser window.

    This would be correct behavior based on what I see in the snippet and screenshot. Basically the 2nd root splitpane is going to measure its children with the remaining space after leaving room for the 1st root splitpane (the ~300 you're using). Now since no width has been specified on the first nested split pane, when it is measured it will be asked to measure with the space available. Since that appears to have contents that require a horizontal scrollbar it is likely that the element is returning a large width. So that pane gets as much space as is available and remainder of the space is allocated to the remaining nested split pane.

    XtreemX said:
    but if I click and drag on the right edge of the splitter, it doesn't allow me to drag leftwards, it only allows me to drag rightwards

    This too is correct behavior. The xamDockManager does not have a mode where all the panes fill the available area. So you have 2 splitters in the inner dockmanager - one for resizing the left split pane and one for resizing the right split pane. When you move the splitter for the right split pane, you are increasing its width (and setting an explicit width on that split). When you then try to resize the left split pane, you cannot make it bigger because there is no available space. The pane is already using all the space available.

    XtreemX said:
    However, as soon as I even touch the right edge of the splitter (green arrow), the right-hand SplitPane loses its anchorage to the right edge of the browser window.  This results in perculiar resizing issues.  If I drag the splitter leftwards (by the red arrow), the left SplitPane gets smaller, the splitter moves to where the mouse button is released (as expected), but the right SplitPane stays the same size but moves left.  If I drag the splitter rightwards (by the green arrow), when I release the mouse button, the splitter returns to its original position but the width of the right-hand SplitPane goes smaller by the amount I attempted to drag the splitter by, leaving a big gap.

    First, I don't see any arrows in the screenshot. However based on what you are describing this sounds correct. Resizing one root split pane does not affect the size of another (especially once it has been resized). I think you're assuming that the dockmanager fills the available area with the panes but it doesn't. It acts like VS where the docked panes are docked around a central content area - this is why the xamDockManager is a ContentControl so that the content is that central area.
    XtreemX said:

    The behaviour I would like instead of all the above is for the panes to fill up the space nicely and remain anchored to adjacent window/pane edges as the splitters and edges are dragged around.  And certainly for the splitters to not have two almost indiscernible edges.  How can I achieve this?

    If you want a mode where the panes fill the available area then you'll probably need to submit a suggestion for this feature. You may be able to programatically resize the panes (which I suspect will be quite tricky as sizes change when panes are unpinned, moved, etc.) but even then you will still have an extra splitter bar.