Silverlight MediaElement 视频缩放问题

Question

我正在使用 VSTS2008 + C# 创建一个基于 ASP.Net Web 应用程序的 Silverlight 应用程序。我只在默认 page.xaml 中添加一行来托管本地视频，

这里是XAML的内容，我想让它根据网页上显示区域相关的视频宽高比进行缩放，所以我选择了Stretch="Uniform"。

我所做的另一个修改是默认自动生成的 aspx 测试页，通过显式分配宽度和高度 (120 * 120)。我的问题是我发现只能显示部分视频。我的视频原始大小是1024 * 768，我想如果我使用Uniform Stretch，无论为Silverlight控件分配的网页大小是多少，视频都可以缩放并显示所有内容。有什么问题吗？

BTW：我测试了如果我使用512 * 384或256 * 192这样的尺寸，所有视频内容都可以显示，证明均匀拉伸不起作用？

aspx测试页部分代码改动，

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

这里是 page.xaml 代码，我只是添加了一个 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>

编辑 1：

我在使用 sl2viedoplayer (http://sl2videoplayer.codeplex.com/) 时遇到了同样的问题，即即使我删除了用户控件的大小，也只能显示一部分视频。有什么想法有什么问题吗？这是sl2videoplayer的测试代码的html部分和相关的xaml文件。

<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">
<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>

Answer 1

问题是您的元素有 Width="120" Height="120" 并且您的 Silverlight 控件具有 400 x 300 的固定大小 如果您从 UserControl 中取出 Width 和 Height 属性，它应该可以正常工作。