WPF应用按钮与文本框布局异常，代码同教程一致却无法正常排版

核心问题根源 #

你当前代码里底部Grid的列宽配置完全不符合预期的布局逻辑：

• 文本框所在的第一列被设置为 Width="2"，也就是固定2像素宽度
• 按钮所在的第二列是默认的*，会占用Grid剩余的全部宽度
  这就是你看到文本框几乎不可见、按钮占满底部几乎全部宽度的直接原因。

和教程效果不一致的原因 #

你提到核对代码和教程完全一致，大概率是以下两种情况：

1. 你漏看了教程代码中宽度值后的*标识：WPF的Grid如果要按比例分配宽度，数值后必须加*后缀。要实现75%和25%的宽度分配，应该是文本框列Width="3*"、按钮列Width="*"，总宽度分成4份，前者占3份、后者占1份，刚好符合你的预期。大概率是你手动输入或者复制代码时漏写了*，只保留了数字。
2. 部分JetBrains Rider版本的XAML编辑器存在自动补全截断问题，输入带*的宽度值时可能会误吞后缀的*，你可以再检查下代码是否确实缺失了这个标识。

还有一种更高概率的可能：你漏写了一列列定义。教程里的底部Grid应该是三列布局，分别对应「文本框（3*）、2像素分隔、按钮（*）」，你误把分隔列的2像素宽度当成了文本框的宽度配置，还少写了文本框对应的列定义，导致文本框被放到了仅2像素宽的分隔列里。

修正方案 #

如果不需要分隔间隙，直接把底部Grid的列定义替换为以下内容即可：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="3*"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

如果要保留2像素的分隔间隙，就用三列布局的代码：

<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <!-- 文本框列 占75%宽度 -->
        <ColumnDefinition Width="3*"/>
        <!-- 分隔列 固定2像素 -->
        <ColumnDefinition Width="2"/>
        <!-- 按钮列 占25%宽度 -->
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <TextBox Grid.Column="0" Name="_tb" MaxLength="50" />
    <Button Grid.Column="2" Name="_btn" Content="Send" Click="_btn_OnClick"/>
</Grid>

内容的提问来源于stack exchange，提问作者NotVeryGoodAtThis