Centering a mediaelement according to the aspect ratio

Question

So, I've got this mediaelement, which I want to appear in the middle of the screen, 20 pixels away from each edge, and when it's width gets to 600, it stops expanding and stays where it is. I've got the following XAML to get exactly what I want:

<Grid x:Name="video">
    <MediaElement x:Name="player" AreTransportControlsEnabled="True" Margin="20,0" MaxWidth="600" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

The only problem is that the VerticalAlignment property seems to always be set to "Stretch". How can I fix this? I've tried using a viewbox, which works flawlessly, except I then get overly large or small TransportControls. I've also tried putting the mediaelement inside another grid with centered alignments, but I still get the same problem.

Answer 1

In the end, I found how to fix this, by keeping a constant aspect ratio of 16/9:

XAML:

<Grid SizeChanged="player_SizeChanged" Background="Black" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="1" MinHeight="1" Margin="30" MaxWidth="1000" ScrollViewer.VerticalScrollBarVisibility="Disabled">
    <MediaElement x:Name="player" Margin="0">
</Grid>

C#:

private void player_SizeChanged(object sender, SizeChangedEventArgs e)
{
    (sender as Grid).Height = (e.NewSize.Width * 0.5625);
}