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

Question

I have a TabItem which I want to display a DataGrid (MahApps.Metro) in the upper 90% of it and 2 buttons I want to display at the bottom 10% of it. This works when the window is fully enlarged, but when it is not, the scrollviewer is not visible and the controls and elements go off screen. Please help, I've been stuck for hours! Here is my code so far:

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

I had to add this to the top to get the Metro horizontal scrollbar working on the tabholder. Other than this, there are just more 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

The StackPanel and the other Grid panels you have in there are redundant and causing your issues. Also your fixed Width & Height in templates that have their own set size attributes for things like Height are going to give unwanted results. You should only need something like this to accomplish your goal.

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

Cheers!