WPF：如何将Expander.Header内的红色按钮停靠至右侧？

要让红色按钮停靠在Expander.Header的右侧，核心是让Header内容能占满Expander的整个宽度，再通过布局控件实现按钮靠右。具体修改如下：

关键修改点 #

• 给Expander添加HorizontalContentAlignment="Stretch"属性，确保Header内的容器能拉伸至Expander的整个宽度
• 可保留原Grid布局，也可改用更简洁的DockPanel实现按钮靠右

修改后的XAML代码（Grid版本） #

<StackPanel Orientation="Vertical" x:Name="spTest" Margin="10">
    <Border BorderBrush="Black" BorderThickness="1">
        <!-- 添加HorizontalContentAlignment="Stretch"让Header内容占满宽度 -->
        <Expander Margin="5,0,5,0" HorizontalContentAlignment="Stretch">
            <Expander.Header>
                <Grid Margin="5,0,0,0" HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="40"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="TEXT1 1231521312" Grid.Column="0" FontSize="18" Foreground="Black" VerticalAlignment="Center"/>
                    <TextBlock Grid.Column="1" FontSize="18" FontStyle="Italic" Margin="10,0,10,0" Foreground="Black" VerticalAlignment="Center" Text="Text2"/>
                    <Button x:Name="btnRemove" Grid.Column="2" Width="40" Height="40" Background="#F8CECC" Content="X" FontWeight="Normal" FontSize="18" BorderBrush="#B95753"/>
                </Grid>
            </Expander.Header>
        </Expander>
    </Border>
</StackPanel>

更简洁的DockPanel版本 #

如果不需要多列的复杂布局，用DockPanel可以更直接实现按钮靠右：

<StackPanel Orientation="Vertical" x:Name="spTest" Margin="10">
    <Border BorderBrush="Black" BorderThickness="1">
        <Expander Margin="5,0,5,0" HorizontalContentAlignment="Stretch">
            <Expander.Header>
                <DockPanel Margin="5,0,0,0" LastChildFill="False">
                    <TextBlock Text="TEXT1 1231521312" FontSize="18" Foreground="Black" VerticalAlignment="Center"/>
                    <TextBlock FontSize="18" FontStyle="Italic" Margin="10,0,10,0" Foreground="Black" VerticalAlignment="Center" Text="Text2"/>
                    <!-- 停靠到右侧 -->
                    <Button x:Name="btnRemove" DockPanel.Dock="Right" Width="40" Height="40" Background="#F8CECC" Content="X" FontWeight="Normal" FontSize="18" BorderBrush="#B95753"/>
                </DockPanel>
            </Expander.Header>
        </Expander>
    </Border>
</StackPanel>

原理说明 #

Expander默认的HorizontalContentAlignment是Left，导致Header内的容器只会占据自身内容的宽度，无法拉伸到Expander的整个可用宽度。添加HorizontalContentAlignment="Stretch"后，Header容器就能铺满Expander的宽度，此时按钮就能通过布局控件（Grid的*列或DockPanel的Dock属性）停靠到右侧。

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