Windows 8 应用商店应用平滑方向更改

Posted

技术标签:

【中文标题】Windows 8 应用商店应用平滑方向更改【英文标题】:Windows 8 Store App Smooth Orientation Change 【发布时间】:2013-03-15 09:19:33 【问题描述】:

我有以下问题:

当我将我的 c#+xaml 页面的方向从横向更改为纵向或反之亦然时,在重新计算布局并重新计算之前,用户可以在屏幕上看到大的蓝色部分大约半秒呈现。这些点看起来像是之前定位状态的残留物。

我正在寻找一种方法来隐藏或平滑这种极其粗糙和颠簸的过渡。

我尝试添加一个带有 ProgressRing 的方向更改处理程序以覆盖它 1 秒钟,但它没有帮助 - 处理程序在蓝点之后执行。 这是我的动画故事板的代码

 <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
            <VisualState x:Name="FullScreenPortrait">
                <Storyboard>
                    <!-- Change the back button and the logo -->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="StaticResource PortraitBackButtonStyle"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerLogoImage" Storyboard.TargetProperty="Width">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="430"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerLogoImage" Storyboard.TargetProperty="Height">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="49"/>
                    </ObjectAnimationUsingKeyFrames>

                    <!--Change section title and navButtons to be in two rows, by moving navButtons to the second row, first column-->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="(Grid.Row)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="(Grid.Column)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="(Grid.ColumnSpan)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="navButtons" Storyboard.TargetProperty="Margin">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="0,15,0,0"/>
                    </ObjectAnimationUsingKeyFrames>

                    <!--Change the grid-->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemPortraitGridView" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>

感谢任何帮助,谢谢!

编辑: 我通过使用以下方法(以及我同事的帮助)解决了这个问题:

/// <summary>
    /// On Orientation change collapse all views, and make visible only the views for the particular new orientation
    /// Also change the font size for portrait mode
    /// </summary>
    /// <param name="sender"></param>
    private async void OnOrientationChanged(object sender)
    
        headerGrid.Visibility = Visibility.Collapsed;
        itemGridView.Visibility = Visibility.Collapsed;
        itemPortraitGridView.Visibility = Visibility.Collapsed;
        itemListView.Visibility = Visibility.Collapsed;

        //Make the loading spinner temporarily visible and stop it in the StoryBoard animation for every orientation separately
        LoadingView.Visibility = Visibility.Visible;

        //Change the font size
        if (ScreenHelper.IsInPortraitMode())
        
            _viewModel.FontSizeMethod = _viewModel.GetPortraitFontSize;
        
        else
        
            //change font size method back
            _viewModel.FontSizeMethod = _viewModel.GetLandscapeFontSize;
        

        // Change visibility back to normal in case the xaml approach failed.
        await Task.Delay(1000);

        if (ScreenHelper.IsInPortraitMode())
            itemPortraitGridView.Visibility = Windows.UI.Xaml.Visibility.Visible;
        else if (ApplicationView.Value == ApplicationViewState.Snapped)
            itemListView.Visibility = Windows.UI.Xaml.Visibility.Visible;
        else
            itemGridView.Visibility = Windows.UI.Xaml.Visibility.Visible;

        headerGrid.Visibility = Visibility.Visible;
        LoadingView.Visibility = Visibility.Collapsed;
    

【问题讨论】:

您应该将您的解决方案复制到一个答案中并将其标记为已解决。 【参考方案1】:

我知道您已将其标记为完成,但由于我无法发表评论,所以我不得不在这里提问。你能用缓动来解决这个问题吗?

【讨论】:

以上是关于Windows 8 应用商店应用平滑方向更改的主要内容,如果未能解决你的问题,请参考以下文章

更改 Windows 10 商店 uwp 应用程序的默认安装位置

Windows 8 应用商店应用程序 (Metro) 是不是在 Windows 7 或 XP 中运行?

适用于 Windows 8.1 应用商店应用的蓝牙低功耗服装服务设备发现和开发

Windows 8.1商店应用的信用卡支付实现[关闭]

我可以从 Windows 8.1 商店应用程序访问 HSQL 数据库吗?

适用于 Windows 8 应用商店 Web 资源的 Worklight 加密