如何在WPF的RowDefinitions中添加两个按钮？并创建三行布局的WPF应用

一、整体三行布局结构 #

用Grid控件实现三行布局是最直接的方案，下面是完整XAML示例，顶部行包含文本、按钮和图标，另外两行可按需自定义内容：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="三行布局示例" Height="450" Width="800">
    <Grid>
        <!-- 定义三行布局 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/> <!-- 顶部行高度自适应内容 -->
            <RowDefinition Height="*"/>    <!-- 中间行占剩余空间 -->
            <RowDefinition Height="Auto"/> <!-- 底部行高度自适应内容 -->
        </Grid.RowDefinitions>

        <!-- 顶部行：文本、按钮、图标 -->
        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="10" VerticalAlignment="Center" Spacing="10">
            <TextBlock Text="顶部文本内容" FontSize="16"/>
            <Button Content="操作按钮" Width="80"/>
            <Image Source="/Icons/your-icon.png" Width="24" Height="24"/> <!-- 替换为你的图标路径 -->
        </StackPanel>

        <!-- 中间行（可自定义） -->
        <Border Grid.Row="1" Background="#F0F0F0">
            <!-- 这里可以放中间内容 -->
        </Border>

        <!-- 底部行（可自定义） -->
        <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="10" HorizontalAlignment="Right" Spacing="10">
            <!-- 底部行元素示例 -->
        </StackPanel>
    </Grid>
</Window>

关键说明：

• Grid.RowDefinitions的Height属性：Auto表示行高随内容自动调整，*表示占满剩余可用空间
• 顶部行用StackPanel（Orientation="Horizontal"）横向排列元素，Spacing控制元素间距，Margin控制边距

二、在RowDefinitions的行中添加两个按钮 #

在某一行内放置两个按钮，有两种常用实现方式：

方式1：用StackPanel横向排列 #

适合按钮需要紧密排列的场景：

<!-- 在中间行添加两个按钮 -->
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="20">
    <Button Content="按钮1" Width="100"/>
    <Button Content="按钮2" Width="100"/>
</StackPanel>

方式2：用Grid分列布局 #

适合需要按钮占据特定宽度比例的场景：

<!-- 在中间行添加两个按钮（按比例分栏） -->
<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button Grid.Column="0" Content="按钮1" Margin="10"/>
    <Button Grid.Column="1" Content="按钮2" Margin="10"/>
</Grid>

说明：

• 方式2中ColumnDefinitions的Width="*"表示两列平分该行宽度，也可设置固定值（如Width="150"）或比例（如Width="2*"和Width="1*"表示2:1分栏）

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