如何让WPF DataGrid自动适配Tab页高度

当前DataGrid仅根据数据行总高度扩展，需要让它自动拉伸至Tab页底部（示例图中DataGrid下方存在空白区域，目标是填满到下方水平标记位置）。

相关代码 #

包含DataGrid的UserControl（RamActivesControl.xaml）

<UserControl x:Class="Nexidia.Esi.ManagementConsole.Views.RamActivesControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:converters="clr-namespace:Nexidia.Esi.ManagementConsole.Views.Converters"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid Background="#FFF1F1F1">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel x:Name="RamControlsPanel" Grid.Row="0" Orientation="Horizontal" Margin="4 4 0 4">
            <Button Content="Refresh" Width="60" Margin="0 0 4 0" Click="ButtonRefresh_OnClick" />
            <Button Content="New..." Width="60"  Margin="0 0 4 0" Click="ButtonNew_OnClick" />
        </StackPanel>
        <DataGrid x:Name="RamActivesDataGrid"
                  ItemsSource="{Binding RamActives}"
                  Grid.Row="1"
                  AutoGenerateColumns="False"
                  SelectionMode="Single"
                  CanUserAddRows="False"
                  CanUserDeleteRows="False"
                  CanUserResizeRows="False"
                  RowHeaderWidth="0"
                  SelectionUnit="FullRow">
            <DataGrid.Resources>
                <converters:ListToStringConverter x:Key="ListToString" />
            </DataGrid.Resources>
            <DataGrid.Columns>
                <DataGridTextColumn Header="Created" Width="135" Binding="{Binding CreatedTimeUtc}" />
                <DataGridTextColumn Header="Modified" Width="135" Binding="{Binding ModifiedTimeUtc}" />
                <DataGridTextColumn Header="Originator" Width="135" Binding="{Binding Originator}" />
                <DataGridTextColumn Header="Profiles with access" Width="*" Binding="{Binding Path=RestrictedAccessInstanceProfiles, Converter={StaticResource ListToString}}" />
                <DataGridTemplateColumn Header="Actions" Width="90" IsReadOnly="True">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Width="15" Cursor="Hand" MouseDown="ImageEdit_OnMouseDown" ToolTip="Edit Instance">
                                    <Image.Source>
                                        <BitmapImage UriSource="../Icons/edit.png" />
                                    </Image.Source>
                                </Image>
                                <Image Margin="10 0 0 0" Width="15" Cursor="Hand" MouseDown="ImageStop_OnMouseDown" ToolTip="Stop Instance">
                                    <Image.Source>
                                        <BitmapImage UriSource="../Icons/remove.png" />
                                    </Image.Source>
                                </Image>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn Header="Instance Id" Width="115" Binding="{Binding InstanceId}" />
                <DataGridTextColumn Header="Parent Instance Id" Width="115" Binding="{Binding ParentInstanceId}" />
                <DataGridTextColumn Header="Original Instance Id" Width="115" Binding="{Binding OriginalInstanceId}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</UserControl>

容纳UserControl的Tab容器（RamTabsContainerControl.xaml）

<UserControl x:Class="Nexidia.Esi.ManagementConsole.Views.RamTabsContainerControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:Views="clr-namespace:Nexidia.Esi.ManagementConsole.Views"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">

<Grid Background="#FFF1F1F1">
    <StackPanel Orientation="Vertical">
        <StackPanel x:Name="RamControlsPanel" Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 10" >
            <RadioButton x:Name="DateUtc" GroupName="datesStyle"  Content="Display dates in UTC" IsChecked="True" Margin="6 0 0 0"/>
            <RadioButton x:Name="DateLocal" GroupName="datesStyle" Content="Display dates in local times" Margin="20 0 0 0"/>
        </StackPanel>
        <TabControl HorizontalAlignment="Stretch" x:Name="OptionsTabControl" Grid.Row="0" Padding="6">
            <TabItem Header="Active Instances" x:Name="RamActivesTabOption">
                <StackPanel Orientation="Vertical">
                    <Views:RamActivesControl x:Name="RamActives" />
                </StackPanel>
            </TabItem>
            <TabItem Header="History" x:Name="RamHistoriesTabOption">
                <Views:RamHistoriesControl x:Name="RamHistories" />
            </TabItem>
        </TabControl>
    </StackPanel>
</Grid>

问题根源是StackPanel不会分配剩余空间，它仅让子元素按自身高度显示，导致TabControl和内部UserControl无法拉伸填满可用区域。需做两处修改：

1. 将外层容器的StackPanel替换为Grid，并配置行定义分配空间
2. 将TabItem内部的StackPanel替换为Grid，让UserControl填满TabItem区域

修改后的RamTabsContainerControl.xaml代码 #

<UserControl x:Class="Nexidia.Esi.ManagementConsole.Views.RamTabsContainerControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:Views="clr-namespace:Nexidia.Esi.ManagementConsole.Views"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">

<Grid Background="#FFF1F1F1">
    <Grid.RowDefinitions>
        <!-- 顶部单选按钮区域，自适应高度 -->
        <RowDefinition Height="Auto" />
        <!-- TabControl区域，占用剩余全部高度 -->
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    
    <StackPanel x:Name="RamControlsPanel" Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center" Margin="0 10 0 10" >
        <RadioButton x:Name="DateUtc" GroupName="datesStyle"  Content="Display dates in UTC" IsChecked="True" Margin="6 0 0 0"/>
        <RadioButton x:Name="DateLocal" GroupName="datesStyle" Content="Display dates in local times" Margin="20 0 0 0"/>
    </StackPanel>
    
    <TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                x:Name="OptionsTabControl" Grid.Row="1" Padding="6">
        <TabItem Header="Active Instances" x:Name="RamActivesTabOption">
            <!-- 替换StackPanel为Grid，让UserControl填满TabItem空间 -->
            <Grid>
                <Views:RamActivesControl x:Name="RamActives" />
            </Grid>
        </TabItem>
        <TabItem Header="History" x:Name="RamHistoriesTabOption">
            <Grid>
                <Views:RamHistoriesControl x:Name="RamHistories" />
            </Grid>
        </TabItem>
    </TabControl>
</Grid>

说明 #

• RamActivesControl原有代码无需修改，其内部Grid已配置RowDefinition Height="*"，会让DataGrid占用剩余高度。
• 修改后，TabControl会填满Grid的第二行，TabItem内的Grid会让UserControl完全拉伸，最终DataGrid将自动填满Tab页的可用高度。

内容的提问来源于stack exchange，提问作者Bruce B Wilson