如何实现WPF按钮水平溢出时自动换行并调整高度？

核心思路 #

放弃StackPanel（不支持自动换行），改用WrapPanel作为按钮容器，通过监听容器尺寸变化和按钮文本变化，计算总宽度是否超出容器可用空间，动态切换按钮高度：

• 总宽度未超出：按钮保持40px高度，WrapPanel自动单行排列
• 总宽度超出：按钮切换为20px高度，WrapPanel自动换行成两行（总高度固定为40px，两行刚好填满）

实现步骤 #

1. 替换布局容器
   将原StackPanel替换为WrapPanel，设置HorizontalAlignment="Stretch"让容器占满父控件的可用水平空间，同时给容器命名方便后续代码操作。

2. 统一按钮样式
   定义按钮样式，设置初始高度为40px，统一边距避免布局混乱。

3. 添加逻辑监听与计算
   在后台代码中监听容器尺寸变化、按钮文本/内容变化，实时计算所有按钮的总宽度（包含边距），对比容器宽度后调整按钮高度。

代码示例 #

XAML 部分

<Window x:Class="DynamicButtonLayout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="动态按钮布局" Height="100" Width="500">
    <Window.Resources>
        <Style x:Key="DynamicHeightButtonStyle" TargetType="Button">
            <Setter Property="Height" Value="40"/>
            <Setter Property="Margin" Value="4"/>
            <Setter Property="Padding" Value="8 0"/>
            <!-- 可添加其他样式，比如字体、背景色等 -->
        </Style>
    </Window.Resources>
    <Grid>
        <WrapPanel x:Name="buttonWrapPanel" HorizontalAlignment="Stretch" VerticalAlignment="Center">
            <Button Content="按钮A" Style="{StaticResource DynamicHeightButtonStyle}" />
            <Button Content="按钮B" Style="{StaticResource DynamicHeightButtonStyle}" />
            <Button Content="可编辑按钮" Style="{StaticResource DynamicHeightButtonStyle}" IsEnabled="True" />
            <!-- 可添加更多按钮 -->
        </WrapPanel>
    </Grid>
</Window>

C# 后台代码

using System.Linq;
using System.Windows;
using System.Windows.Controls;

namespace DynamicButtonLayout
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // 监听容器尺寸变化
            buttonWrapPanel.SizeChanged += ButtonWrapPanel_SizeChanged;
            // 给每个按钮绑定内容变化事件
            foreach (Button btn in buttonWrapPanel.Children.OfType<Button>())
            {
                btn.ContentChanged += Button_ContentChanged;
            }
        }

        private void UpdateButtonHeights()
        {
            double totalButtonWidth = 0;
            // 计算所有按钮的总宽度（包含边距）
            foreach (Button btn in buttonWrapPanel.Children.OfType<Button>())
            {
                totalButtonWidth += btn.ActualWidth + btn.Margin.Left + btn.Margin.Right;
            }

            // 判断是否需要切换高度
            double targetHeight = totalButtonWidth > buttonWrapPanel.ActualWidth ? 20 : 40;
            foreach (Button btn in buttonWrapPanel.Children.OfType<Button>())
            {
                btn.Height = targetHeight;
            }
        }

        private void ButtonWrapPanel_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            UpdateButtonHeights();
        }

        private void Button_ContentChanged(object sender, RoutedEventArgs e)
        {
            // 延迟执行，确保按钮宽度已更新
            Dispatcher.BeginInvoke(new Action(UpdateButtonHeights));
        }
    }
}

注意事项 #

• 如果按钮是动态生成的，需要在生成时绑定ContentChanged事件
• 若按钮使用TextBox作为可编辑模板，需监听TextBox的TextChanged事件而非按钮的ContentChanged
• 计算总宽度时必须包含按钮的边距，否则会出现判断偏差

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