Question

我是Windows Runtime编程的新手，并决定在Windows 10发布之前陷入困境。

我正在尝试设计一个自适应页面UI，其外观如下所示， Desktop view 有标题＆＃34;东西＆＃34;在它的顶部和下方，我想要两列，每列都有一个文本块标题，下面是列表视图。列表视图可以是任意高度，因此我认为两个块的父级应该是一个滚动查看器。

然而，在移动设备上，由于屏幕很窄，因此该UI无法正常工作，因此我想使用visualstate重新排列页面，使其看起来如下所示， Mobile view

如您所见，滚动查看器的需求显然可以包含此部分。＆＃34;其他东西＆＃34;在顶部应保持固定，但所以它可以一直看到。

我已经尝试了很多方法来实现这一目标，但还没有能够管理它。我现在拥有的是：

//.... Other Stuff ......
<ScrollViewer x:Name="SummaryScrollViewer" Grid.Row="2" HorizontalScrollBarVisibility="Disabled"
              HorizontalScrollMode="Disabled" VerticalScrollMode="Auto" VerticalScrollBarVisibility="Auto" HorizontalContentAlignment="Center">
        <RelativePanel x:Name="SummaryRelativePanel">
            <Grid x:Name="lCol" Width="{Binding ActualWidth, ElementName=SummaryRelativePanel}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="lcolHead" Grid.Row="0" Text="TextBlock:"/>
                <ListView x:Name="lcolList" Grid.Row="1">
                </ListView>
            </Grid>
            <StackPanel x:Name="rCol" Orientation="Vertical" RelativePanel.RightOf="lCol">
                <TextBlock x:Name="rcolHead" Text="TextBlock:"/>
                <ListView x:Name="rcolList" Height="Auto">
                </ListView>
            </StackPanel>
        </RelativePanel>
    </ScrollViewer>

正如您所看到的，我已经尝试将每个列的内容都设置为堆栈面板和网格，但是我还没有能够将它们的宽度设置为“桌面”。 view＆＃34;，包含相对面板的一半，它应该填满整个屏幕的宽度，并且在＆＃34;移动视图中＃34;它们应该填满父母的全部宽度。

我已经找到了如何将宽度绑定到父元素的ActualWidth属性的答案，如代码片段中所示，这可行，但我似乎无法使两列填充一半每个父母。

我想使用RelativePanel，因此我可以使用viewstate将右侧列的属性更改为RightOf =＆＃34; LeftCol＆＃34;或者以下=＆＃34; LeftCol＆＃34;，然后也应该更新宽度以填充所需的宽度。

使用网格也应该可以，定义一个4x4网格，在桌面中底部两个是折叠，或者在移动设备中右边两个是折叠的，但我的印象是这是相对面板的精确用例

在relativepanel的所有示例中，他们使用relativepanel来移动使用/ height元素定义的程序员，例如矩形RelativePanel class。

还可以从代码隐藏中以编程方式手动设置每列的ActualWidth，但我不知道如何查询app / page当前所处的视觉状态以确定每个列的宽度和位置列应该是。

关于＆＃34;最佳＆＃34;的任何帮助和建议非常感谢能够实现这一目标的方法。

Answer 1

我们开始吧，让我们开始讨论错误（或者我认为是错误的东西）

1.-如果我设置一个绑定到RelativePanel ActualWidth的控件，它只是第一次，我的意思是，如果我展开窗口控件不会调整大小，那么bug？

让我们用Grid做到这一点：

<Grid x:Name="LayoutRoot" Background="Red" >

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="WindowSizeStates"  >
        <VisualState x:Name="SmallScreen"  >
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="ContentLayoutRoot.Background" Value="Green"/>
                <Setter Target="ContentLayoutRoot.RowDefinitions[0].Height" Value="100"/>
                <Setter Target="ContentLayoutRoot.RowDefinitions[1].Height" Value="400"/>
                <Setter Target="ContentLayoutRoot.RowDefinitions[2].Height" Value="100"/>
                <Setter Target="ContentLayoutRoot.RowDefinitions[3].Height" Value="400"/>

                <Setter Target="ContentLayoutRoot.ColumnDefinitions[0].Width" Value="1*"/>
                <Setter Target="ContentLayoutRoot.ColumnDefinitions[1].Width" Value="0"/>

                <Setter Target="SubHeaderOneLayout.(Grid.Row)" Value="0"/>
                <Setter Target="ContentOneLayout.(Grid.Row)" Value="1"/>
                <Setter Target="SubHeaderTwoLayout.(Grid.Row)" Value="2"/>
                <Setter Target="ContentTwoLayout.(Grid.Row)" Value="3"/>

                <Setter Target="SubHeaderTwoLayout.(Grid.Column)" Value="0"/>
                <Setter Target="ContentTwoLayout.(Grid.Column)" Value="0"/>
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="WideScreen">
            <VisualState.StateTriggers>

                <AdaptiveTrigger MinWindowWidth="1000" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="ContentLayoutRoot.Background" Value="Purple"/>
                <Setter Target="ContentLayoutRoot.RowDefinitions[0].Height" Value="100"/>
                <Setter Target="ContentLayoutRoot.RowDefinitions[1].Height" Value="900"/>
                <Setter Target="ContentLayoutRoot.RowDefinitions[2].Height" Value="0"/>
                <Setter Target="ContentLayoutRoot.RowDefinitions[3].Height" Value="0"/>

                <Setter Target="ContentLayoutRoot.ColumnDefinitions[0].Width" Value="0.5*"/>
                <Setter Target="ContentLayoutRoot.ColumnDefinitions[1].Width" Value="0.5*"/>

                <Setter Target="SubHeaderOneLayout.(Grid.Row)" Value="0"/>
                <Setter Target="ContentOneLayout.(Grid.Row)" Value="1"/>
                <Setter Target="SubHeaderTwoLayout.(Grid.Row)" Value="0"/>
                <Setter Target="ContentTwoLayout.(Grid.Row)" Value="1"/>

                <Setter Target="SubHeaderTwoLayout.(Grid.Column)" Value="1"/>
                <Setter Target="ContentTwoLayout.(Grid.Column)" Value="1"/>

            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="1*"/>
</Grid.RowDefinitions>

<Grid x:Name="HeaderLayout"  VerticalAlignment="Top" Height="32"> 
    <TextBlock Text="Other Stuff" HorizontalAlignment="Center"/>
</Grid>

<ScrollViewer Grid.Row="1">
<Grid  x:Name="ContentLayoutRoot">

    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="900"/>
        <RowDefinition Height="0"/>
        <RowDefinition Height="0"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*"/>
        <ColumnDefinition Width="0.5*"/>
    </Grid.ColumnDefinitions>

    <Grid x:Name="SubHeaderOneLayout"  >
        <TextBlock Text="Sub Header One" HorizontalAlignment="Center"/>
    </Grid>

    <Grid x:Name="SubHeaderTwoLayout"  Grid.Column="1">
        <TextBlock Text="Sub Header Two" HorizontalAlignment="Center"/>
    </Grid>

    <Grid x:Name="ContentOneLayout" Background="Orange"  Grid.Row="1">
        <TextBlock Text="ContentOne Layout" HorizontalAlignment="Center"/>
    </Grid>

    <Grid x:Name="ContentTwoLayout" Background="Orange"  Grid.Row="1" Grid.Column="1">
        <TextBlock Text="ContentOne Layout" HorizontalAlignment="Center"/>
    </Grid>

</Grid>
</ScrollViewer>

我可以尝试使用相对面板制作但涉及事件，还有更多事情，告诉我它是否足够。而且，就我自己发现的触发器而言，您可以在codeproject

中的文章中获得更多信息

设置RelativePanel儿童的尺寸与父视图的尺寸成比例

1 个答案: