设备位置变化时如何保持按钮直立

Question

我希望能够让我的应用程序中的按钮始终保持直立状态，即使设备顺时针或逆时针旋转也是如此。标准的应用程序栏通过根据设备是处于纵向还是横向模式来调整应用程序栏图标来做到这一点，所以我想在我的页面上用一个按钮做类似的事情。我怎么能做这样的事情？对方法有什么建议吗？我想要么坚持应用栏已经做的事情，要么总是旋转按钮，使其在设备旋转时保持直立。

<Button x:Name="CameraButton" Grid.Row="1" Grid.Column="0" Margin="-48,0,0,-12"
                        Click="CameraButton_Click">
                    <Button.Content>
                        <Image Source="/Assets/Camera_Button1.png"/>
                    </Button.Content>
                </Button>

Answer 1

如果您不关心系统自动播放的旋转动画，您可以通过提供 3 个不同的图标（Portrait、LandscapeLeft、LandscapeRight）轻松实现。

在 Xaml 中，您首先将 ApplicationBarIconButton 添加到页面资源中，然后在触发 OrientationChanged 时更改其 IconUri。希望对您有所帮助。

项目代码可以在这里下载： http://hdtp.synology.me/ApplicationBarIconDirection.zip

xml代码：

<phone:PhoneApplicationPage 
x:Class="ApplicationBarIconDirection.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
shell:SystemTray.IsVisible="True"
OrientationChanged="PhoneApplicationPage_OrientationChanged">

<phone:PhoneApplicationPage.Resources>
    <shell:ApplicationBarIconButton x:Key="icon_arrow" IconUri="/Assets/up.png" Text="FixedUp"/>
</phone:PhoneApplicationPage.Resources>

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
</Grid>

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

xaml.cs 代码：

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Shell;

namespace ApplicationBarIconDirection
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            this.ApplicationBar.Buttons.Add(this.Resources["icon_arrow"] as ApplicationBarIconButton);
        }

        private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if (e.Orientation == PageOrientation.LandscapeLeft)
            {
                (this.Resources["icon_arrow"] as ApplicationBarIconButton).IconUri = new Uri("/Assets/left.png", UriKind.Relative);
            }
            else if (e.Orientation == PageOrientation.LandscapeRight)
            {
                (this.Resources["icon_arrow"] as ApplicationBarIconButton).IconUri = new Uri("/Assets/right.png", UriKind.Relative);
            }
            else
            {
                (this.Resources["icon_arrow"] as ApplicationBarIconButton).IconUri = new Uri("/Assets/up.png", UriKind.Relative);
            }
        }
    }
}

Answer 2

Application Bar 有一个名为 SupportedOrientation 的属性，它会在每次手机方向改变时改变它的方向（参见this）。但是，如果我们查看按钮，我们会发现既没有名为 SupportedOrientation 的此类属性，也没有任何其他属性与应用程序栏的 SupportedOrientation 类似。因此，我建议您根据手机方向的变化制定自己的逻辑。

改变方向的示例逻辑-

旋转按钮的逻辑

CompositeTransform ct=new CompositeTransform (){Rotation=90};
               button.Rendertransform=ct;

将此应用于像这样的方向变化

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if (e.Orientation == PageOrientation.LandscapeLeft)
            {
              //apply rotation with some angle say 90
            }
            else if (e.Orientation == PageOrientation.LandscapeRight)
            {
              //apply rotation 180
            }
            else if(e.Orientation == PageOrientation.PortraitUp)
            {
              //apply rotation  270
            } 
            else if(e.Orientation == PageOrientation.PortraitDown)
            {
              //apply rotation 360
            }
        }

为了在应用程序栏按钮中实现类似的平滑度，您将不得不使用表情混合来弄脏情节提要和动画