xaml - Windows Universal响应式设计重新定位

Question

因此，我刚刚开始重新使用Windows应用程序，有些事情我无法按我的要求进行(可能是因为我找不到任何示例，而Channel9视频也没有涵盖我的情况)。

从this article开始，我认为从大屏幕切换到小屏幕时，“重定位”技术非常适合我的应用程序。

我所做的是使用StackPanel并使用两个AdaptiveTrigger更改其方向(一个基于表here，表示0宽度，另一个表示720)。

这种方法行得通，但是我会用一些丑陋的油漆编辑的屏幕快照来说明一些问题。

当我处于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这样的附加属性一起使用。

是否有成功的人在无需使用后台代码的情况下应用此技术？

编辑:

我通过使用带有2行2列的 Grid来完成此工作，并且 AdaptiveTrigger将所有内容从行移动到列，反之亦然。

Answer 1

可以通过 setter 更改RelativePanel附加的属性值。语法如下:

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