XAML将datagrid设置为网格顶部的90%，将按钮设置为底部的10%，所有这些都在一个选项卡项中

我有一个TabItem，我想在上面90%的位置显示一个DataGrid（MahApps.Metro），在下面10%的位置显示两个按钮。当窗口被完全放大时，此功能有效，但当窗口未被完全放大时，scrollviewer不可见，控件和元素离开屏幕。请帮帮我，我被困了好几个小时了！以下是我目前的代码：

<TabItem Header="Queue" FontSize="15">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="9*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="77*"/>
                <ColumnDefinition Width="24*"/>
            </Grid.ColumnDefinitions>
            <DataGrid x:Name="songdatagrid" VerticalAlignment="Stretch" ItemsSource="{Binding SongInfo}" VerticalScrollBarVisibility="Auto" AutoGenerateColumns="False" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
                <DataGrid.Columns >
                    <DataGridTemplateColumn x:Name="songinfocolumn" Header="Song Info" Width=".6*">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding songInfo.Text}" Uid="{Binding SongInfo.Uid}" ToolTipService.ToolTip="Double click to open song in Youtube." MouseLeftButtonDown="tb_MouseLeftButtonDown5" />
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTemplateColumn x:Name="requestercolumn" Header="Requester" Width=".18*">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding songReq.Text}" Uid="{Binding songReq.Uid}" ToolTipService.ToolTip="Double click to open requester's Twitch page." MouseLeftButtonDown="tb_MouseLeftButtonDown6" />
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTemplateColumn x:Name="moveupcolumn" Header="Move Up" Width=".12*">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Button Width="35" Height="35" Uid="{Binding moveUp.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="moveup" ToolTipService.ToolTip="Click to move this song up in the list.">
                                    <Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
                                        <Rectangle.OpacityMask>
                                            <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_arrow_up}" />
                                        </Rectangle.OpacityMask>
                                    </Rectangle>
                                </Button>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTemplateColumn x:Name="deletecolumn" Header="Remove" Width=".12*">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Button Width="35" Height="35" Uid="{Binding delete.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="deleteSong" ToolTipService.ToolTip="Click to remove song from the list.">
                                    <Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
                                        <Rectangle.OpacityMask>
                                            <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_delete}" />
                                        </Rectangle.OpacityMask>
                                    </Rectangle>
                                </Button>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                </DataGrid.Columns>
            </DataGrid>
            <Button Style="{DynamicResource SquareButtonStyle}" x:Name="refresh" IsDefault="True" Background="White" Content="Refresh" Click="Button_Click" FontSize="16" Grid.Column="0" Grid.Row="1"/>
            <Button Style="{DynamicResource SquareButtonStyle}" x:Name="clear" IsDefault="True" Background="White" Content="Clear List" Click="clearlist" FontSize="16" Grid.Column="1" Grid.Row="1"/>
        </Grid>
    </TabItem>

我不得不把它添加到顶部，以使Metro水平滚动条在标签架上工作。除此之外，还有更多的选项卡项

<TabControl x:Name="tabholder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LightBlue"
        SelectionChanged="TabControl_SelectionChanged" >
    <TabControl.Template>
        <ControlTemplate TargetType="TabControl">
            <StackPanel>
                <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
                    <TabPanel x:Name="HeaderPanel"
                          Panel.ZIndex ="1" 
                          KeyboardNavigation.TabIndex="1"
                          Grid.Column="0"
                          Grid.Row="0"
                          IsItemsHost="true"/>
                </ScrollViewer>
                <ContentPresenter x:Name="PART_SelectedContentHost"
                                      ContentSource="SelectedContent"/>
            </StackPanel>
        </ControlTemplate>
    </TabControl.Template>

---

您在其中的

堆叠面板

和其他

网格

面板是冗余的，会导致您的问题。此外，模板中的固定

宽度

和

高度

，在高度等方面具有自己的设置大小属性，这将产生不需要的结果。你应该只需要这样的东西来实现你的目标

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="9*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <DataGrid Grid.ColumnSpan="2">...</DataGrid>

    <Button Grid.Row="1" Content="Button 1"/>
    <Button Grid.Row="1" Grid.Column="1" Content="Button 2"/>

</Grid>

...

---

干杯

StackPanel导致了问题，现在一切正常！：D

感谢您的回复，布局现在看起来应该是这样的，但是当我在datagrid中有更多的数据单元时，它就永远飞离屏幕了。有没有办法将datagrid的maxheight设置为tabitem的90%？@Edude15000我可能需要一个直观的例子来说明你所说的永远飞离屏幕是什么意思。通常，如果DataGrid位于具有星形大小的父网格中，则应将其约束到父网格定义的父边界，并调用

ScrollViewer.VerticalScrollBarVisibility=“Auto”

默认情况下，DataGrid模板中已经内置了

ScrollViewer

以在必要时提供滚动。以下是正常情况下的外观（小）大小：这是它完全最大化时的样子：它飞出窗口，没有垂直滚动条，即使我设置了VerticalScrollBarVisibility=“Auto”@Edude15000 Ok，这样看起来你可能会在树的更高处看到更多内容。对于初学者来说，将VerticalAlignment=“Stretch”放在DataGrid上，甚至不需要VerticalScrollBarVisibility声明，如果需要，则需要使用附加属性ScrollViewer.VerticalBarVisibility来点击它，而不仅仅是作为依赖属性。然而，我仍然会问，这个DataGrid及其父网格是否真的是布局树中较高位置的其他布局的子元素？这就是你看到的更可能导致中断的原因。为了让Metro Tabholder使用滚动条，我必须使用我在顶部添加的代码^^^，除此之外，还有其他选项卡项。