xaml – Windows通用响应式设计重新定位

所以,我刚刚开始使用 Windows应用程序,有一些我无法按照自己的意愿工作(可能是因为我找不到任何样本,而且ChAnnel9视频没有覆盖我的情况). @H_674_15@从this article开始,我决定“重新定位”技术是适合我的应用程序从大屏幕移动到较小屏幕的技术.

@H_674_15@我所做的是使用StackPanel并使用两个Adaptivetriggers改变其方向(一个用于0宽度,另一个用于720,基于表here).

@H_674_15@这种方法有效,但我会用一些丑陋的油漆编辑的截图来说明一些问题.

@H_674_15@这就是当我处于BigScreen情况时会发生的情况,那里有足够的空间让A和B同时在同一行上.这里的问题是B应该占据剩余的全部宽度,覆盖所有蓝色部分.

@H_674_15@第二个问题与调整大小有关.当没有足够的空间时,绿色部分会被切割而不是调整大小(您可以看到右侧边框消失).在使用StackPanel使布局响应之前,这没有发生.

@H_674_15@最后,当我们处于smallScreen情况时,方向变为垂直方向,我们遇到与第一个相同的问题：绿色部分的高度不会填满屏幕.

@H_674_15@这是用于页面的XAML：

<Page
    x:Class="Page"
    xmlns="http://scheR_379_11845@as.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://scheR_379_11845@as.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WifiAnalyzerFinal.Views"
    xmlns:d="http://scheR_379_11845@as.microsoft.com/expression/blend/2008"
    xmlns:mc="http://scheR_379_11845@as.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,5"/>
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>
        </StackPanel>
    </Grid>
</Page>

@H_674_15@请注意,如果没有StackPanel,绿色部分将适合页面,覆盖所有可用区域.不幸的是,我无法找到更好的解决方案,因为没有样本告诉我们应该如何实现这种技术.我也尝试使用新的RelativePanel,但似乎Adaptivetrigger的Setter不能与RelativePanel.RightOf这样的附加属性一起使用.

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

@H_674_15@编辑：

@H_674_15@我使用一个包含2行和2列的Grid工作,使用Adaptivetrigger将所有内容从行移动到列,反之亦然.

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