XAML C# video does not change in size when i resize the form

Question

Running my media player it opens up with Stretch="None" but the problem is when I resize it, I want the video to scale with the resizing, so if my media opens at 640x480, then I resize to 320x240 I want my video to scale, see the screenshots below:

so far so good, media opens scaled to the size of video

But when I try to make the screen smaller to see other tabs and just lost the size of the video :/

XAML Code:

<Window x:Class="WpfApplication4.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Media Player" Height="300" Width="300"
    MinWidth="300" SizeToContent="WidthAndHeight"
    Topmost="True">


<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <ToolBar>
        <Button x:Name="button" Content="Open" Click="button_ClickOpen" />

        <Separator />
        <Button x:Name="button2" Content="Play" Click="button2_ClickPlay"/>

        <Button x:Name="button3" Content="Pause" Click="button3_ClickPause"/>

        <Button x:Name="button1" Content="Stop" Click="button1_ClickStop"/>
        <Button x:Name="button4" Content="Web" Click="button4_ClickWeb" />
    </ToolBar>

    <MediaElement Name="mediaElement1" Grid.Row="1" LoadedBehavior="Manual" Stretch="Uniform" />

<StatusBar Grid.Row="2">
    <StatusBar.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </StatusBar.ItemsPanel>
    <StatusBarItem>
        <TextBlock Name="lblProgressStatus">00:00:00</TextBlock>
    </StatusBarItem>
    <StatusBarItem Grid.Column="1" HorizontalContentAlignment="Stretch">
        <Slider Name="slider1"  ValueChanged="slider1_ValueChanged" />
    </StatusBarItem>
        <StatusBarItem Grid.Column="2">
            <Slider Name="slider2" Width="50" Height="24" Maximum="1" ValueChanged="slider2_ValueChanged" />
        </StatusBarItem>
    </StatusBar>
</Grid>

Answer 1

Try putting the MediaElement inside of a ViewBox and set the Stretch property of the ViewBox to UniformToFill.