Проблема с макетом Silverlight XAML

Question

Я использую Silverlight 3.0 + .Net 3.5 + VSTS 2008 + C # для разработки простого видеоприложения с использованием slvideoplayer с открытым исходным кодом Silverlight.

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.Поменяйте местами медиаэлемент и сетку внутри него.