Silverlight XAML layout issue

Question

Hello everyone,

I am using Silverlight 3.0 + .Net 3.5 + VSTS 2008 + C# to develop a simple video application using the open source slvideoplayer of Silverlight.

http://slvideoplayer.codeplex.com/

For the player, the play control is at the bottom of the rendering video, any ideas how to place play control at the top of video? I have tried hard but can not figure out. Any solutions?

EDIT 1: here is the current XAML code, elements in "controlsContainer" is what I want to put on top of video (i.e. the "mediaPlayer"), here is the effect I want to have, appreciate if you could let me know how to change my code to achieve this goal?

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>

thanks in advance, George

Answer 1

Browsing the source code, I see Page.xaml with at the bottom a StackPanel. Swap the MediaElement and the Grid inside it.

Answer 2

See this one. Works fine for me. Last Line 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>