I am not able to set the height of my ContentPane inside a SplitPane. I am using Auto, but it is not able to set the height accordingly. I have 2 contentpanes in a splitpane. I need the two content panes relative in size. The heights should depend on the contents of the contentpanes. Any suggestions? Please look at my code:
<igDock:XamDockManager Theme="Office2010Blue" Height="Auto">
<igDock:XamDockManager.Panes>
<igDock:SplitPane Name="dockedLeft" igDock:XamDockManager.InitialLocation="DockedLeft" Height="Auto">
<igDock:ContentPane x:Name="leftEdgeDock" Header="Reports">
<TreeView Width="Auto" DockPanel.Dock="Left" ItemsSource="{Binding Folders}" Height="Auto" Padding="0,0,20,20" MinWidth="100">
<TreeView.ItemContainerStyle>
<!--
This Style binds a TreeViewItem to a TreeViewItemViewModel.
-->
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
<Setter Property="FontWeight" Value="Normal" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type vm:ReportFolderViewModel}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<Image Width="16" Height="16" Source="/InsurableRisk.Reporting;component/Resources/Images/foldr_16.gif" />
<Label Content="{Binding FolderName}" />
</StackPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type vm:ReportInfoViewModel}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<Image Width="16" Height="16" Source="/InsurableRisk.Reporting;component/Resources/Images/reports_16.gif" />
<TextBlock Text="{Binding ReportName}" Margin="0,4,0,4" Padding="4,0,4,0" />
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.Resources>
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectedItemChanged">
<i:InvokeCommandAction Command="{Binding SelectReportCommand}" CommandParameter="{Binding Path=SelectedItem, RelativeSource={RelativeSource AncestorType={x:Type TreeView}}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TreeView>
</igDock:ContentPane>
</igDock:SplitPane>
<igDock:SplitPane igDock:XamDockManager.InitialLocation="DockedTop" SplitterOrientation="Horizontal">
<igDock:ContentPane x:Name="centerDock" Header="Controls" Height="Auto">
<StackPanel Name="controlStackPanel" DockPanel.Dock="Top" Orientation="Horizontal">
<ContentControl Height="Auto" Content="{Binding Path=CurrentReport}" />
<Button Margin="10,0,0,0" Content="Run Report" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Command="{Binding RunReportCommand}" Width="80" />
<Button Margin="10,0,0,0" Content="Data To Excel" Height="23" VerticalAlignment="Top" Name="ExportToExcel" Width="110" Command="{Binding RunExcelCommand}" Visibility="{Binding Path=ButtonExportVisibility, Converter={StaticResource BoolToVis}}" />
</StackPanel>
</igDock:ContentPane>
<igDock:ContentPane x:Name="bottomDock" Height="Auto" AllowDocking="False" AllowPinning="False" AllowClose="False" CloseButtonVisibility="Collapsed" WindowPositionMenuVisibility="Collapsed">
<ContentControl Name="reportContentControl" Content="{Binding ReportHost}" />
</igDock:ContentPane>
</igDock:SplitPane>
</igDock:XamDockManager.Panes>
</igDock:XamDockManager>
Our developers investigated this further and said that this behavior is expected since the SplitPane sizes and arranges the panes based on the ratio of the RelativeSize of each pane. The workaround here is to use different a different SplitPane for each ContentPane you want to use. Here is a simple XAML code snippet: