c# - 将 RelativePanel 的子项的尺寸设置为与父 View 的尺寸成比例

Question

我是 Windows 运行时编程的新手，并决定在 Windows 10 发布之前坚持下去。

我正在尝试设计一个自适应页面 UI，如下所示， 顶部和下方有标题“东西”，我想要两列，每列都有一个文本 block 标题，下面是一个 ListView 。 ListView 可以是任意高度，因此我认为这两个 block 的父级应该是滚动查看器。

但是在移动设备上，由于屏幕太窄，这个 UI 将无法工作，所以我想使用 visualstate 来重新排列页面，使其看起来如下所示，

如您所见，显然需要滚动查看器来包装此部分。顶部的“其他内容”应保持固定，以便始终可以看到。

我已经尝试了多种方法来实现这一目标，但一直未能成功。我目前拥有的是:

//.... 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 ”的一半包含的相关面板，应该填满屏幕的整个宽度，在“移动 View ”中，它们应该填满父级的整个宽度。

我已经找到了如何将宽度绑定(bind)到父元素的 ActualWidth 属性的答案，如代码片段所示，这很有效，但我似乎无法让两列分别填充父元素的一半.

我想使用 RelativePanel，这样我就可以使用 View 状态将右侧列的属性更改为 RightOf="LeftCol"或 Below="LeftCol"，然后宽度也应该更新以填充需要宽度。

使用网格也应该是可能的，定义一个 4x4 网格，在桌面中底部两个折叠，或者在移动中右侧两个折叠，但我的印象是这是 relativepanel 的精确用例.

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

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

任何关于实现这种事情的“最佳”方式的帮助和建议将不胜感激。

Answer 1

我们开始吧，让我们开始解决错误(或我认为是错误的事情)

1.- 如果我设置一个绑定(bind)到 RelativePanel ActualWidth 的控件，它只需要第一次，我的意思是，如果我展开窗口，控件不会调整大小，所以错误？

那么让我们用网格来做吧:

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

我可以尝试用 Relative Panel 做，但是涉及到事件，还有更多的东西，告诉我它是否足够。而且，我自己发现的触发器，您可以在我的文章中获得更多信息 codeproject