How to show a XAML element in full screen when the page orientation is changed?

Question

In my Windows Phone 8.1 RT app, I have an image inside pivot control.

I want to show the element in full screen when the page orientation is changed to vertical.

Any help would be greatly appreciated.

My XAML is as shown below.

<Grid x:Name="ContentPanel">
    <Pivot Title="{Binding ItemTitle}">
        <PivotItem Header="Overview">
            <StackPanel Orientation="Vertical">
                <Image x:Name="MainImage" Source="{Binding ImageURL}"/>
                <TextBlock x:Name="TitleTextBlock" Text={Binding Title}"/>
            </StackPanel>
        </PivotItem>
        <PivotItem Header="Details">
            <ScrollViewer>
                <TextBlock x:Name="DetailsTextBlock" Text="{Binding Details}"/>
            </ScrollViewer>
        </PivotItem>
    </Pivot>
</Grid>

I'm trying to show the image control MainImage in full screen when the page orientation changed to Landscape and revert it back to normal Pivot when the orientation changes back to Portrait.

Muhammad Saifullah · Accepted Answer · 2014-07-16T07:36:08.410

You cannot expand the pivot view content to full so that it hold the full area. one solution is use a separate image control and make it hidden and on orientation change show this image and hide grid vice verse for portrait view. here is how

Your page Xaml

<Grid Name="MainPage">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="OrientationManager">
            <VisualState x:Name="Portrate">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentPanel">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible">
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MainImage1">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed">
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Landscape">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentPanel">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed">
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MainImage1">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible">
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid x:Name="ContentPanel">
        <Pivot Title="{Binding ItemTitle}">
            <PivotItem Header="Overview">
                <StackPanel Orientation="Vertical">
                    <Image x:Name="MainImage" Source="{Binding ImageURL}"/>
                    <TextBlock x:Name="TitleTextBlock" Text="asfsadf"/>
        </StackPanel>
            </PivotItem>
            <PivotItem Header="Details">
                <ScrollViewer>
                    <TextBlock x:Name="DetailsTextBlock" Text="{Binding Details}"/>
                </ScrollViewer>
            </PivotItem>
        </Pivot>
    </Grid>
    <Image Source="Assets\WideLogo.scale-14012.png" Visibility="Collapsed" Name="MainImage1"></Image>
</Grid>

Make sure that VisualStateManager element is in the root control/Grid of the page

Code in your page constructor.

 DisplayInformation di =  DisplayInformation.GetForCurrentView();
        di.OrientationChanged += di_OrientationChanged;

        if (di.CurrentOrientation == DisplayOrientations.Landscape || di.CurrentOrientation == DisplayOrientations.LandscapeFlipped)
        {
            VisualStateManager.GoToState(this, "Landscape", true);
        }
        else
        {
            VisualStateManager.GoToState(this, "Portrate", true);

        }

Orientation changed event handler

 void di_OrientationChanged(DisplayInformation sender, object args)
    {
        if (sender.CurrentOrientation == DisplayOrientations.Landscape || sender.CurrentOrientation == DisplayOrientations.LandscapeFlipped)
        {
            VisualStateManager.GoToState(this, "Landscape", true);
        }
        else
        {
            VisualStateManager.GoToState(this, "Portrate", true);

        }
    }

Edit:

<Grid Name="MainPage">
        <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="OrientationManager">
            <VisualState x:Name="Portrate">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PivotHeaderText1">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible">
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PivotHeaderText2">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible">
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>

            </VisualState>
            <VisualState x:Name="Landscape">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PivotHeaderText1">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed">
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PivotHeaderText2">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed">
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    <Grid x:Name="ContentPanel">
        <Pivot Title="{Binding ItemTitle}">
            <PivotItem>
                <PivotItem.Header>
                    <TextBlock Text="Overview" x:Name="PivotHeaderText1" ></TextBlock>
                </PivotItem.Header>
                <StackPanel Orientation="Vertical">
                    <MediaElement AutoPlay="True" x:Name="player" />
                    <TextBlock x:Name="TitleTextBlock" Text="asfsadf"/>
                </StackPanel>
            </PivotItem>
            <PivotItem>
                <PivotItem.Header>
                    <TextBlock Text="Overview" x:Name="PivotHeaderText2" ></TextBlock>
                </PivotItem.Header>
                <ScrollViewer>
                    <TextBlock x:Name="DetailsTextBlock" Text="{Binding Details}"/>
                </ScrollViewer>
            </PivotItem>
        </Pivot>
    </Grid>
</Grid>

Hope it helps.

Thanks for the answer but is there any way to do it with the same element? For example, I may have a Media Player control there instead of the Image. So I wouldn't want two different media players running at the same time and hogging the memory. — Harsha Bhat, Jul 16 '14 at 05:51

How to show a XAML element in full screen when the page orientation is changed?

1 Answers1