Stretch MediaElement XAML/C# on Win Store App

[James Rose]

Hello gang,

 

I am working on a media player and I am using the MediaElement, in Framework 4.5 there is a "Stretch" property, but for Windows Store Apps this property is not available.  Some quick Googling and I found that I should be using the ViewBox to handle my issue.  But it's not working.  What dumb@$$ thing am I doing wrong?

<Viewbox Stretch="UniformToFill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" StretchDirection="Both">
            <MediaElement Name="BediaMedia" Canvas.ZIndex="60" Canvas.Top="0" Canvas.Left="0" Width="{Binding ElementName=BediaCanvas, Path=ActualWidth}" Height="{Binding ElementName=BediaCanvas, Path=ActualHeight}" Opacity="1.0" MediaEnded="BediaMedia_MediaEnded" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></MediaElement>
        </Viewbox>

I have attempted several different changes to the Alignment, but without the hoped result.  Meaning; My monitor's resolution is 1920 x 1080, but the same clip is 480 x 360, I want this clip stretched to fill all space to avoid the black bars on the left and right sides (in this example)  Am I understanding what this should do?

 

Thanks,

James

[SledgeNZ]

What sort of media are you playing?

FYI there is a robust player framework created for Win8 by MS: http://playerframework.codeplex.com/

As to your Xaml without testing your 'Canvas.' attached properties are ignored so no point having them.

Also, putting the mediaelement into a grid element with horizontal & vertical alignment set to stretch will have the desired effect.

The MediaElement's dimensions are being set based on your canvas size. Can you ensure the canvas size is what you expect?

If you're not using something like www.xamlspy.com (Which allows you to change properties at runtime) then the next option would be to change the background colour of various elements so you can see visually what is going on.

Edit: There's no need to use a viewbox to achieve the end result.

[James Rose]

What sort of media are you playing?

FYI there is a robust player framework created for Win8 by MS: http://playerframework.codeplex.com/

As to your Xaml without testing your 'Canvas.' attached properties are ignored so no point having them.

Also, putting the mediaelement into a grid element with horizontal & vertical alignment set to stretch will have the desired effect.

The MediaElement's dimensions are being set based on your canvas size. Can you ensure the canvas size is what you expect?

If you're not using something like www.xamlspy.com (Which allows you to change properties at runtime) then the next option would be to change the background colour of various elements so you can see visually what is going on.

Edit: There's no need to use a viewbox to achieve the end result.

 

I'll look into the player framework, thanks kindly.

 

However, I don't think I'm explaining myself well.  Again; My resolution is 1920 x 1080 (hd) and if I play a video with those dimensions it fills the screen, as the mediaelement is indeed being set to the full size of the screen.  The issue I am attempting to resolve is to stretch a video that's dimensions are less than full screen to fill the available space, to stretch it even if it's ratio is 4.3 to 16.9 (or whatever the user's resolution and ratio are)

 

Does that explain better?

[Eric Veteran]

You need Stretch="Fill" as well as StretchDirection="Both" on the Viewbox. UniformToFill will only stretch until either the horizontal or vertical is at max size for the control.

Does MediaElement.Stretch = "Fill" not work? It doesn't complain about it when I try using it.

[vcfan]

are you playing a URL? or are you supplying the stream?

 

I just tested a media element in a viewbox, with the original video at a resolution of 640x368 and I got it to stretch fine to 1280x800 on this device. I have black bars on the top and bottom,because obviously of the aspect ratio, but the left and right are stretched perfectly to the edge. I could also get it to stretch just in a grid. here is my xaml

 

 
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Viewbox HorizontalAlignment="Left" Height="800" Margin="0" VerticalAlignment="Top" Width="1280" Stretch="UniformToFill">

            <MediaElement Name="me" HorizontalAlignment="Left" Height="800" Margin="0" VerticalAlignment="Top" Width="1280"/>

        </Viewbox>

 </Grid>