SL4 datagrid with datapager and gridsplitter

Question

Hi All, I have a grid with two Rows and a GridSplitter. In the first Row I have a StackPanel which has the DataPager and DataGrid in it. In the second Row I have the Expander Control vertically bottom aligned and Expand Direction Upward. The idea that the DataGrid will occupy all the space (vertically stretch) of both Rows but when the Expander header will be clicked, it will expand upward and DataGrid will shrink automatically.

But this is not happening. When I click on the expander, it does expand but the page size increase instead of DataGrid(Row 0) shrinks upward. Anybody know How I can achieve that? My Code is as below . I have tried by putting the ScrollViewers at DataGrid level, StackPanel level and also Grid level too but without success.

 <Grid x:Name="contentGrid" HorizontalAlignment="Stretch" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <tools:GridSplitter x:Name="rowSplitter" Grid.Row="1"  VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
                <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                    <StackPanel Grid.Row="0" Orientation="Vertical" VerticalAlignment="Stretch" >
                    <StackPanel Orientation="Horizontal" Width="auto" Height="30">
                        <TextBlock Text="Search" Margin="20,10,0,0" TextAlignment="Center" VerticalAlignment="Center" Height="25"/>
                        <TextBox Width="200" Margin="5,0,0,0" x:Name="txtSearch" Height="25"/>
                        <ComboBox x:Name="cboFilter" SelectedIndex="0" SelectedValuePath="Name" VerticalAlignment="Center" Height="25">
                            <ComboBoxItem Name="Code">Line No</ComboBoxItem>
                            <ComboBoxItem Name="Description1">Heading</ComboBoxItem>
                            <ComboBoxItem Name="Description2">Happy Text</ComboBoxItem>
                            <ComboBoxItem Name="PromotionType">Promotion Type</ComboBoxItem>
                        </ComboBox>
                        <CheckBox x:Name="chkIsGrouping" Margin="10,5,0,0" Content="Enable Grouping" Checked="chkIsGrouping_Checked"/>
                         </StackPanel>
                    <sdk:DataPager Height="25" Name="dataPager1"  Source="{Binding ElementName=productDomainDataSource, Path=Data}" />

                    <sdk:DataGrid  AutoGenerateColumns="False"   HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" ItemsSource="{Binding ElementName=productDomainDataSource, Path=Data}" Name="productDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top" SelectionChanged="productDataGrid_SelectionChanged" >
                        <sdk:DataGrid.Columns>
                            <sdk:DataGridTextColumn x:Name="codeColumn" Binding="{Binding Path=Code}" Header="Code" Width="SizeToHeader" />
                            <sdk:DataGridTextColumn x:Name="description1Column" Binding="{Binding Path=Description1}" Header="Description 1" Width="SizeToHeader" />
                            <sdk:DataGridTextColumn x:Name="description2Column" Binding="{Binding Path=Description2}" Header="Description 2" Width="SizeToHeader" />
                            <sdk:DataGridTextColumn x:Name="productIDColumn" Binding="{Binding Path=ProductID, Mode=OneWay}" Header="Product ID" IsReadOnly="True" Width="SizeToHeader" Visibility="Collapsed" />
                            <sdk:DataGridTextColumn x:Name="promotionIDColumn" Binding="{Binding Path=PromotionID}" Header="Promotion ID" Width="SizeToHeader" Visibility="Collapsed"/>
                            <sdk:DataGridTextColumn x:Name="promotionTypeIDColumn" Binding="{Binding Path=PromotionTypeID}" Header="Promotion Type ID" Width="SizeToHeader" Visibility="Collapsed" />
                            <sdk:DataGridTextColumn x:Name="retailPriceColumn" Binding="{Binding Path=RetailPrice}" Header="Retail Price" Width="SizeToHeader" />
                            <sdk:DataGridTextColumn x:Name="retailPriceUnitColumn" Binding="{Binding Path=RetailPriceUnit}" Header="Retail Price Unit" Width="SizeToHeader" />
                            <sdk:DataGridTextColumn x:Name="templateIDColumn" Binding="{Binding Path=TemplateID}" Header="Template ID" Width="SizeToHeader" />
                            <sdk:DataGridTextColumn x:Name="wasPriceColumn" Binding="{Binding Path=WasPrice}" Header="Was Price" Width="SizeToHeader" />
                            <sdk:DataGridTextColumn x:Name="wasPriceUnitColumn" Binding="{Binding Path=WasPriceUnit}" Header="Was Price Unit" Width="SizeToHeader" />
                        </sdk:DataGrid.Columns>
                    </sdk:DataGrid>

                </StackPanel>
                </ScrollViewer>
                <expandertoolkit:Expander x:Name="Expander1" Margin="0,10,0,0" Grid.Row="1" VerticalAlignment="Bottom"
                       ExpandDirection="Up"
                       HeaderTemplate="{StaticResource DTHeader}"
                       ContentTemplate="{StaticResource DTContent}">

                    </expandertoolkit:Expander>
            </Grid>

Answer 1

Normally if you want one row (say the bottom row) to shrink another (say the top row) then the bottom row is Auto-sized and the top is Star-sized.

The problem is that Auto-size rows will fit to their content and the Star sized will just grab the remainder, but if there is nothing restraining the overall size Auto-sized rows will just grow and the Star-sized rows will take whatever they can get to fit their content.

You need to set the overall size of the control, where it is used, if you want the collapse/grow behaviour you mention.

Please note I could not work out why you have a Gridsplitter in that example in the first place, so I may be missing some details.

Answer 2

Thanks for the response. I think I tried that but without success but I'll make sure once again with those properties. The GridSplitter is there so that the user can manually change them if he wants.