如何实现Expander Header标题旁带箭头、控件居右的对齐样式？

我想要构建一个Expander组件，使其Header部分的标题位于箭头旁，控件则在右侧（标题紧邻箭头，右侧放置操作控件）。我已尝试编写代码，但缺乏控制Expander Header样式的相关信息，当前代码如下：

<Expander ExpandDirection="Down" 
                      Background="White" 
                      Margin="20"
                      CornerRadius="10"
                      FlowDirection="RightToLeft" 
                      MinWidth="450"
                      MaxWidth="707">
    <Expander.Styles>
        <Style Selector="Expander">
            <!-- Remove border from the Expander itself -->
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
        </Style>
        
        <Style Selector="Expander:down /template/ Border#ExpanderContent">
            <Setter Property="BorderThickness" Value="0"/>
        </Style>

        <!-- Style for Expander.Header -->
        <Style Selector="Expander /template/ ToggleButton">
            <!-- Remove border and padding from the Header -->
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <!-- -->
            <Setter Property="Padding" Value="12"/>
            <Setter Property="Background" Value="White" />
        </Style>
    </Expander.Styles>

    <!-- Expander Header Content -->
    <Expander.Header >
        <TextBlock>Woo</TextBlock>
    </Expander.Header>

    <StackPanel Background="White" FlowDirection="LeftToRight">
        <TextBlock>Expanded content</TextBlock>
    </StackPanel>
</Expander>

当前效果无法实现标题紧邻箭头、控件居右的布局，请问如何调整实现目标样式，同时控制Header内元素的对齐方式？

解决方案 #

1. 移除反向布局设置 #

你当前设置的FlowDirection="RightToLeft"会反转整个Expander的布局方向，这是导致箭头和标题位置异常的核心原因，先移除该属性。

2. 自定义Header布局容器 #

在Expander.Header中使用DockPanel或Grid实现元素对齐：箭头默认在左侧，标题紧跟箭头，操作控件停靠在右侧。同时需要设置ToggleButton的内容对齐属性，确保自定义容器能铺满整个Header宽度。

示例代码（使用DockPanel）：

<Expander ExpandDirection="Down" 
          Background="White" 
          Margin="20"
          CornerRadius="10"
          MinWidth="450"
          MaxWidth="707">
    <Expander.Styles>
        <Style Selector="Expander">
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
        </Style>
        
        <Style Selector="Expander:down /template/ Border#ExpanderContent">
            <Setter Property="BorderThickness" Value="0"/>
        </Style>

        <Style Selector="Expander /template/ ToggleButton">
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="12"/>
            <Setter Property="Background" Value="White" />
            <!-- 让Header内容容器铺满整个宽度 -->
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </Expander.Styles>

    <Expander.Header>
        <!-- 用DockPanel实现标题左对齐、控件右对齐 -->
        <DockPanel Width="100%">
            <TextBlock Text="Woo" VerticalAlignment="Center"/>
            <Button Content="操作控件" DockPanel.Dock="Right" Margin="0 0 8 0"/>
        </DockPanel>
    </Expander.Header>

    <StackPanel Background="White">
        <TextBlock>Expanded content</TextBlock>
    </StackPanel>
</Expander>

3. 精细调整箭头与标题间距（可选） #

如果需要进一步缩小箭头和标题的间距，可以重写Expander的ControlTemplate，直接控制箭头和内容的布局：

<Expander ExpandDirection="Down" 
          Background="White" 
          Margin="20"
          CornerRadius="10"
          MinWidth="450"
          MaxWidth="707">
    <Expander.Template>
        <ControlTemplate TargetType="Expander">
            <Border Background="{TemplateBinding Background}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                <DockPanel>
                    <!-- 自定义Header的ToggleButton -->
                    <ToggleButton x:Name="ExpanderButton"
                                  DockPanel.Dock="Top"
                                  Background="{TemplateBinding Background}"
                                  BorderBrush="Transparent"
                                  BorderThickness="0"
                                  Padding="8 12"
                                  HorizontalContentAlignment="Stretch">
                        <DockPanel>
                            <!-- 箭头图标，可调整Margin控制与标题的间距 -->
                            <ContentPresenter x:Name="ExpandSite"
                                              Content="{TemplateBinding ExpandIcon}"
                                              Margin="0 0 4 0"/>
                            <!-- Header内容容器 -->
                            <ContentPresenter Content="{TemplateBinding Header}"
                                              ContentTemplate="{TemplateBinding HeaderTemplate}"/>
                        </DockPanel>
                    </ToggleButton>
                    <!-- 展开内容区域 -->
                    <ContentPresenter x:Name="ContentSite"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Visibility="Collapsed"/>
                </DockPanel>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsExpanded" Value="True">
                    <Setter TargetName="ContentSite" Property="Visibility" Value="Visible"/>
                    <Setter TargetName="ExpandSite" Property="RenderTransform">
                        <Setter.Value>
                            <RotateTransform Angle="180"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Expander.Template>

    <Expander.Header>
        <DockPanel Width="100%">
            <TextBlock Text="Woo" VerticalAlignment="Center"/>
            <Button Content="操作控件" DockPanel.Dock="Right" Margin="0 0 8 0"/>
        </DockPanel>
    </Expander.Header>

    <StackPanel Background="White">
        <TextBlock>Expanded content</TextBlock>
    </StackPanel>
</Expander>

关键要点 #

• 移除FlowDirection="RightToLeft"，恢复默认布局方向
• 设置ToggleButton.HorizontalContentAlignment="Stretch"，确保自定义Header容器能铺满宽度
• 使用DockPanel/Grid作为Header的布局容器，灵活控制元素对齐
• 重写ControlTemplate可实现更精细的箭头、标题间距控制

内容的提问来源于stack exchange，提问作者Kyle Corbin Hurst