Silverlight MediaElement video scale issue

Question

Hello everyone,

I am using VSTS2008 + C# to create a Silverlight application based on ASP.Net web application. I only add one line to the default page.xaml to host a local video,

Here is the content of XAML, and I want it to scale according to video width/height ratio related to the display area on web page, so I select Stretch="Uniform".

Another modification I made is the default automatically generated aspx test page by assign width and height explicitly (120 * 120). My question is I find only part of the video can be displayed. My video original size is 1024 * 768, I think if I use Uniform Stretch, no matter what is the size of web page allocated for Silverlight control, the video can scale and display all content. Anything wrong?

BTW: I tested if I use size like 512 * 384 or 256 * 192, all video content can be displayed, it proves uniform stretch not working?

aspx test page part of code change,

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" MinimumVersion="2.0.31005.0" Width="120" Height="120" />

Here is the page.xaml code, I just added a mediaelement.

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <MediaElement Source="screen.wmv" Stretch="Uniform" />
    </Grid>
</UserControl>

EDIT 1:

I met the same issue when using sl2viedoplayer (http://sl2videoplayer.codeplex.com/), i.e. only a part of video can be displayed even if I remove the size of usercontrol. Any ideas what is wrong? Here is the html part of test code of sl2videoplayer and related xaml file.

<UserControl x:Class="VideoPlayer.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:VideoPlayer="clr-namespace:VideoPlayer" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="610.369" d:DesignHeight="413">
    <UserControl.Resources>
        <Storyboard x:Name="controlsIn">
            <DoubleAnimation BeginTime="00:00" Storyboard.TargetName="controlsContainer" From="0" To="1" Storyboard.TargetProperty="Opacity" />
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="controlsContainer" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" BeginTime="00:00:00">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="-40"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="-35"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="controlsOut">
            <DoubleAnimation BeginTime="00:00" Storyboard.TargetName="controlsContainer" From="1" To="0" Storyboard.TargetProperty="Opacity" />
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="controlsContainer" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" BeginTime="00:00:00">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-35"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Canvas x:Name="PlayIcon" Width="100" Height="100" Canvas.ZIndex="99" Cursor="Hand" MouseLeftButtonUp="PlayIcon_MouseLeftButtonUp">
            <Path Width="100" Height="100" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" Fill="#77000000" Data="F1 M 15,0L 85,0C 93.2843,0 100,6.71573 100,15L 100,85C 100,93.2843 93.2843,100 85,100L 15,100C 6.71573,100 0,93.2843 0,85L 0,15C 0,6.71573 6.71573,0 15,0 Z "/>
            <Path Width="40.8182" Height="47.1328" Canvas.Left="34.6439" Canvas.Top="27.6003" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 75.4621,51.1667L 34.6439,27.6003L 34.6439,74.7331L 75.4621,51.1667 Z "/>
        </Canvas>
        <Canvas x:Name="LargeSpinnerArea" Width="100" Height="100" Canvas.ZIndex="100" Visibility="Collapsed">
            <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                <VideoPlayer:spinner x:Name="BigBuffer" Width="100" Height="100" RenderTransformOrigin="0.5,0.5" >
                    <VideoPlayer:spinner.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="4" ScaleY="4"/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </VideoPlayer:spinner.RenderTransform>
                </VideoPlayer:spinner>
            </StackPanel>
        </Canvas>
        <Canvas x:Name="Thumbnail" Canvas.Top="0" Canvas.Left="0" Visibility="Collapsed" Canvas.ZIndex="98">
            <Image x:Name="ThumbnailImage" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="UniformToFill" />
        </Canvas>
        <StackPanel x:Name="LayoutRoot2" Margin="0" Background="#FF0D0A0A" Cursor="Hand" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <MediaElement HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="mediaPlayer" Stretch="Uniform" VerticalAlignment="Stretch" AutoPlay="False"/>
            <Grid Margin="-1,0,0,0" x:Name="controlsContainer" Height="35" RenderTransformOrigin="0.5,0.5">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform Y="0"/>
                    </TransformGroup>
                </Grid.RenderTransform>
                <Rectangle Margin="0,0,0,0" Height="35" VerticalAlignment="Top" Fill="#97000000" Stroke="#00000000" RenderTransformOrigin="0.5,0.5"/>
                <VideoPlayer:mediaControl Height="35" Margin="1,0,2,0" HorizontalAlignment="Stretch" VerticalAlignment="Top" x:Name="mediaControls" RenderTransformOrigin="0.5,0" Visibility="Visible"/>
            </Grid>
        </StackPanel>
      </Grid>
</UserControl>



html code,



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->
<head>
    <title>Silverlight Project Test Page </title>

    <style type="text/css">
    html, body {
     height: 100%;
     overflow: auto;
    }
    body {
     padding: 0;
     margin: 0;
    }
    #silverlightControlHost {
     height: 100%;
    }
    </style>

    <script type="text/javascript">
        function onSilverlightError(sender, args) {

            var appSource = "";
            if (sender != null && sender != 0) {
                appSource = sender.getHost().Source;
            } 
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            var errMsg = "Unhandled Error in Silverlight 2 Application " +  appSource + "\n" ;

            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError")
            {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError")
            {           
                if (args.lineNumber != 0)
                {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " +  args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }
    </script>
</head>

<body>
    <!-- Runtime errors from Silverlight will be displayed here.
 This will contain debugging information and should be removed or hidden when debugging is completed -->
 <div id='errorLocation' style="font-size: small;color: Gray;"></div>

    <div id="silverlightControlHost">
  <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="500" height="240">
   <param name="source" value="ClientBin/VideoPlayer.xap"/>
   <param name="onerror" value="onSilverlightError" />
   <param name="background" value="white" />
   <param name="initParams" value="cc=true,markers=true,markerpath=markers_movie21.xml,m=http://www.sonypictures.com/movies/21/video/trailer/21_trailer_high.asx" />
   <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
   </a>
  </object>
  <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div>
</body>
</html>

thanks in advance, George

Answer 1

The Problem is that your element has Width="120" Height="120" and Your Silverlight control has a fixed size of 400 x 300 If you take the Width and Height attributes out of the UserControl, it should work as you expect.