媒体元素在底部WPF上被剪切

Question

I have issue with displaying video inside MediaElement.

I tries to put MediaElement inside Grid so I can take his size:

<Grid Grid.Row="1" Name="RootMediaElement"
      Margin="10 10 10 10">
    <MediaElement
    ClipToBounds="True"
    x:Name="MediaPlayer"
    HorizontalAlignment="Center"
    Stretch="UniformToFill"
    LoadedBehavior="Manual"
    Source="{Binding Source}">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MediaEnded">
                <i:InvokeCommandAction Command="{Binding MediaEndedCommand}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </MediaElement>
</Grid>

I also set ClipToBound property to true which didn't help also. I can't see bottom part of video. Also there is SizeChanged event which fires at the begining and I tried to set width and height manually as below :

 MediaPlayer.SizeChanged += (sender, args) =>
            {
                var x = sender as MediaElement;
                MediaPlayer.Height = RootMediaElement.ActualHeight;
                MediaPlayer.Width = RootMediaElement.ActualWidth;

            };

I am reading so much and cant find solution. Does anyone know ?

EDIT: Parent grid setup

<Grid>
<Grid.RowDefinitions>
            <RowDefinition Height="105" /> <!-- First row-->
            <RowDefinition Height="895" /> <!-- Second row -->
</Grid.RowDefinitions>

<!-- Media is places inside RootMediaElement Grid which take whoole second row -->
</Grid>

Answer 1

I've tested your xaml and you probably want to add this

VerticalAlignment="Center"

to your MediaElement, but keep in mind that your video will get "zoomed" in.

EDIT : You specified a height value for both rows that means they wont change when resizing the window so you should either

set your window minimum height to row 1 height + row 2 height + Margin (RootMediaGrid) (1030px):

MinHeight="1030"

or just set the second row height to:

<RowDefinition Height="*" />