How can I make the MediaElement not cutting off my bottom grid?

Question

to keep it short. I am developing a very simple video editor and I am currently still trying to structure the controls/panels etc. I want everything to resize dynamically but once a video is loaded and the user resizes the window there are some cases where the bottom grid is partly cut out due to the aspect ratio I assume. I wanted to know how I could specify the bottom grid to be always in the window. XAML Code(Removed some stuff to keep the code shorter):

<Window x:Class="FastRender.MainWindow"
        Title="Name" MinWidth="1000" MinHeight="600" Height="Auto" Width="Auto" Background="#31363b">
    <DockPanel LastChildFill="false">
        <Grid DockPanel.Dock="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <ListBox Grid.Column="0"
                        MinWidth="500" MinHeight="320" Height="Auto" Width="500" 
                        Name="videoListBox" ItemsSource="{Binding videoList}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding VideoThumbnail}" Width="150" Height="75"/>
                            <StackPanel>
                                <TextBlock Foreground="AntiqueWhite" HorizontalAlignment="Center" VerticalAlignment="Top" Text="{Binding VideoTitle}"/>
                                <TextBlock Foreground="AntiqueWhite" HorizontalAlignment="Left" VerticalAlignment="Top" Text="{Binding VideoDuration}"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <Border Grid.Column="1" BorderThickness="5" BorderBrush="DarkSlateGray">
                <MediaElement x:Name="mediaElement" HorizontalAlignment="Right" Source="" />
            </Border>
            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" Grid.Column="1" Grid.Row="2">
                <TextBlock Foreground="White" Margin="5"  VerticalAlignment="Center">Seek To</TextBlock>
                <Slider Name="timelineSlider" Margin="5" Thumb.DragCompleted="timelineSlider_DragCompleted" Maximum="100" Value="1" Width="200"/>
                <TextBlock  Grid.Row="2" Foreground="White" VerticalAlignment="Center" Margin="5"  >Volume</TextBlock>
                <Slider Grid.Row="2" Name="volumeSlider" VerticalAlignment="Center" ValueChanged="ChangeMediaVolume" 
       Minimum="0" Maximum="10" Value="0.5" Width="70"/>
            </StackPanel>
        </Grid>


        <Grid DockPanel.Dock="Top" MinHeight="200" MaxHeight="300"> //I want this grid to be always seen for the user
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="90"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Rectangle  AllowDrop="True" Grid.Row="0" Grid.Column="0" Fill="#1b1e20"/>
            <local:TimelineEntryControl Grid.Row="0" Grid.Column="1" />
            <Border Grid.Row="1" BorderThickness="1" BorderBrush="Black">
                <TextBlock Grid.Row="1" Grid.Column="0" Text="VIDEO" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Grid.Row="1" Grid.Column="1" BorderThickness="1" BorderBrush="Black">
                <StackPanel x:Name="videoPanel" Orientation="Horizontal" AllowDrop="True" DragDrop.Drop="Rectangle_Drop"  Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" Background="#FF1E2225">
                </StackPanel>
            </Border>
            <Border Grid.Row="2" BorderThickness="1" BorderBrush="Black">
                <TextBlock Grid.Row="2" Grid.Column="0" Text="AUDIO" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Grid.Row="2" Grid.Column="1" BorderThickness="1" BorderBrush="Black">
                <Rectangle Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" Height="Auto" Fill="#FF24282D"></Rectangle>
            </Border>
        </Grid>
    </DockPanel>
</Window>

How it looks like when I load a video

How it looks like when I manually adjust the window