wpfxamlavaloniauiavalonia

Expander Header Style Alignments

I'm trying to build an expander with the Heading beside the arrow and controls on the right side. Similar to this:

enter image description here

I've attempted on doing this, but there's no real information about how to control styles in an 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>

enter image description here

How do I go about making Expander Header similar to the top picture while controlling the alignment and different elements in the header?

Solution

  • Take a look at this example:

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