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

        }

方向已更改事件处理程序

 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>

希望它有所帮助。

如何在页面方向更改时全屏显示XAML元素？

1 个答案: