Windows Universal responsive design reposition

Question

Vì vậy, tôi mới bắt đầu làm việc lại với các ứng dụng Windows và có một vài điều mà tôi không thể làm việc theo ý muốn (có lẽ vì tôi không tìm thấy bất kỳ mẫu nào và video Channel9 đã không 't bao gồm trường hợp của tôi).

Bắt đầu từ this article, tôi quyết định rằng kỹ thuật "đặt lại vị trí" là kỹ thuật phù hợp với ứng dụng của tôi khi di chuyển từ màn hình lớn sang màn hình nhỏ hơn.

Điều tôi đã làm là sử dụng StackPanel và thay đổi hướng của nó bằng cách sử dụng hai AdaptiveTrigger s (một cho 0 chiều rộng và một cho 720, dựa trên bảng here).

Loại này hoạt động nhưng có một số vấn đề mà tôi sẽ minh họa với một số ảnh chụp màn hình được chỉnh sửa sơn xấu xí.

Đây là những gì xảy ra khi tôi ở trong tình huống BigScreen, nơi có đủ không gian để có cả A và B trên cùng một hàng. Vấn đề ở đây là B nên có chiều rộng còn lại đầy đủ, bao gồm tất cả các phần màu xanh lam.

Vấn đề thứ hai có liên quan đến thay đổi kích thước. Khi không có đủ không gian, phần màu xanh lá cây bị cắt thay vì bị thay đổi kích thước (bạn có thể thấy rằng đường biên giới bên phải biến mất). Điều này đã không xảy ra trước khi sử dụng StackPanel để làm cho bố cục phản hồi.

Cuối cùng, khi chúng tôi đang trong tình trạng SmallScreen, thay đổi định hướng là dọc và chúng tôi có cùng một vấn đề như là người đầu tiên: chiều cao phần xanh của không lấp đầy màn hình.

Đây là XAML sử dụng cho trang:

<Page 
    x:Class="Page" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:WifiAnalyzerFinal.Views" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:mvvm="using:Mvvm" 
    mc:Ignorable="d">   

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="SmallScreen"> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="StackPanel.Orientation" 
          Value="Vertical"/> 
       </VisualState.Setters> 
      </VisualState> 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="BigScreen"> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="StackPanel.Orientation" 
          Value="Horizontal"/> 
        <Setter Target="Rect.Width" 
          Value="200"/> 
         <Setter Target="Rect.Height" 
          Value="Auto"/> 
        </VisualState.Setters> 
      </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <StackPanel Orientation="Vertical" 
        Background="Blue" 
        x:Name="StackPanel"> 
      <Rectangle Fill="Red" 
         Height="50" 
         x:Name="Rect" 
         Width="Auto"/> 
      <ListView ItemsSource="{Binding Stuff}" 
         HorizontalAlignment="Stretch" 
         HorizontalContentAlignment="Stretch" 
         VerticalAlignment="Stretch" 
         Background="Green" 
         Width="Auto" 
         BorderBrush="DarkGreen" 
         BorderThickness="5" 
         Padding="5"> 
       <ListView.ItemContainerStyle> 
        <Style TargetType="ListViewItem"> 
         <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
         <Setter Property="Margin" Value="0,0,0,5"/> 
        </Style> 
       </ListView.ItemContainerStyle> 
      </ListView> 
     </StackPanel> 
    </Grid> 
</Page> 

Xin lưu ý rằng nếu không có StackPanel phần màu xanh lá cây phù hợp với trang như mong muốn, bao gồm tất cả các khu vực có sẵn. Thật không may tôi không thể đưa ra một giải pháp tốt hơn bởi vì không có mẫu cho chúng tôi biết cách thực hiện kỹ thuật này. Tôi cũng đã thử sử dụng RelativePanel mới nhưng có vẻ như Setter của AdaptiveTrigger không hoạt động với các thuộc tính được đính kèm như RelativePanel.RightOf.

Có người nào thành công đang áp dụng kỹ thuật này mà không phải sử dụng mã không?

EDIT:

tôi đã làm việc này bằng cách sử dụng Grid với 2 hàng và 2 cột, với AdaptiveTrigger di chuyển tất cả các nội dung từ hàng để cột và ngược lại.

Answer 1

Có thể thay đổi giá trị tài sản gắn liền RelativePanel qua setters.Cú pháp giống như sau:

<Setter Target="SomeXAMLObject.(RelativePanel.RightOf)" Value="SomeOtherXAMLObject" /> 

Answer 2

Tại sao bạn không thử sử dụng lưới (thay vì StackPanel) và xác định hàng sử dụng kích thước theo tỷ lệ như sau:

`<Grid> 
<Grid.RowDefinitions> 
    <RowDefinition width="2*"/> 
    <RowDefinition width="3*"/> 
    <RowDefinition width="1*"/> 
</Grid.RowDefinitions> 
</Grid>`