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

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