如何在uwp中编写这样的自适应面板？

如图所示，我有原始图片，并想添加一些文本。 我试过网格，但并不完美。当窗口大小改变或在pc/mobile上更改时，我希望它们都位于正确的位置

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="7*"/>
        </Grid.RowDefinitions>
        <StackPanel>
            <TextBlock Text="Who are we" Margin="5"/>
            <ComboBox x:Name="comboboxJobs" Margin="5" BorderThickness="1"/>
        </StackPanel>
        <Grid Grid.Row="1" MaxWidth="600" MaxHeight="900">
            <Grid.Background>
                <ImageBrush AlignmentX="Center" AlignmentY="Bottom" Stretch="Uniform" ImageSource="ms-appx:///Assets/WhoAreWe.jpg"/>
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="3*"/>
            </Grid.RowDefinitions>

            <!--<Image Grid.Row="0" Grid.RowSpan="6" Grid.ColumnSpan="2" Source="ms-appx:///Assets/WhoAreWe.jpg" VerticalAlignment="Bottom"/>-->
            <TextBox Grid.Row="0" Grid.Column="0" Text="Who are we？" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
            <TextBox Grid.Row="0" Grid.Column="1" Text="Programmers！" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
            <TextBox Grid.Row="2" Grid.Column="0" Text="What we do？" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
            <TextBox Grid.Row="2" Grid.Column="1" Text="Fix Bugs！" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
            <TextBox Grid.Row="4" Grid.Column="0" Text="Then what？" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
            <TextBox Grid.Row="4" Grid.Column="1" Text="Write new Bugs！" BorderThickness="0" FontWeight="Bold" FontSize="20" HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" VerticalAlignment="Center" VerticalContentAlignment="Stretch"/>
        </Grid>

    </Grid>

---

从问题来看，这项工作似乎是针对

VisualStates

和

自适应触发器的

我仔细阅读了您的代码，我必须说，理想情况下，您的XAML不能像这样，有更好的方法来实现相同类型的UI，以帮助保持动态性和可扩展性。根据您共享的当前代码片段，您似乎很难更改/向UI添加更多字段（当前只有6个字段，但当它变为15个时会发生什么，您是否还会添加8行？）

撇开这一点不谈，我已经对您的代码进行了调整：

为
文本框
使用了一种常见的
样式
，这样明天如果您想更改文本框样式，只需更改一次即可
使用了
RelativePanel
而不是
rootGrid
，这减少了行和列的定义，因此增加了更多的可维护性
将
*
中的
行
和
列
定义修改为
自动
，以提供自适应UI
将
图像
元素放入
视图框
中，以在窗口大小更改时提供流动性
最后添加了
visualStates
，以处理
文本框的可见性

更新代码如下：

<RelativePanel Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveVisualStates">
            <VisualState x:Name="Compressed">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowHeight="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="textBox.Visibility" Value="Collapsed"/>
                    <Setter Target="textBox1.Visibility" Value="Collapsed"/>
                    <Setter Target="textBox2.Visibility" Value="Collapsed"/>
                    <Setter Target="textBox3.Visibility" Value="Collapsed"/>
                    <Setter Target="textBox4.Visibility" Value="Collapsed"/>
                    <Setter Target="textBox5.Visibility" Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Expanded">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowHeight="800"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="textBox.Visibility" Value="Visible"/>
                    <Setter Target="textBox1.Visibility" Value="Visible"/>
                    <Setter Target="textBox2.Visibility" Value="Visible"/>
                    <Setter Target="textBox3.Visibility" Value="Visible"/>
                    <Setter Target="textBox4.Visibility" Value="Visible"/>
                    <Setter Target="textBox5.Visibility" Value="Visible"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <TextBlock Name="headerText" Text="Who are we?" FontSize="18" FontWeight="SemiBold" Margin="10,5"/>
    <ComboBox x:Name="comboboxJobs" Margin="10,5" BorderThickness="1" RelativePanel.Below="headerText" MinWidth="200"/>
    <Grid Grid.Row="1" MaxWidth="600" MaxHeight="900" MinHeight="300" RelativePanel.Below="comboboxJobs" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True"  Background="Gray" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="CollapsableA" Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition x:Name="CollapsableB" Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition x:Name="CollapsableC" Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBox x:Name="textBox" Grid.Row="0" Grid.Column="0" Text="Who are we？" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="1" Grid.Column="0" Stretch="UniformToFill">
            <Image Source="Assets/Dummy1.jpg"/>
        </Viewbox>

        <TextBox x:Name="textBox1" Grid.Row="0" Grid.Column="1" Text="Programmers！" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="1" Grid.Column="1" Stretch="UniformToFill">
            <Image Source="Assets/Dummy2.jpg"/>
        </Viewbox>

        <TextBox x:Name="textBox2" Grid.Row="2" Grid.Column="0" Text="What we do？" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="3" Grid.Column="0" Stretch="UniformToFill">
            <Image Source="Assets/Dummy3.jpg"/>
        </Viewbox>

        <TextBox x:Name="textBox3" Grid.Row="2" Grid.Column="1" Text="Fix Bugs！" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="3" Grid.Column="1" Stretch="UniformToFill">
            <Image Source="Assets/Dummy4.jpg"/>
        </Viewbox>

        <TextBox x:Name="textBox4" Grid.Row="4" Grid.Column="0" Text="Then what？" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="5" Grid.Column="0" Stretch="UniformToFill">
            <Image Source="Assets/Dummy5.jpg"/>
        </Viewbox>

        <TextBox x:Name="textBox5" Grid.Row="4" Grid.Column="1" Text="Write new Bugs！" Style="{StaticResource TextboxStyle}"/>
        <Viewbox Grid.Row="5" Grid.Column="1" Stretch="UniformToFill">
            <Image Source="Assets/Dummy6.jpg"/>
        </Viewbox>

    </Grid>
</RelativePanel>


建议
不建议在动态工作流中严格定义UI，并考虑
组合框

我感觉下面的图像都是基于用户在
组合框中选择的内容

这感觉像是一个
GridView
的工作，其中
ItemSource
被
绑定到一个
observedcollection
，而
MyUIClass
有两个属性，例如
Text
和
ImagePath
，您可以轻松地填充
集合
RaisePropertyChanged
使用
INotifyPropertyChanged
进行属性更改，此时您的UI完全是动态的

请注意：数据绑定的概念将为您节省大量时间和精力。另外，
MVVM
会有很大帮助，但是
MVVM
不会成为一个节目的阻碍
嗨，再见。谢谢你的帮助。使用6个图像填充每个网格。这是一个好办法。首先，我只使用一个大图像作为背景。所以很难找到文本框。没问题。很高兴你能帮忙
<Page.Resources>
    <Style x:Key="TextboxStyle" TargetType="TextBox">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    </Style>
</Page.Resources>