堆叠多组文本块和texbox,各组之间自动间隔

我是WPF的新手,在设计UI时遇到问题。

我想为客户的字段显示一行控件:姓名,电话,年龄,地址:

Group_1 [ Textblock1 <fixed gap> Textbox1 ] <variable_gap> Group_2 [ Textblock2 <fixed gap> Textbox2 ] and so on....

例如:

对于客户:

name_textblock Text_box <variable gap> Phone Text_box <variable gap> Age Text_box <variable gap> Address Text_box

另请参阅附件图片:

enter image description here

I want to group one textblock and one textbox (invisible grouping, no group border etc.) together with a fixed gap, and then the gap between 2 such group should vary depending on the screen resolution / DPI.

怎么做?我是WPF的新手,这是我在WPF中的第一个UI。

评论
  • onam
    onam 回复

    You can setup a Grid like this:

    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
    
      <StackPanel Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
        <TextBlock Text="123" Margin="0,0,8,0" />
        <TextBox Width="30" />
      </StackPanel>
      <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Left">
        <TextBlock Text="123" Margin="0,0,8,0" />
        <TextBox Width="30" />
      </StackPanel>
      <StackPanel Orientation="Horizontal" Grid.Column="2" HorizontalAlignment="Left">
        <TextBlock Text="123" Margin="0,0,8,0" />
        <TextBox Width="30" />
      </StackPanel>
    </Grid>
    

    By default, the TextBox doesn't stretch to fill remaining space. It is designed to take the minimum required space and will grow on input.

    The following solution will force the TextBox to consume the remaining column space using a DockPanel as container.

    Note: if you don't want to have the TextBox stretch to fill the complete remaining space, you can control it by setting either the DockPanel.Width, DockPanel.MaxWidth or the TextBox.MaxWidth property.

      <DockPanel Grid.Column="0" LastChildFill="True">
        <TextBlock Text="123" />
        <TextBox Margin="4,0,8,0" />
      </DockPanel>
      <DockPanel Grid.Column="1" LastChildFill="True">
        <TextBlock Text="123" />
        <TextBox Margin="4,0,8,0" />
      </DockPanel>
      <DockPanel Grid.Column="2" LastChildFill="True">
        <TextBlock Text="123" />
        <TextBox Margin="4,0,8,0" />
      </DockPanel>
    </Grid>
    

    Depending on your scenario you may consider to use a horizontal ItemsControl.