How to do Silverlight overlay element - silverlight

Question

I am starting to learn SL...
I am trying to make a MediaElement of size X, and on the bottom of the movie frame some subtitles that will run.
I was unable to understand if I need absolute position or something else.
Please advice
thanks

Answer 1

If you need to us it as a subtitle you just need to put your TextBlock under the MediaElement on your Grid and need to give VerticalAllignment property as bottom on XAML. And it will be over it. Like this;
<Grid>
<MediaElement/>
<TextBlock VerticalAllignment="Bottom"/>
</Grid>
You may refer Grid Layout as relative positioning if you're new to silverlight. And can give a margin to your textblock or anything you want just take a look at the intellisense (if using VS) and you'll understand, if you're using expression blend it'll be a lot easier with UI.
If you want to use absolute positioning you'll need to use Canvas instead of Grid Layout, its the same and you can change anything to canvas with nearly no problem. In canvas, you need to use left and right properties instead of allignments. Like this;
<Canvas>
<MediaElement/>
<TextBlock Canvas.Left="0" Canvas.Top="400"/>
</Canvas>
Another option is stackpanel its not really suitable for LayoutRoot, but its pretty nice for controls. So if you want your subtitles to stay under your movie you should use StackPanel like this;
<StackPanel Orientation="Vertical">
<MediaElement/>
<TextBlock/>
</StackPanel>
So to sum up;
-If you want your subtitles to be on top of your movie use grid like the first example,
-If you have a fixed size and you want to place your subtitles anywhere you want use Canvas,
-And if you want to put your subtitles under your movie use StackPanel.
-My personal choice would be grid. =)
For more information you may check this article it seems like a nice one!
http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-2-using-layout-management.aspx
Happy coding!!

Answer 2

The TextBlock will overlay (within a Grid layout) the MediaElement simply because it is declared after the MediaElement. VerticalAlignment="Bottom" will place it at the bottom of the Grid. You might want to set the Grid's width and height (instead of the MediaElement) that of the size of the video. The MediaElement will auto size to stretch the full size of the grid.
<Grid x:Name="LayoutRoot" Width="480" Height="320">
<MediaElement/>
<TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom"/>
</Grid>