Xaml Windows通用响应设计重新定位

因此，我刚刚开始重新使用Windows应用程序，有一些东西我无法按我的意愿工作（可能是因为我找不到任何示例，Channel9视频也没有涵盖我的情况）

从年开始，我决定当从大屏幕移动到小屏幕时，“重新定位”技术适合我的应用程序

我所做的是使用一个

StackPanel

并使用两个

AdaptiveTrigger

s（一个用于0宽度，另一个用于720，基于表格）更改其方向

这是可行的，但有一些问题，我将用一些丑陋的绘画编辑截图来说明

当我处于

BigScreen

的情况下，有足够的空间将A和B放在同一行时，就会发生这种情况。这里的问题是B应该占据整个剩余宽度，覆盖所有蓝色部分

第二个问题与调整大小有关。当没有足够的空间时，绿色部分将被剪切而不是调整大小（您可以看到右边框消失）。在使用

StackPanel

使布局响应之前，不会发生这种情况

最后，当我们在

小屏幕

的情况下，方向变为垂直，我们遇到了与第一个相同的问题：绿色部分的高度没有填满屏幕

以下是用于页面的

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

）一起工作

是否有人成功地应用了这种技术而不必使用代码隐藏

编辑：

---

我使用了一个包含两行两列的

网格
，使用
AdaptiveTrigger
将所有内容从一行移动到另一列，反之亦然。
为什么不尝试使用网格（而不是StackPanel）并使用比例尺寸定义行，如：

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

`
`
可以通过setter更改RelativePanel附加的属性值。语法如下所示：

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


因为移动到横向会导致第1行成为第1列，我无法使用
Setter
进行此更改，因为它不适用于附加属性（
例如Grid.row
）。检查此链接可能会帮助您定位感谢您的回复，但这不是我需要的。我对方向没有问题，我对Windows 10要求的响应布局有问题。我不知道这种语法，我会尽快检查出来，因为这可以使代码使用网格工作，使所有内容都具有正确的大小，谢谢。