Xử lý các định hướng khác nhau trong khi phát triển các ứng dụng Windows 8 Store

Question

Tôi đã viết các ứng dụng Android trong vài năm và bây giờ tôi đang phát triển một ứng dụng Windows Store/Windows 8.

Tôi rất bối rối về cách viết bố cục màn hình khác nhau để định hướng ngang và dọc. Trong Android, tất cả những gì chúng ta phải làm là viết 2 bố cục, một cho chân dung và một bố cục khác, theo một số quy ước tên cho tên tệp và khi chúng ta xoay thiết bị, nền tảng thay đổi bố cục màn hình một cách tự động.

Tôi đã googling cho một số giải pháp để làm tương tự trong ứng dụng Windows 8 của tôi, và tất cả tôi đã tìm thấy là một giải pháp sử dụng Visual State Groups và Visual States, đưa vào cùng một XAML một số sửa đổi xảy ra với chúng tôi widget khi chúng ta xoay thiết bị.

Ví dụ, để thực hiện một TextBlock thay đổi vị thế của mình khi tôi xoay điện thoại để hướng dọc:

<VisualState x:Name="FullScreenPortrait" > 
    <Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="GridViewTitle"> 
      <DiscreteObjectKeyFrame KeyTime="0"> 
       <DiscreteObjectKeyFrame.Value> 
        <x:Int32>3</x:Int32> 
       </DiscreteObjectKeyFrame.Value> 
      </DiscreteObjectKeyFrame> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="GridViewTitle"> 
      <DiscreteObjectKeyFrame KeyTime="0"> 
       <DiscreteObjectKeyFrame.Value> 
        <Thickness>0,10,10,807</Thickness> 
       </DiscreteObjectKeyFrame.Value> 
      </DiscreteObjectKeyFrame> 
     </ObjectAnimationUsingKeyFrames> 
    </Storyboard> 
</VisualState> 

Nó không nhìn rất sạch sẽ và đơn giản với tôi, và thậm chí làm điều đó bằng cách sử dụng Visual Studio của cách tiếp cận của việc kéo và thả các widget để tạo mã Tôi có ấn tượng rằng phải có một số giải pháp dễ dàng hơn và sạch hơn so với những gì tôi đang làm. Vì vậy, câu hỏi của tôi là: có bất kỳ giải pháp dễ dàng hơn để viết bố trí XAML cho mỗi định hướng hoặc tôi đi đúng, nhưng cách cứng? Không.

Cảm ơn!

Answer 1

Một cách để xử lý các hướng khác nhau là tạo hai phần tử Lưới với con bên trong và thay đổi độ nhớt của Lưới theo hướng.

Để phát hiện những thay đổi định hướng, bạn cũng có thể sử dụng cảm biến SimpleOrientation như mã bên dưới:

public sealed partial class MainPage : Page 
    { 
     private SimpleOrientationSensor _oSensor; 

     public MainPage() 
     { 
      this.InitializeComponent(); 

      _oSensor = SimpleOrientationSensor.GetDefault(); 

     } 

     protected override void OnNavigatedTo(NavigationEventArgs e) 
     { 
      if (_oSensor != null) 
       _oSensor.OrientationChanged += (s, a) => 
       { 
        Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,() => 
        { 
         switch (a.Orientation) 
         { 
          case SimpleOrientation.NotRotated: 
          case SimpleOrientation.Rotated180DegreesCounterclockwise: 
           currentOrientation.Text = "Landscape"; 
           break; 
          case SimpleOrientation.Rotated270DegreesCounterclockwise: 
          case SimpleOrientation.Rotated90DegreesCounterclockwise: 
           currentOrientation.Text = "Portrait"; 
           break; 
          default: 
           currentOrientation.Text = "N/A"; 
           break; 
         } 
        }); 
       }; 
     } 

    } 

Hoặc cách đơn giản nhất là để xử lý sự kiện SizeChanged như mã bên dưới:

public sealed partial class MainPage : Page 
{ 
    public MainPage() 
    { 
     this.InitializeComponent(); 

     mainGrid.SizeChanged += mainGrid_SizeChanged; 
    } 

    void mainGrid_SizeChanged(object sender, SizeChangedEventArgs e) 
    { 
     if (mainGrid.ActualHeight > mainGrid.ActualWidth) 
      currentOrientation.Text = "Portrait"; 
     else 
      currentOrientation.Text = "Landscape"; 
    } 

} 

Hy vọng điều này giúp!

Answer 2

Esdras - bạn không sai, có lẽ nên có một cách dễ dàng hơn nhưng lựa chọn duy nhất khác là phần mềm Expression Blend. Và tôi sẽ thừa nhận rằng có một đường cong học tập để có được và chạy.

Ngoài ra đối với các thay đổi định hướng được viết bằng Xaml, điều khiển chính phải điều khiển từ một điều khiển có thể mở rộng (không được niêm phong bên trong) và phải có bố cục. Vì vậy, ví dụ nếu bạn đặt một hộp văn bản trên trang nhận biết bố cục, hướng của nó sẽ thay đổi, nhưng nếu bạn đặt lưới trên trang Nhận thức bố cục và hộp văn bản trong lưới ... Hành vi mặc định là lưới sẽ phản hồi nhưng hộp văn bản sẽ không. Bạn cũng có thể nhận thấy rằng mặc dù nó lộn xộn và mọi điều khiển đều cần một công cụ điều khiển như bạn đã cung cấp cho mỗi phần tử cần phản hồi thay đổi định hướng ... Lợi ích là nó không yêu cầu mã gốc để xác định trạng thái hoặc chuyển đổi và do đó, các nhà thiết kế có thể sử dụng giao diện xml được gọi là xaml để mô tả các thay đổi trong chế độ xem cho dù đó là định hướng hay trạng thái của các điều khiển khác.

Nếu bạn có thể có được bàn tay của bạn trên chương trình Expression Blend nó đã được thực hiện cho mục đích đó.

Answer 3

Tôi đã viết một bài đăng trên stackoverflow một thời gian trở lại, điều đó có thể hữu ích cho bạn. cung cấp với một số ví dụ và mã:

[Xử lý Định hướng trên Windows 8 ứng dụng] [1] Handling Orientation in Windows 8.1 Store app

bài viết tôi, nếu bạn có vấn đề hơn.

Xin cảm ơn, Ambuj