【问题标题】:How to fit textbox width with a set of columns in a grid?如何将文本框宽度与网格中的一组列相匹配?
【发布时间】:2023-03-20 05:37:02
【问题描述】:

假设我有一个包含 4 列的网格,并且想在第二列中放置一个文本框并将其跨越到最后一列。我怎样才能使文本框的宽度与最后 3 列一样宽?

我尝试过使用 Borders,但没有成功。

<Grid>
      <Grid.ColumnDefinitions>
           <ColumnDefinition Width="Auto" />
           <ColumnDefinition Width="Auto" />
           <ColumnDefinition Width="Auto" />
           <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>

      <TextBox Grid.Column="1" Grid.ColumnSpan="3" />
</Grid>

【问题讨论】:

    标签: wpf textbox grid width column-width


    【解决方案1】:

    给 TextBox 一些宽度或将 ColumnDefinition 宽度设为 * 而不是 Auto。它一直延伸到最后一列,但由于宽度为 Auto,您无法看到它。

    【讨论】:

    • 它不起作用...它不依赖于列宽。我可以将列宽设置为任何值,我只希望我的文本框与最后三列的宽度相同。
    • @GuilhermeCampos 您需要将所有列定义为Width="*",而不仅仅是TextBox 所在的列。
    • 好吧,正如@Dipesh 和@Rachel 所说的那样。但是 - 由于我不知道的原因 - 它在我的真实代码中不起作用(与其他东西一起),Grid.ColumnSpan 没有按预期工作。我在其他行中已经有其他Textboxes Grid 你知道为什么会发生这种情况吗?
    • @GuilhermeCampos 没有看到你的真实代码是不可能知道的。也许用产生问题的代码的简化示例打开另一个 SO 问题。
    【解决方案2】:

    现在最后 3 列适合文本框,因为宽度是自动的。

      <Grid>
      <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
    
      <TextBox Grid.Column="1" Grid.ColumnSpan="3" />
      </Grid>
    

    【讨论】:

    • 需要注意的是,Width为Auto表示"only take up the space needed to render the controls inside these columns",而Width为*表示"split the space evenly between all * sized columns"。因此,Balam 的示例是在 4 列之间平均分配空间,并将 TextBox 拉伸到其中的 3 列,因此 TextBox 的最终宽度将是 Grid 宽度的 3/4。
    【解决方案3】:

    正如Dipesh Bhatt 在他的回答中正确提出的那样,您的问题的解决方案是将 * 或特定的东西作为列的宽度。

    在您的示例中发生的情况是列的自动宽度显示“需要尽可能多的宽度”,因此它占用的宽度非常小,因为空文本框需要非常非常小的宽度,这几乎不可见。

    列的*宽度表示“获取任何可用空间”,这将增加列的宽度,从而为文本框提供更多空间。

    这意味着你已经实现了你想要的,但由于列的宽度最小,它几乎不可见。

    【讨论】:

    • 作为一个额外的说明 - 你的文本框应该有一个“拉伸”的水平对齐。它应该是默认的,但以防万一......
    • @Liz:同意。没有提及,因为这是默认行为。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-08-01
    • 1970-01-01
    • 2017-08-10
    • 1970-01-01
    • 1970-01-01
    • 2017-12-05
    • 1970-01-01
    相关资源
    最近更新 更多