Search code examples
c#wpfdatagriduser-controlsexpander

WPF: Set Size of an DataGrid in a Expander


I have a TabControl which contains a StackPanel with many Expander. In each Expander I placed an UserControl. So, I have a clear view. The UserControl contains a DataGrid. Now, the problem is, that the height from the DataGrid is not set. If the DataGrid is lager than the window-size no Scrollbar is shown.

<TabControl SelectionChanged="Selector_OnSelectionChanged" Height="Auto">
        <TabItem Header="DoSmth">
        </TabItem>
        <TabItem Header="Misc" Height="Auto">
            <StackPanel Height="Auto">
                <Expander Header="Misc1" IsExpanded="False" Margin="0,10,0,0">
                </Expander>          
                <Expander Header="Misc2" IsExpanded="False" x:Name="Misc2Expander" Expanded="ExpanderMisc2_OnExpanded" Height="Auto" Margin="0,10,0,0">
                    <view:Misc2View Background="WhiteSmoke" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" VerticalContentAlignment="Top"/>
                </Expander>                    
            </StackPanel>
        </TabItem>            
    </TabControl>

If I tried to set the height in the UserControl a Scrollbar is shown, but it is not dynamic.

<view:Misc2View .... height="800" ... />

Update: I already tried to set the height with Binding:

Height="{Binding ElementName=Misc2Expander, Path=Height}"

Solution

  • The height of the DataGrid inside your UserControl is not restricted until you set a fix height explicitly.

    <DataGrid Height="300" ... />
    

    This will make Scrollbar visible.

    Edit:

    To avoid explicit height, you can use Grid with RowDefinitions instead of StackPanel and then bind DataGrid.Height to Expander.ActualHeight like this:

    MainWindow:

        <TabControl >
            <TabItem Header="DoSmth">
            </TabItem>
            <TabItem Header="Misc" >
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Expander Grid.Row="0" Header="Misc1" IsExpanded="False" Margin="0,10,0,0">
                    </Expander>
                    <Expander Grid.Row="1"
                        Header="Misc2" IsExpanded="False" x:Name="Misc2Expander" Margin="0,10,0,0">
                        <view:Misc2View Background="WhiteSmoke"/>
                    </Expander>
                </Grid>
            </TabItem>
        </TabControl>
    

    UserControl:

    <DataGrid Height="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=ActualHeight}" ... />
    

    Second Edit

    If I understand your issue correctly, then you need to set triggers for RowDefinitions to set the Height of currently expanded Expander to * while the Height of other Expanders remain Auto like this:

        <TabControl SelectionChanged="Selector_OnSelectionChanged" Grid.Row="0" >
            <TabItem Header="DoSmth">
            </TabItem>
            <TabItem Header="Misc" >
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Name="GridRow1">
                            <RowDefinition.Style>
                                <Style TargetType="{x:Type RowDefinition}">
                                    <Setter Property="Height"  Value="Auto" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ElementName=Misc1Expander,
                                            Path=IsExpanded}" Value="True">
                                            <Setter Property="Height" Value="*" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </RowDefinition.Style>
                        </RowDefinition>
                        <RowDefinition Name="GridRow2">
                            <RowDefinition.Style>
                                <Style TargetType="{x:Type RowDefinition}">
                                    <Setter Property="Height"  Value="Auto" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ElementName=Misc2Expander,
                                            Path=IsExpanded}" Value="True">
                                            <Setter Property="Height" Value="*" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </RowDefinition.Style>
                        </RowDefinition>
                        <RowDefinition Name="GridRow3">
                            <RowDefinition.Style>
                                <Style TargetType="{x:Type RowDefinition}">
                                    <Setter Property="Height"  Value="Auto" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ElementName=Misc3Expander,
                                            Path=IsExpanded}" Value="True">
                                            <Setter Property="Height" Value="*" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </RowDefinition.Style>
                        </RowDefinition>
                    </Grid.RowDefinitions>
                    <Expander Grid.Row="0"
                        Header="Misc2" IsExpanded="False" x:Name="Misc1Expander" Margin="0,10,0,0">
                        <view:Misc2View Background="WhiteSmoke"/>
                    </Expander>
                    <Expander Grid.Row="1"
                        Header="Misc2" IsExpanded="False" x:Name="Misc2Expander" Margin="0,10,0,0">
                        <view:Misc2View Background="WhiteSmoke"/>
                    </Expander>
                    <Expander Grid.Row="2"
                        Header="Misc2" IsExpanded="False" x:Name="Misc3Expander" Margin="0,10,0,0">
                        <view:Misc2View Background="WhiteSmoke"/>
                    </Expander>
                </Grid>
            </TabItem>
        </TabControl>
    

    You might want to set data binding on UserControl.Height instead of DataGrid.Height for other elements in your UserControl to be visible:

    <UserControl x:Class="view:Misc2View" ...
                 Height="{Binding RelativeSource={RelativeSource AncestorType=Expander}, 
                 Path=ActualHeight}" ... />