Question

我正在尝试创建响应式布局。默认情况下，我使用网格布局并使网格列宽度定义比率（30％-70％）像这样。

因此，当我调整窗体大小时，组件仍保持比例为30-70％。但是为了进一步的步骤，当形状尺寸达到最小尺寸时，我希望将其包裹到垂直方向。示例：当我尝试将form'size的大小调整为300个与设备无关的单元时，它不应再调整组件大小，而是将其包装成如下：

请您帮我解决这个问题吗？

Answer 1

我使用RelativePanel来实现这一目标。您的示例的红色部分相当于我的relLeftPanel，蓝色部分是我的scrollRightPanel。我将这两个放在RelativePanel内并使用以下VisualStateManager使其相应地工作。

可视状态管理器代码：

  <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>

            <VisualState x:Name="MobileView">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="relLeftPanel.(RelativePanel.AlignTopWithPanel)" Value="True"/>
                    <Setter Target="relLeftPanel.(RelativePanel.AlignLeftWithPanel)" Value="True"/>
                    <Setter Target="relLeftPanel.(RelativePanel.AlignRightWithPanel)" Value="True"/>

                    <Setter Target="scrollRightPanel.(RelativePanel.Below)" Value="relLeftPanel"/>
                    <Setter Target="scrollRightPanel.(RelativePanel.AlignBottomWithPanel)" Value="True"/>
                    <Setter Target="relLeftPanel.(RelativePanel.AlignLeftWithPanel)" Value="True"/>
                    <Setter Target="relLeftPanel.(RelativePanel.AlignRightWithPanel)" Value="True"/>
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="TabletView">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="relLeftPanel.(RelativePanel.AlignLeftWithPanel)" Value="True"/>
                    <Setter Target="relLeftPanel.(RelativePanel.AlignTopWithPanel)" Value="True"/>
                    <Setter Target="relLeftPanel.(RelativePanel.AlignBottomWithPanel)" Value="True"/>                       

                    <Setter Target="scrollRightPanel.(RelativePanel.AlignRightWithPanel)" Value="True"/>
                    <Setter Target="scrollRightPanel.(RelativePanel.AlignTopWithPanel)" Value="True"/>
                    <Setter Target="scrollRightPanel.(RelativePanel.AlignBottomWithPanel)" Value="True"/>
                    <Setter Target="scrollRightPanel.(RelativePanel.RightOf)" Value="relLeftPanel"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

Answer 2

目前，我找到了一个将WrapPanel嵌入到Grid中的解决方案（具有列定义3-7）。

<Grid Loaded="Grid_Loaded" SizeChanged="Grid_SizeChanged" Name="grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="7*"/>
    </Grid.ColumnDefinitions>
    <WrapPanel Grid.ColumnSpan="2">
        <TextBlock VerticalAlignment="Stretch" Name="txt01" Background="Red" Text="30%" Foreground="White" TextAlignment="Center" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[0].ActualWidth, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, Mode=OneWay}" MinWidth="100"/>
        <TextBlock VerticalAlignment="Stretch" Name="txt02" Background="Blue" Grid.Column="1" Text="70%" Foreground="White" TextAlignment="Center" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Path=ColumnDefinitions[1].ActualWidth, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True, NotifyOnTargetUpdated=True, Mode=OneWay}" MinWidth="100"/>
    </WrapPanel>
</Grid>

- 发生了一个问题，即Component项的宽度绑定到Grid的ColumnDefinition Actual Width，但是当Grid_Sized改变时，宽度不会更新。

响应网格布局

2 个答案: