Silverlight XAML 布局问题

Question

我正在使用 Silverlight 3.0 + .Net 3.5 + VSTS 2008 + C# 使用 Silverlight 的开源 slvideoplayer 开发一个简单的视频应用程序。

http://slvideoplayer.codeplex.com/

对于播放器，播放控件位于渲染视频的底部，有什么想法如何将播放控件放置在视频顶部？我已经很努力但想不通。有什么解决办法吗？

编辑 1：这是当前的 XAML 代码，“controlsContainer”中的元素是我想放在视频之上的元素（即“mediaPlayer”），这是我想要的效果，如果你能让我知道如何更改我的代码来实现这个目标吗？

http://i45.tinypic.com/admgq0.png

<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>
        <Grid x:Name="LayoutRoot2" Margin="0" Background="#FF0D0A0A" Cursor="Hand" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Canvas x:Name="VideoCanvas">
                <MediaElement Canvas.ZIndex="1" HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="mediaPlayer" Stretch="Uniform" VerticalAlignment="Stretch" AutoPlay="false"/>
            </Canvas>
        </Grid>
        <Grid Margin="-1,0,0,0" x:Name="controlsContainer" Height="35" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Bottom">
            <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>
    </Grid>

Answer 1

看到这个。对我来说很好。最后一行堆栈面板

            <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>
        <Grid x:Name="LayoutRoot2" Margin="0" Background="#FF0D0A0A" Cursor="Hand" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Canvas x:Name="VideoCanvas">
                <MediaElement Canvas.ZIndex="1" HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="mediaPlayer" Stretch="Uniform" VerticalAlignment="Stretch" AutoPlay="false"/>
            </Canvas>
        </Grid>
        <Grid Margin="-1,0,0,0" x:Name="controlsContainer" Height="35" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Bottom">
            <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"/>

        </Grid>
    <StackPanel Orientation="Horizontal" Height="35" VerticalAlignment="Top" >
        <VideoPlayer:mediaControl   Height="35" x:Name="mediaControls" />
    </StackPanel>
</Grid>

Answer 2

浏览源代码，我看到 Page.xaml 底部有一个 StackPanel。交换 MediaElement 和其中的 Grid。