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. ``` ``` 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.

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

windows, windows-phone-8.1, windows-rt, winrt-xaml, xaml

Solution

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.

Problem

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.

Original source