当页面方向改变时，如何将XAML元素全屏显示？

Question

在我的Windows Phone 8.1 RT应用中，我在枢轴控件内有一张图片。

当页面方向改变为垂直时，我希望能够全屏显示该元素。

非常感谢任何帮助。

我的XAML代码如下：

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

当页面方向改变为横向时，我想要将图像控件 MainImage 显示为全屏，并在方向改回纵向时恢复到正常的 Pivot。

- Harsha Bhat

Answer 1

您无法将数据透视视图内容扩展到完整区域。一种解决方案是使用单独的图像控件并将其隐藏，在方向更改时显示此图像并隐藏网格以实现纵向视图。以下是操作步骤：

您的页面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>

确保VisualStateManager元素位于页面的根控件/Grid中

在您页面的构造函数中添加代码。

 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);

        }

方向改变事件处理程序

 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);

        }
    }

编辑：

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

希望能对你有所帮助。

- Muhammad Saifullah

---

谢谢您的回答，但有没有办法使用同一个元素来完成呢？例如，我可能会在那里放置一个媒体播放器控件，而不是图像。因此，我不希望同时运行两个不同的媒体播放器并占用内存。 - Harsha Bhat

仅更改页面的XAML。 - Muhammad Saifullah