Silverlight - take embedded custom control out of page and make it full screen

Question

Hi,

I have a Silverlight 4 application. The MainPage which is the RootVisual of the application has many controls on it - one of which is a user control called VideoPlayerView. What I would like is when a user clicks on the fullscreen icon on this control, for this control to "pop out" of the page and go full screen (i.e. all the other controls on this page must be hidden and only the VideoPlayerView control would show fullscreen).

The MainPage has Row and Column definitions set up as follows:

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="143"/>
        <ColumnDefinition Width="4"/>
        <ColumnDefinition Width="81"/>
        <ColumnDefinition Width="27"/>
        <ColumnDefinition Width="624"/>
        <ColumnDefinition Width="125"/>
        <ColumnDefinition Width="10"/>
        <ColumnDefinition Width="10"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="15"/>
        <RowDefinition Height="40"/>
        <RowDefinition Height="10"/>
        <RowDefinition Height="21"/>
        <RowDefinition Height="10"/>
        <RowDefinition Height="199"/>
        <RowDefinition Height="220"/>
        <RowDefinition Height="21"/>
        <RowDefinition Height="160"/>
        <RowDefinition Height="26"/>
        <RowDefinition Height="45"/>
    </Grid.RowDefinitions>

When the VideoPlayerView is made full screen, I assume it needs to go to the 0,0 position and those definitions should be set to Auto at that point?

I have tried removing the VideoPlayerView control from its current parent, clearing the MainPage.LayoutRoot's children collection and adding the videoplayerview to the MainPage's Layoutroot - but for some reason the VideoPlayerView only showed in the top 1/4 of the screen.

If anyone knows of a way of doing this please let me know!

Answer 1

Probably the reason why the video player is filling only a quarter of the screen is because it is added by default to the first row and column of the grid. If you want it to span several rows and columns you have to use Grid.ColumnSpan=8 and Grid.RowSpan=11 so that it fills the whole screen.

Also, it is not strictly necessary for you to remove all the controls from the children collection; turning their visibility to Collapsed should be enough.

You could handle all these changes using visual states and then you could do something like:

VisualStateManager.GoToState(this, "Normal", true);

and:

VisualStateManager.GoToState(this, "Fullscreen", true);