Windows通用響應式設計復位

Question

因此，我剛開始再次使用Windows應用程序工作，並且有些事情我無法按自己的意願工作（可能是因爲我沒有找到任何示例，Channel9視頻也沒有不包括我的情況）。

從this article開始，我決定「重新定位」技術適合從大屏幕移動到更小屏幕時的應用。

我所做的是使用StackPanel並使用兩個AdaptiveTrigger（其中一個爲0寬度，另一個爲720，基於表here）更改其方向。

這種有點奏效，但有一些問題，我會用一些醜陋的油漆編輯的截圖來說明。

這就是我在BigScreen的情況下發生的情況，在這種情況下，A和B在同一行上有足夠的空間。這裏的問題是B應該佔據全部的剩餘寬度，覆蓋所有的藍色部分。

的第二個問題是有關調整。當沒有足夠的空間時，綠色部分會被剪切而不是被調整大小（您可以看到右邊框消失）。這在使用StackPanel使佈局響應之前沒有發生。

最後，當我們都在SmallScreen情況下，方向更改爲垂直和我們有同樣的問題，第一個：綠色部分的高度不填充屏幕。

下面是用於頁XAML：

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

請注意，如果沒有StackPanel綠色部分適合頁面，因爲它應該涵蓋所有的可用面積。不幸的是，我不能提出更好的解決方案，因爲沒有樣本告訴我們應該如何實施這項技術。我也嘗試使用新的RelativePanel，但看起來AdaptiveTrigger的Setter不適用於附加屬性，如RelativePanel.RightOf。

有沒有人成功應用這種技術，而不必使用代碼隱藏？

編輯：

我使用Grid 2行2列這方面的工作，與AdaptiveTrigger將所有內容從行到列，反之亦然。

Answer 1

有可能通過制定者改變RelativePanel附加屬性值。語法是這樣的：

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

Answer 2

你爲什麼不嘗試使用網格（而不是StackPanel中），並使用比例尺寸一樣定義行：

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