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
Bryan
415
Having layout problems, need help!
posted

Working with the demo version of infragistics and cannot get my docking layout setup properly.  If I can, I think this is a great package and I will buy it.  If not, then bummer for me.

I am attaching an image of what template I am trying to set up, and failing at.  I am using the XAML, and I cannot get my SplitPanes to size their ratios properly.  For example I can get a vertical split pane to embed a horizontal split pane and add ContentPanes properly (the left bar in my picture).  But I cannot get the right side pane to size properly so that one ContentPane is small and the other is large.

Also, is it possible to have a group of tabs be pinnable?  I have content panes in a tabgroup, but if I try to unpin it only affects that one tab. 

Can anyone help?

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Forensic_Analysis.Window1"
    xmlns:igDock="http://infragistics.com/DockManager"
    Title="Window1" Height="768" Width="1024">
    <Grid>
        <DockPanel>
            <DockPanel DockPanel.Dock="Top" KeyboardNavigation.TabNavigation="None">
                <Menu KeyboardNavigation.TabNavigation="Cycle">
                    <MenuItem Header="_File">
                        <MenuItem Header="E_xit" Command="{Binding Path=CloseCommand}" />
                    </MenuItem>
                    <MenuItem Header="_Edit" />
                    <MenuItem Header="_Options" />
                    <MenuItem Header="_Help" />
                </Menu>
            </DockPanel>
            <igDock:XamDockManager>
                <igDock:XamDockManager.Panes>
                    <igDock:SplitPane Width="200">
                        <igDock:SplitPane SplitterOrientation="Horizontal">
                            <igDock:TabGroupPane>
                                <igDock:ContentPane Header="Date Range">
                                    <RichTextBox VerticalScrollBarVisibility="Auto" />
                                </igDock:ContentPane>
                                <igDock:ContentPane Header="Sample ID">
                                    <RichTextBox VerticalScrollBarVisibility="Auto" />
                                </igDock:ContentPane>
                            </igDock:TabGroupPane>
                            <igDock:ContentPane Header="Plate Map">
                                <StackPanel>
                                    <Button Content="Button 1" />
                                </StackPanel>
                            </igDock:ContentPane>
                            <igDock:ContentPane Header="Samples">
                                <StackPanel>
                                    <Button Content="Button 1" />
                                </StackPanel>
                            </igDock:ContentPane>
                            <igDock:ContentPane Header="Reference Sequence">
                                <StackPanel>
                                    <Button Content="Button 1" />
                                </StackPanel>
                            </igDock:ContentPane>
                        </igDock:SplitPane>
                    </igDock:SplitPane>
                    <igDock:SplitPane SplitterOrientation="Horizontal">
                        <igDock:SplitPane>
                            <igDock:TabGroupPane>
                                <igDock:ContentPane Header="Top">
                                    <RichTextBox VerticalScrollBarVisibility="Auto" />
                                </igDock:ContentPane>
                            </igDock:TabGroupPane>             
                        </igDock:SplitPane >                   
                        <igDock:TabGroupPane>
                            <igDock:ContentPane Header="Bottom">
                                <RichTextBox VerticalScrollBarVisibility="Auto" />
                            </igDock:ContentPane>
                        </igDock:TabGroupPane>
                    </igDock:SplitPane>
                </igDock:XamDockManager.Panes>
            </igDock:XamDockManager>
        </DockPanel>
    </Grid>
