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
Daniel Suitor
1240
Evenly distributing Docking / Split Panes
posted

I’m trying to achieve what I thought to be a fairly simple task, create three panes and distribute them evenly vertically within a dock manager.  Basically a top, middle and bottom pane, each taking up 1/3 of the window.  I have researched and looked over the sample app, but still can’t achieve what I’m trying to do.  The following are two of my many attempts at achieving this.  Perhaps I’m using the RelativeSize incorrectly.  Any help with this is greatly appreciated.

Thanks

Dan

    <!-- Transfers Dock Manager -->
    <RCSSharedUIExtensions:XamDockManagerEx Grid.Row="1" x:Name="TransfersDockManager3" Focusable="false">
      <igDock:XamDockManager.Panes>

        <!-- Split Pane 1 (top 1/3) -->
        <igDock:SplitPane igDock:SplitPane.RelativeSize="100,300" igDock:XamDockManager.InitialLocation="DockedTop" SplitterOrientation="Horizontal">
          <!-- Split Pane 1, Content Pane 1 -->
          <igDock:ContentPane
            x:Name="InboundTransfersContentPane3">
            <igDP:XamDataGrid
              x:Name="PART_InboundTransfersBangList3"
              DataSource="{Binding Tracker.InboundDataList.UICollection}">
            </igDP:XamDataGrid>
          </igDock:ContentPane>
        </igDock:SplitPane>

        <!-- Split Pane 2 (second 1/3) -->
        <igDock:SplitPane igDock:SplitPane.RelativeSize="100,300" SplitterOrientation="Horizontal">

          <!-- Split Pane 2, Content Pane 1 -->
          <igDock:ContentPane
            x:Name="OutboundTransfersContentPane3">
            <igDP:XamDataGrid
              x:Name="PART_OutboundTransfersBangList3"
              DataSource="{Binding Tracker.OutboundDataList.UICollection}">
            </igDP:XamDataGrid>
          </igDock:ContentPane>
        </igDock:SplitPane>

        <!-- Split Pane 3 (bottom 1/3) -->
        <igDock:SplitPane igDock:SplitPane.RelativeSize="100,300"  igDock:XamDockManager.InitialLocation="DockedBottom" SplitterOrientation="Horizontal">
          
          <!-- Split Pane 3, Content Pane 1 -->
          <igDock:ContentPane
            x:Name="NexGenTransfersContentPane3"
            CloseAction="HidePane"
            Header="{Binding Tracker.NexGenDataList.Count, Converter={StaticResource StringFormatConverter}, ConverterParameter='NexGen Transfers ({0})'}"
            Style="{StaticResource OnAirContentPaneStyle}">
            <igDP:XamDataGrid
              x:Name="PART_NexGenTransfersBangList3"
              DataSource="{Binding Tracker.NexGenDataList.UICollection}">
            </igDP:XamDataGrid>
          </igDock:ContentPane>
        </igDock:SplitPane>
      </igDock:XamDockManager.Panes>
    </RCSSharedUIExtensions:XamDockManagerEx>


    <RCSSharedUIExtensions:XamDockManagerEx Grid.Row="1" x:Name="TransfersDockManager2" Focusable="false">
      <igDock:XamDockManager.Panes>

        <!-- Split Pane 1 (top 1/3) -->
        <igDock:SplitPane igDock:SplitPane.RelativeSize="100,100" igDock:XamDockManager.InitialLocation="DockedTop" SplitterOrientation="Horizontal">
          <!-- Split Pane 1, Content Pane 1 -->
          <igDock:ContentPane
            x:Name="InboundTransfersContentPane2">
            <igDP:XamDataGrid
              x:Name="PART_InboundTransfersBangList2"
              DataSource="{Binding Tracker.InboundDataList.UICollection}">
            </igDP:XamDataGrid>
          </igDock:ContentPane>
        </igDock:SplitPane>

        <!-- Split Pane 2 (bottom 2/3) -->
        <igDock:SplitPane igDock:SplitPane.RelativeSize="100,200" igDock:XamDockManager.InitialLocation="DockedBottom" SplitterOrientation="Horizontal">

          <!-- Split Pane 3 (Top of bottom pane which is split into 2) -->          
          <igDock:SplitPane igDock:XamDockManager.InitialLocation="DockedTop" SplitterOrientation="Horizontal">
            
            <!-- Split Pane 3, Content Pane 1-->
            <igDock:ContentPane
              x:Name="OutboundTransfersContentPane2">
              <igDP:XamDataGrid
                x:Name="PART_OutboundTransfersBangList2"
                DataSource="{Binding Tracker.OutboundDataList.UICollection}">
              </igDP:XamDataGrid>
            </igDock:ContentPane>
          </igDock:SplitPane>

          <!-- Split Pane 4 (Bottom of bottom pane which is split into 2) -->
          <igDock:SplitPane igDock:XamDockManager.InitialLocation="DockedBottom" SplitterOrientation="Horizontal">
            
            <!-- Split Pane 4, Content Pane 1-->
            <igDock:ContentPane
              x:Name="NexGenTransfersContentPane2"
              CloseAction="HidePane"
              Header="{Binding Tracker.NexGenDataList.Count, Converter={StaticResource StringFormatConverter}, ConverterParameter='NexGen Transfers ({0})'}"
              Style="{StaticResource OnAirContentPaneStyle}">
              <igDP:XamDataGrid
                x:Name="PART_NexGenTransfersBangList2"
                DataSource="{Binding Tracker.NexGenDataList.UICollection}">
              </igDP:XamDataGrid>
            </igDock:ContentPane>
          </igDock:SplitPane>
        </igDock:SplitPane>
      </igDock:XamDockManager.Panes>
    </RCSSharedUIExtensions:XamDockManagerEx>

  • 7555
    Verified Answer
    Offline posted

    Hello Daniel,

    Thank you for contacting . If you want three panes that equally fill the available area then you would have to use a single SplitPane to contain all three panes and you would set the xamDockManager’s LayoutMode property to "FillContainer.

    Something like this :

    <igDock:XamDockManager Name="xamDockManager1" LayoutMode="FillContainer" >
<igDock:XamDockManager.Panes>

<!-- Split Pane 1 (top 1/3) -->
<igDock:SplitPane igDock:SplitPane.RelativeSize="100,300" igDock:XamDockManager.InitialLocation="DockedTop" SplitterOrientation="Horizontal">
<!-- Split Pane 1, Content Pane 1 -->
<igDock:ContentPane x:Name="InboundTransfersContentPane3">
<igDP:XamDataGrid
x:Name="PART_InboundTransfersBangList3"
BindToSampleData="True" >
</igDP:XamDataGrid>
</igDock:ContentPane>

<igDock:ContentPane x:Name="OutboundTransfersContentPane3">
<igDP:XamDataGrid
x:Name="PART_OutboundTransfersBangList3"
BindToSampleData="True">
</igDP:XamDataGrid>
</igDock:ContentPane>
<igDock:ContentPane
x:Name="NexGenTransfersContentPane3"
CloseAction="HidePane"
Header="Test">
<igDP:XamDataGrid
x:Name="PART_NexGenTransfersBangList3"
BindToSampleData="True">
</igDP:XamDataGrid>
</igDock:ContentPane>

</igDock:SplitPane>

...
...

    The FillContainer will take the innermost split pane and fill the remaining area and RelativeSize on a root splitpane would no nothing , it only affects how panes within a SplitPane are sized by comparing its values to the siblings. At the root the SplitPanes are positioned either based on the Width/Height or barring that then their preferred size

    Let me know if you have any question.

    Regards,