I am trying to create the two column layout that can be re-sized to fill the whole content. Take a look at my xaml snippet below.
<igDock:XamDockManager.Panes>
<igDock:SplitPane x:Name="MainSplit" SplitterOrientation="Vertical" igDock:XamDockManager.InitialLocation="DockedLeft" >
<igDock:SplitPane x:Name="PanelsSplit" SplitterOrientation="Horizontal">
<igDock:SplitPane x:Name="LeftTopSplit" igDock:XamDockManager.InitialLocation="DockedTop">
<igDock:ContentPane x:Name="OverView" cal:RegionManager.RegionName="Overview" MinWidth="200" />
</igDock:SplitPane>
<igDock:SplitPane x:Name="LeftBottomSplit" igDock:XamDockManager.InitialLocation="DockedTop">
<igDock:ContentPane x:Name="SectionList" cal:RegionManager.RegionName="Panels" MinWidth="200" />
<igDock:SplitPane x:Name="DocumentsSplit" SplitterOrientation="Horizontal" SizeChanged="DocumentsSplit_SizeChanged">
<igDock:SplitPane x:Name="RightTopSplit" igDock:XamDockManager.InitialLocation="DockedTop">
<igDock:ContentPane x:Name="SectionDetails" cal:RegionManager.RegionName="Documents" MinWidth="200" AllowDockingRight="False" />
<igDock:SplitPane x:Name="RightBottomSplit" igDock:XamDockManager.InitialLocation="DockedTop">
<igDock:ContentPane x:Name="SessionDetails" cal:RegionManager.RegionName="SessionDetails" MinWidth="200" AllowDockingRight="False" />
</igDock:XamDockManager.Panes>
Each column has the top and bottom panes, and each column is hosted by another splitPane so they can be separated vertically. However the problem is the main split panel (root) won't fill the content of the dockmanager.
I was able to do this using the WinForms Infragistics DockManager control very easily by setting the Dock property of the dockManager to Fill and have the contents inside stretch.
How can I achieve the same using the WPF dockManager?
Thanks
AndreasAtWork said: In the first solution - we have the problem, that there are TabHeader on the Main Area. Maybe we can try to remove that.
In the first solution - we have the problem, that there are TabHeader on the Main Area. Maybe we can try to remove that.
One would only use DocumentContentHost when one wanted to use a tabbed document interface like Visual Studio. It does not sound like you want a tabbed document interface so that is not what you would use.
AndreasAtWork said:In the second solution everything looks good - but we lost the focus notification, so the splitpanes wont closed automatically if you click on a control inside the main content area.
The xamDockManager is a ContentControl for this reason - so that you could put your singular content as the central portion of the control. It sounds like you want your control to be within the center of the XDM and the panes docked around it so it sounds like this is the best solution for you. With regards to the issue you are describing I am not able to replicate that. BTW SplitPanes don't close so I assume that you mean that the flyout for an unpinned contentpane does not close. It would close as long as keyboard focus was shifted out of the pane. Just clicking into empty space within the element in the middle wouldn't necessarily take focus away from it. Take the following example:
<igDock:XamDockManager> <igDock:XamDockManager.Panes> <igDock:SplitPane SplitterOrientation="Horizontal" igDock:XamDockManager.InitialLocation="DockedLeft"> <igDock:ContentPane Header="ABC" IsPinned="False"> <TextBox AcceptsReturn="True" /> </igDock:ContentPane> <igDock:ContentPane Header="DEF"> <TextBox AcceptsReturn="True" /> </igDock:ContentPane> </igDock:SplitPane> </igDock:XamDockManager.Panes> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Label Content="First" Grid.Column="0" Grid.Row="0" /> <TextBox Text="First" Grid.Column="1" Grid.Row="0" /> <Label Content="Second" Grid.Column="0" Grid.Row="1" /> <TextBox Text="Second" Grid.Column="1" Grid.Row="1" /> <Label Content="Third" Grid.Column="0" Grid.Row="2" /> <TextBox Text="Third" Grid.Column="1" Grid.Row="2" /> </Grid></igDock:XamDockManager>
Run this and click on the ABC tab to activate it and fly it out. You'll notice that clicking on the labels in the middle won't cause the flyout to close because keyboard focus doesn't shift when you do that but if you click on the textboxes in the middle then the flyout does close. If you wanted the flyout to close when you clicked on the label then you would need to ensure that focus shifts. For example you might do that with your own usercontrol that contains that central content where if in the mouse down for it it doesn't have keyboard focus (e.g. IsKeyboardFocusWithin is false) that you call Focus on the usercontrol. Or you might put the content in a scrollviewer. You'll notice that if you put a scrollviewer around the Grid in the example above that clicking on the label will cause the flyout to close. If you use something like Snoop you will see that that is because the ScrollViewer sets focus to itself (assuming it is focusable).
AndreasAtWork said: In the third solution, the header of the lst content pane will now fill the normal header area. Is it possible to remove this too? I dont want that the user can close, move, dock the main document area, so i dont want to have this extra space.
In the third solution, the header of the lst content pane will now fill the normal header area. Is it possible to remove this too? I dont want that the user can close, move, dock the main document area, so i dont want to have this extra space.
The FillContainer LayoutMode was added after a few requests came in for this functionality. It is specifically for customers that do not have a singular central content and don't want to use a tabbed document interface. Instead they want the available area of the XDM to be filled by the content panes docked within. In FillContainer mode the XDM will take the innermost dockable split pane and fill the available area. That pane is just like any other dockable pane in that panes may be dragged into it and out of it, etc. It does not sound like that is what you are looking to acheive.
We have the same issue too and find 3 possible solutions right now.
1. use the DocumentContentHost
2. set our user control directly in the body of the XamDockManager after the XamDockManager.Pames Definition.
3. Use the XamDockManager LayoutMode="FillContainer" setting.
But all solutions are not perfect.
In the second solution everything looks good - but we lost the focus notification, so the splitpanes wont closed automatically if you click on a control inside the main content area.
Hello,
Thank you for your post. I have been looking into it and I suggest you set the XamDockManager’s LayoutMode Property to FillContainer in order to achieve the result you want. Please let me know if this helps you or you need further clarifications on this matter.
Looking forward for your reply.
The XamDockManager is frustrating. It has cool feature that take a lot of time to develop. I appreciate the capabilities. However...
Why does it reserve space? For what?
I set up a XamDockManager with a single SplitPane as content and it leaves half the screen filled with a gray backgroud! Why? Why can't I get the single content to fille the entire XamDockManager? I tried setting the Height and Width of the SplitPane to the ActualHeight and ActualWidth of the XamDockManager but thazt does nothing.
Filling the space with a single content should be be the default behavior.
I tried adding a second SplitPane Bottom and then there was space reserved in the center of the screen. It is driving me crazy!
There are a couple of reasons why your xaml doesn't fill the available area. First, you're assuming that there is no chrome/padding/borders/etc. between the XamDockManager and the SplitPane itself which may or may not be the case depending on the styling, theme, property settings, etc. Second, when there is content, the XamDockManager will follow what VS does which is to always leave a minimal amount of space for the content. You set the Content to an empty string; you can remove the Content attribute you put on the element.
Note, I would not recommend going this approach - both for the first point that I mentioned but also because users can still create other docked panes (dragging over the root docking indicators for example) so your bounded width/height splitpane would likely hide/overlay those panes. Also, users can remove/drag out/close/unpin all the panes within that split pane at which point the split pane will be hidden. If they have dragged all the panes out of the split pane, the split would be hidden and when they drag the pane to a new docked location, a new split pane would be created docked to the edge to which the user has docked the pane.