How do I reference the Toggle Button Circle and override vertical alignment of the Aero theme Expander?

Question

Currently, I am referencing the Aero theme in my App.xml file. In the main.xml file, I am using expanders to display the content in a resizable width app. (For this example, I limited the width to 500)

The expander header content generally will be short, but it allows for up to 500 chars. Depending on the window size (600 pixels by default), the content can wrap (thereby stretching the expander header downwards). This is fine, but the toggle button (a circle /w arrow) is set for VerticalAlignment=center from what I can tell.

I need a way to override that VerticalAlignment in a style without re-creating the Aero template for the Expander. I just cant seem to reference the circle and arrow objects. I have tried overriding Toggle Button as well, with no luck.

As you can see below, I can override some aspects of the Aero Expander. I just need that little nudge to get the Toggle Button Circle and Arrow objects to change the VerticalAlignment.

Thanks

Code example follows:

<Window.Resources>
    <Style TargetType="{x:Type Expander}" BasedOn="{StaticResource {x:Type Expander}}">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Background" Value="#464646" />
        <Setter Property="Width" Value="Auto" />
        <Setter Property="Margin" Value="1,0,1,0" />
        <Setter Property="IsExpanded" Value="False" />
    </Style>
</Window.Resources>

<Expander ContextMenu="{StaticResource cMnu}" Width="auto">
    <Expander.Header>
        <StackPanel Orientation="Horizontal" Width="auto" Margin="0">
            <TextBlock Width="65">Normal</TextBlock>
            <TextBlock Width="80">Open</TextBlock>
            <TextBlock Width="80">10/31/2009</TextBlock>
            <TextBlock TextWrapping="Wrap" Width="500">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Aliquam ultrices auctor magna, sit amet commodo ipsum accumsan eu. 
            Sed a mollis felis. Nam ullamcorper augue vel mauris consequat imperdiet. 
            Nunc in augue mauris. 
            Quisque metus tortor, porttitor nec auctor id, mollis nec ipsum. 
            Suspendisse eget ipsum vitae lectus fermentum porta. 
            Aliquam erat volutpat. 
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
            Phasellus congue dui ac arcu eleifend a amet.
            </TextBlock>
        </StackPanel>
    </Expander.Header>
</Expander>

Answer 1

If you look at the default template for the Expander, you can see why none of your property setters are working:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="20" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <ToggleButton IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,
                RelativeSource={RelativeSource TemplatedParent}}"
                OverridesDefaultStyle="True" 
                Template="{StaticResource ExpanderToggleButton}" 
                Background="{StaticResource NormalBrush}" />
  <ContentPresenter Grid.Column="1"
                    Margin="4" 
                    ContentSource="Header" 
                    RecognizesAccessKey="True" />
</Grid>

The ToggleButton's VerticalAlignment is what you are after, and there are no setters for it.

It seems to me that there is no way to change this alignment property through the Style. You must provide a new template.

Answer 2

Thanks for the quick response.

I was hoping that would not be the case. Ah well!

Actually, for the style I gave above, the property settings do in fact override the Aero defaults. And I can even create a property using ToggleButton.VerticalAlignment that was at least accepted (even if it didnt give the results I wanted).

I was just hoping there was a way to drill down further to reference circle and arrow.

I dont really mind creating a new template, but I was hoping that there was a way around it. A shame to deal with all that just to top align 1 small item. Plus, I have not been able to find the Aero expander default template to start with.

Thanks again.