<igDock:XamDockManager> <igDock:XamDockManager.Panes> <igDock:SplitPane> <igDock:ContentPane> <StackPanel Height="300"> <Button>MyButton</Button> <igData:XamDataPresenter>
I have a situation similar to the above where I have a Button and a XamDataPresenter together on a dockable pane. However, with this arrangement, if the records displayed in the XamDataPresenter are more than the height of the pane, no vertical scroll bar appears on the right of the XamDataPresenter. I figured to use a Grid instead of a StackPanel to fix this from here: http://karlshifflett.wordpress.com/category/uncategorized/
But this presents a couple of problems. 1) The Button disappears, and 2) if I undock the pane and make it vertically bigger, the XamDataPresenter doesn't stretch to fill the size of the pane. If I remove the Height attribute from the Grid, its height becomes as big as required to display all records and the pane matches that size even when initially docked, thus resulting in the pane exceeding the size of the browser window and/or screen.
Is it possible to use a StackPanel without the vertical scroll bar disappearing? And in either case, how can I ensure the XamDataPresenter always stretches to the size of the pane but setting the pane to a maximum initial size (so it doesn't stretch to an excessive size just to match the XamDataPresenter displaying all records)?
Many thanks,Jason
Hello Jason,
On a quick view I solved some of the problems with the grid -- if you define RowDefinitions of the grid the button will not disappear and there will be a scrollbar visible like this:
<Grid Height="300"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="5*"/> </Grid.RowDefinitions> <Button Grid.Row="0">MyButton</Button> <igDP:XamDataPresenter Grid.Row="1" Name="presenter" /> </Grid>
but I am not sure why XamDockManager's behavior is strange with the StackPanel.
Alex.
Thanks Alex. I figured the problem with the button disappearing would be easily resolvable by setting Heights explicitly. Thanks for your help with that.
But, the main problem is if I undock the pane and make it vertically bigger, the XamDataPresenter doesn't stretch to fill the size of the pane while Grid Height="300". If I remove this Height attribute from the Grid, the XamDataPresenter stretches as big as required to display all records and the pane matches that size even when initially docked, thus resulting in the pane exceeding the size of the browser window and/or screen upon start-up.
So, I need to find a way to ensure that the XamDataPresenter always stretches to the size of the pane but set the pane to a maximum initial size (such as "300" so it doesn't stretch to an excessive size just to match the XamDataPresenter displaying all records).
Any ideas much appreciated on this.
Thanks,
Jason
When you set an explicit Height on an element, that is what WPF will use for the height of the element regardless of what a parent element will/could position it as. So regardless of the size of the containing ContentPane, your panel will always be 300. With regards to using a StackPanel, it is the design of a stack panel that when it measures & arranges its children it always measures them with an infinite value in the orientation (so if the orientation is vertical then when it measures its children it measures them with an infinite height). So an element measured with an infinite height is going to return whatever size is needed to show its content. This isn't specific to xamDataGrid - it would happen with any element.
Now with regards to the xamDockManager, if you have a root SplitPane that is docked and you do not specify a constraining value based on the docked placement (e.g. if its docked top/bottom and you don't set a Height) then the SplitPane will use as much space as its measured with to measure its children. If its content is a listbox with lots of items then that control will ultimately return a value indicating that it can use all the space.
I think ultimately what you want is a Grid element that has 2 row definitions - one with Auto for the button and one with a size of * (i.e. get the remaining space). To constrain the height of the xamDataGrid (or any list control, etc. with large content) you can either set something like the MaxHeight or you can use an approach like one I outlined here.
Thanks Andrew. I've took from this that StackPanels are not ideal for containing controls where the orientation dimension can vary significantly.
Also, the link to the zip file on the thread you linked to isn't clickable, so not sure what's happening there...?
Well, I've had a tinker with my layout and I think the best way to explain what's going on is to put a stripped down version of my XAML here and explain where I'm having the problem.
This is the XAML:
<Page ...> <StackPanel> <TextBlock>Some Text</TextBlock> <igDock:XamDockManager> <igDock:XamDockManager.Panes> <igDock:SplitPane> <igDock:ContentPane MinWidth="300" MinHeight="600"> <!-- Some controls here --> </igDock:ContentPane> </igDock:SplitPane> <igDock:SplitPane> <igDock:ContentPane Name="cpMain" MinWidth="600"> <igDock:XamDockManager MinHeight="500"> <igDock:XamDockManager.Panes> <igDock:SplitPane Name="spData" SplitterOrientation="Vertical" igDock:XamDockManager.InitialLocation="DockedTop"> <igDock:ContentPane> <!-- Some controls here --> </igDock:ContentPane> <igDock:ContentPane> <!-- Some controls here --> </igDock:ContentPane> </igDock:SplitPane> <igDock:SplitPane igDock:XamDockManager.InitialLocation="DockedBottom"> <igDock:ContentPane Name="cpContact"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="22.0" /> </Grid.RowDefinitions> <igData:XamDataPresenter Grid.Row="0" Name="myData" DataSource="{Binding}" />
<Button Grid.Row="1" Name="btnToggleView" Click="btnToggleView_Click">Toggle View</Button> </Grid> </igDock:ContentPane> </igDock:SplitPane> </igDock:XamDockManager.Panes> </igDock:XamDockManager> </igDock:ContentPane> </igDock:SplitPane> </igDock:XamDockManager.Panes> </igDock:XamDockManager> </StackPanel></Page>
And this is the screenshot below of what it produces (the unstripped version):
Firstly, the pane showing the 'Contact Details' (ContentPane cpContact in the XAML) has a height that extends beyond the bottom of the browser window due to the XamDataPresenter within it stretching to display all records. I specified the height of the grid row to which it is assigned to be * so that it takes up only the available space, but this seems to have had no effect. Ideally, I just want this cpContact pane to stretch to the bottom of the browser window and no further.
Also, I'd like the cpMain pane to stretch to the entire width of the browser window and all ContentPanes within it to stretch to fill cpMain's width.
Secondly, the splitter between the SplitPane containing cpContact and the SplitPane above (spData) seems to have a two-fold effect. If clicked and dragged, it makes the pane dragged into smaller, but the pane dragged away from remains the same size and an open gap is left in between. How can I get rid of this effect without losing the ability to have my three panes arranged as shown in the screenshot? I've also noticed that unpinning the cpContact ContentPane results in a large gap in its place rather than the above SplitPane stretching to fill the new space.
Hopefully, you'll look at this and quickly see I'm doing it all wrong and give me the quick easy magic solution that I should be using. Either way, hope you can help, and thanks for all your help so far.
XtreemX said: Also, the link to the zip file on the thread you linked to isn't clickable, so not sure what's happening there...?
Ah, replacing nearly all my StackPanels with DockPanels seems to have resolved all my sizing problems. I am even able to remove most of my MinWidth and MinHeight attributes and have no need for MaxWidth or MaxHeight attributes anywhere. My panes now all resize proportionately as the browser window size is changed and the outer panes stretch to the edge of the browser window on all sides.
Thanks for all your help!