扩展器标题样式对齐

Question

我正在尝试构建一个扩展器，其标题位于箭头旁边，控件位于右侧。与此类似：

我尝试这样做，但没有关于如何控制扩展头中的样式的真实信息：

<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>

如何使 Expander Header 与顶部图片相似，同时控制标题中的对齐方式和不同元素？

Answer 1

看一下这个例子：

    <Expander>
        <Expander.Header>
            <Grid Background="Black" Height="100" Width="200">
                <TextBlock Text="Left Top" Foreground="Wheat"/>
                <TextBlock Text="Left Bottom" Foreground="White" VerticalAlignment="Bottom"/>
                <TextBlock Text="Right Center" Foreground="Green" VerticalAlignment="Center" HorizontalAlignment="Right"/>
            </Grid>
        </Expander.Header>
        <TextBlock Text="Content" FontSize="30"/>
    </Expander>