WPF如何做这个缩进？

Question

我需要将一个页面格式化如下：

这段代码显然是完全错误的，但给出了一个大概的思路：

<Grid Grid.Row="10">
  <Label Grid.Row="0" Grid.Column="0" Content="Label1"/>
  <TextBox Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3"/>
  <Label Grid.Row="0" Grid.Column="4" Content="Label2"/>
  <TextBox Grid.Row="0" Grid.Column="5">
  <Label Grid.Row="0" Grid.Column="6" Content="Label3"/>
  <TextBox Grid.Row="0" Grid.Column="7">
  <Label Grid.Row="1" Grid.Column="0" Content="Label4"/>
  <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3"/>
  <Label Grid.Row="1" Grid.Column="0" Content="Label5"/>
  <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3"/>
</Grid>

对我来说最棘手的部分是如何将 label2/textbox2 & label3/textbox3 缩进到 textbox5.

label 的大小应该根据文本源是动态的，因此使用 Width 百分比不太可取。

另外，这是一个长页面的一部分（因此是 Row="10"）所以最好解决方案不影响页面的其余部分（我认为它不会因为它在 Grid).

Answer 1

因为您已将它封装在它自己的 Grid 中，所以您可以将它分成任意多行和多列。通过在图像中放置灰色分隔线，您已经开始使用适当的列数！只需使用它并计算您从左到右绘制的矩形数量即可定义您的列。

<Grid Grid.Row="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Label1"/>
    <TextBox x:Name="Textbox1" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="6" Text="text box 1"/>
    <Label Grid.Row="0" Grid.Column="8" Content="Label2"/>
    <TextBox x:Name="Textbox2" Grid.Row="0" Grid.Column="9" Grid.ColumnSpan="3" Text="text box 2"/>
    <Label Grid.Row="0" Grid.Column="12" Content="Label3"/>
    <TextBox x:Name="Textbox3" Grid.Row="0" Grid.Column="13" Grid.ColumnSpan="1" Text="text box 3"/>
    <Label Grid.Row="1" Grid.Column="0" Content="Label4" />
    <TextBox x:Name="Textbox4" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Text="text box 4"/>
    <Label Grid.Row="1" Grid.Column="8" Content="Label5"/>
    <TextBox x:Name="Textbox5" Grid.Row="1" Grid.Column="9" Grid.ColumnSpan="6" Text="text box 5"/>
</Grid>

这是输出：

WPF如何做这个缩进？

WPF how to do this indentation?

wpf

formatting

xaml

visual-studio