Expander Control

[kat-y]

For issue 3279

Some expected changes to be added before this will be merged

[oldnewthing]

Presumably, I could also put content in the Header?

<muxc:Expander x:Name="Expander2">
    <muxc:Expander.Header>
        <Button>Button in the header</Button>
    </muxc:Expander.Header>
    <Button>Button in the content</Button>
</muxc:Expander>

[ejserna]

Yes

[kat-y]

To clarify this, I'll be updating the examples so the second one has a ToggleButton in the header as well!

[MikeHillberg]

What does it mean to have a toggle button in the header, the header is already a toggle button?

[kat-y]

By this I mean putting a ToggleButton inside the Header as part of an example showing controls in the Header and Content.

[MikeHillberg]

Some other interactive control would help. A toggle within a toggle creates some confusion.

[MikeHillberg]

Recommend: Just some interactive content other than a ToggleButton.

[marcelwgn]

Maybe a TextBox or RichEditBox (a scenario might be "Enter your password" with the dropdown showing a "Forgot password button" or something like that)?

[oldnewthing]

[marcelwgn]

Great idea @oldnewthing, that's a very good example; @kat-y I think we should use that.

[oldnewthing]

How do I style the background for the header and content separately? Which one does the Background property apply to? Similarly for font properties and Foreground.

Is this where HeaderTemplate enters the picture?

Or is this a case where you have to edit the template, and we expect most people to accept the default background and font?

[ejserna]

I think the HeaderTemplate can be used to style the header, but @alexhinz knows more about this than me.

[alexhinz]

Header, HeaderTemplate, and HeaderTemplateSelector are functionally analogous to Content, ContentTemplate, and ContentTemplateSelector, and they apply to the area of Expander that's to the left of the chevron. So because they don't span the entire border-to-border (inclusive) area of the header, they're likely not a good fit for that kind of styling. They also would not be aware of any Expander states, like if it's expanded, if a dev would like to change colors based on them.

So devs could retemplate to style the header and background areas separately. Adding in additional lightweight styling properties would help avoid the need to retemplate.

[MikeHillberg]

What does Expander.Background apply to? Both the header and the content?

Other controls have a Background resource, should there be one for Expander too?

[oldnewthing]

I think lightweight styling properties would be popular.

• To convey state. E.g. "Tuesday has slots available, Wednesday is full, and Thursday is oversubscribed."
• To color-code the Expanders. E.g., Errors in red, Warnings in yellow.
• Everybody wants their colors to match their brand.

[kat-y]

Re @MikeHillberg question: Following the latest Expander PR merge the Background property now does propagates to the Header (while the Foreground, Fontsize, and FontFamily propagate to the Content).

As an example, the following code results in an Expander where the entire header area (including 'under' the chevron) is Cyan, with default text styling, but the content area has default background color with text that is pink and size 25 Times New Roman font. (If there's a way to add pictures to a PR thread let me know!). I'll update this section to reflect the current behavior for now.

<controls:Expander x:Name="Expander1" Header="This is in the header" Content="This is in the content" FontSize ="25" FontFamily="Times New Roman" Foreground="Magenta" Background="Cyan"/>

[MikeHillberg]

Discussion: You could set the background of the Header using the Background property, and the background of the Content within the content itself.

Recommend: Maybe show an example?

[Jay-o-Way]

Is this still an issue?