如何在页面方向更改时全屏显示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在页面方向更改为横向时以全屏显示图像控件,并在方向更改回纵向时将其恢复为正常旋转.

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元素位于页面的根控件/网格中

页面构造函数中的代码.

 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改变了事件处理程序

 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>

希望能帮助到你.