</Window>
 

  • 54937
    Verified Answer
    Offline posted

    nicros said:
    But I cannot get the right side pane to size properly so that one ContentPane is small and the other is large.

    The SplitPane class has an attached property named RelativeSize that is used to calculate the ratio of the available size that is given to each of its children. So in your snippet, the 2nd root SplitPane has 2 children - a SplitPane (which ultimately contains a TabGroupPane which contains a ContentPane with a RTB) and a TabGroupPane. If you want the SplitPane to have 80% of the space and the TabGroupPane to have 20% of the space, you can set the relative sizes. e.g.

    <igDock:SplitPane SplitterOrientation="Horizontal">
        <igDock:SplitPane  igDock:SplitPane.RelativeSize="100,800" />
        <igDock:TabGroupPane igDock:SplitPane.RelativeSize="100,200" />
    </igDock:SplitPane>

    Alternatively if you just wanted to have that TabGroupPane docked to the bottom so that its size is not proportionally distribute between the SplitPane and the TabGroupPane, you could put that TabGroupPane into a SplitPane that has its InitialDockedLocation set to DockedBottom. e.g.

    <igDock:XamDockManager.Panes>
        <!-- Content removed for example -->
        <igDock:SplitPane Width="200">
        </igDock:SplitPane>
        
        <igDock:SplitPane igDock:XamDockManager.InitialLocation="DockedBottom">
            <igDock:TabGroupPane igDock:SplitPane.RelativeSize="100,200">
                <igDock:ContentPane Header="Bottom">
                    <RichTextBox VerticalScrollBarVisibility="Auto" />
                </igDock:ContentPane>
            </igDock:TabGroupPane>
        </igDock:SplitPane>
        
        <igDock:SplitPane>
            <igDock:TabGroupPane>
                <igDock:ContentPane Header="Top">
                    <RichTextBox VerticalScrollBarVisibility="Auto" />
                </igDock:ContentPane>
            </igDock:TabGroupPane>
        </igDock:SplitPane>
    </igDock:XamDockManager.Panes>

    It is important to realize though that the xamDockManager is a ContentControl and so the docked panes (including the last one that just has the RTB) is docked around the content. In this case you have no content so as you make the control bigger, you're going to have some empty space in the middle at some point. Depending on what you are trying to acheive, you might instead using a DocumentContentHost to provide a tabbed mdi area in the dockmanager and put the TabGroupPane into that. e.g.

    <igDock:XamDockManager>
        <igDock:XamDockManager.Panes>
            <!-- Content removed for example -->
            <igDock:SplitPane Width="200">
            </igDock:SplitPane>
            
            <igDock:SplitPane igDock:XamDockManager.InitialLocation="DockedBottom">
                <igDock:TabGroupPane igDock:SplitPane.RelativeSize="100,200">
                    <igDock:ContentPane Header="Bottom">
                        <RichTextBox VerticalScrollBarVisibility="Auto" />
                    </igDock:ContentPane>
                </igDock:TabGroupPane>
            </igDock:SplitPane>
            
        </igDock:XamDockManager.Panes>
        
        <igDock:DocumentContentHost>
            <igDock:SplitPane>
                <igDock:TabGroupPane>
                    <igDock:ContentPane Header="Top">
                        <RichTextBox VerticalScrollBarVisibility="Auto" />
                    </igDock:ContentPane>
                </igDock:TabGroupPane>
            </igDock:SplitPane>
        </igDock:DocumentContentHost>
    </igDock:XamDockManager>

    Or if you just have singular content (the RTB) you could just make that the Content. e.g.

    <igDock:XamDockManager>
        <igDock:XamDockManager.Panes>
            <!-- Content removed for example -->
            <igDock:SplitPane Width="200">
            </igDock:SplitPane>
            
            <igDock:SplitPane igDock:XamDockManager.InitialLocation="DockedBottom">
                <igDock:TabGroupPane igDock:SplitPane.RelativeSize="100,200">
                    <igDock:ContentPane Header="Bottom">
                        <RichTextBox VerticalScrollBarVisibility="Auto" />
                    </igDock:ContentPane>
                </igDock:TabGroupPane>
            </igDock:SplitPane>
            
        </igDock:XamDockManager.Panes>
        
        <RichTextBox VerticalScrollBarVisibility="Auto" />
    </igDock:XamDockManager>

    nicros said:
    Also, is it possible to have a group of tabs be pinnable?  I have content panes in a tabgroup, but if I try to unpin it only affects that one tab.

    The PinBehavior property determines if the pin button affects all the visible ContentPanes within a TabGroupPane. By default though that is set to AllPanes so clicking the pin button of a ContentPane in a TabGroupPane should unpin all the panes in that tab group.