Fix Expander header should stretch horizontally

[emako]

Demo code:

 <Design.PreviewWith>
     <Border Width="550" Padding="50">
         <StackPanel Spacing="5">
          
             <Expander>
                 <Expander.Header>
                     <Grid Margin="0,16,0,16" ColumnDefinitions="Auto,*,Auto">
                         <Grid Grid.Column="0" Margin="0,0,12,0">
                             <TextBlock MinWidth="26"
                                        Margin="4,0,0,0"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                                        FontSize="18"
                                        Text="{x:Static ui:FontSymbols.System}" />
                         </Grid>
                         <Grid Grid.Column="1" RowDefinitions="Auto,Auto">
                             <TextBlock Grid.Row="0" Text="Header" />
                             <TextBlock Grid.Row="1"
                                        FontSize="11"
                                        Foreground="{DynamicResource SystemFillColorSolidNeutralBrush}"
                                        Text="Hint" />
                         </Grid>
                         <Grid Grid.Column="2" Margin="0,0,0,0">
                             <ToggleSwitch OffContent="" OnContent="" />
                         </Grid>
                     </Grid>
                 </Expander.Header>
                 <TextBox />
             </Expander>

         </StackPanel>
     </Border>
 </Design.PreviewWith>

Rendering results:

Before PR:

After PR:

[amwx]

I'm not in disagreement with this change per se... but it does change the style to longer match WinUI/Fluentv2.

I do wonder instead if we should add HorizontalHeaderAlignment and VerticalHeaderAlignment to Expander (of course this would need to be done upstream in Avalonia) and pass this down to the ToggleButton so that it can be customized. @robloo you've worked on the Expander, any thoughts on this?

In the future, please open an issue first so we can discuss before the PR stage. Thank you for wanting to contribute to FA!

[emako]

This is also to achieve a layout similar to Windows Settings. I think this makes sense.

[amwx]

This is also to achieve a layout similar to Windows Settings. I think this makes sense.

Well if you want to do that, put your button (or whatever) into the SettingsExpander Footer. FluentAvalonia has the SettingsExpander control already which does exactly what you're trying to do, I suggest you check that out.

[emako]

I think SettingsExpander and Expander should be able to implement the same layout

[robloo]

When the upstream WinUI Expander default style was written, I suspect we just copied the ToggleButton default style for the header area. This is why it's left aligned: https://github.com/microsoft/microsoft-ui-xaml/blob/268e06867114c04cc0f25201b57f64e326113ba0/src/controls/dev/Expander/Expander_themeresources.xaml#L91.

That then got carried over to Avalonia and then finally carried over here to FluentAvalonia. There isn't really a requirement that it be such -- it's just copy pasted from a few years ago in WinUI and follows ToggleButton.

Also note that if you set the HorizontalContentAlignment to stretch it will make the ContentPresenter container full width. But you can still specify a HorizontalAlignment on controls going into the header ContentPresenter so it will just work (both left/right alignment is supported). The default for control's HorizontalAlignment is already left as well. This means we can make the change here and it should be backwards compatible.

Finally,

1. If you change HorizontalContentAlignment I would also change VerticalContentAlignment
2. It would be good to get this upstream in Avalonia as well.