XAML 将数据网格设置为网格的前 90%，将按钮设置为底部的 10%，所有这些都在一个 tabitem 中

Question

我有一个 TabItem，我想在它的上部 90% 显示一个 DataGrid (MahApps.Metro)，我想在它的底部 10% 显示 2 个按钮。这在 window 完全放大时起作用，但当它没有完全放大时，滚动查看器不可见并且控件和元素离开屏幕。请帮忙，我已经被困了几个小时了！到目前为止，这是我的代码：

<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 水平滚动条在制表符上工作。除此之外，还有更多的tabitems。

<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>

Answer 1

StackPanel 和其他 Grid 面板是多余的，会导致您的问题。此外，您在模板中固定的 Width & Height 具有自己的设置大小属性（例如高度）将产生不需要的结果。你应该只需要这样的东西来实现你的目标。

<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>

干杯！

Answer 2

问题是 StackPanel 引起的，现在一切正常！ :D

XAML 将数据网格设置为网格的前 90%，将按钮设置为底部的 10%，所有这些都在一个 tabitem 中

XAML set datagrid to top 90% of grid, buttons to bottom 10 % all in a tabitem

grid

xaml

datagrid

tabitem

mahapps.metro