Siverlight Grid XAML script issue

Question

Here is my Siverlight Grid script, I want Media Element mediaPlayer to occupy left half of the whole Grid space, and want Media Element cameraPlayer to occupy right half of the whole Grid space. But my following code does not work quite well (I have set related Grid column/row value), two Media Elements play overlap.

Any ideas what is wrong?

<Grid x:Name="LayoutRoot2" Margin="0" Background="#FF0D0A0A" Cursor="Hand" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <MediaElement HorizontalAlignment="Stretch" Margin="10,10,10,10" x:Name="mediaPlayer" AutoPlay="false" Grid.Column="0" Grid.Row="0"/>
    <MediaElement HorizontalAlignment="Stretch" x:Name="cameraPlayer" AutoPlay="false" Grid.Column="1" Grid.Row="0"/>
</Grid>

thanks in advance, George

Answer 1

You need to define your column definitions on your grid.

<Grid x:Name="LayoutRoot2" Margin="0" Background="#FF0D0A0A" Cursor="Hand" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Grid.ColumnDefinitions>
         <ColumnDefinition
                Width="specify width" />
         <ColumnDefinition
                Width="specify width" />
    </Grid.ColumnDefinitions>
    <MediaElement HorizontalAlignment="Stretch" Margin="10,10,10,10" x:Name="mediaPlayer" AutoPlay="false" Grid.Column="0" Grid.Row="0"/>
    <MediaElement HorizontalAlignment="Stretch" x:Name="cameraPlayer" AutoPlay="false" Grid.Column="1" Grid.Row="0"/>
</Grid>

you'll need to specify the width that you want your column to be.