I'm trying to build an expander with the Heading beside the arrow and controls on the right side. Similar to this:
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>
How do I go about making Expander Header similar to the top picture while controlling the alignment and different elements in the header?
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>