Add DropDownButtonRevealStyle

[lhak]

Proposal: Add DropDownButtonRevealStyle

Summary

Add a reveal style for the DropDownButton control.

Rationale

There are currently reveal styles for many controls of the platform. However, there is one missing for the DropDownButton control. It would be nice if such a style could be added to WinUI.

Functional Requirements

The style should have a similar design to the current ButtonRevealStyle/AppBarButtonRevealStyle styles.

Usage Examples

Detailed Feature Design

Open Questions

[jevansaks]

Yup, totally agree. This seems to be an oversight. @chigy @kikisaints could you see about getting a comp for this?

I don't know when our team would be able to get to this, but we would welcome a contribution for this.

[kikisaints]

Actually, since DropDownButton's template is based on button, simply doing this:

<DropDownButton Content="Email" Style="{ThemeResource ButtonRevealStyle}"/>

Will give you full Reveal on the DropDownButton.

However, for clarity's sake, I'd suggest we add something like this to generic.xaml:

<Style TargetType="DropDownButton" x:Key="DropDownButtonRevealStyle" BasedOn="{StaticResource ButtonRevealStyle}"/>

@jevansaks I don't believe a comp is necessary, as testing out the ButtonRevealStyle on the DropDownButton gives the desired results and can be viewed today - but let me know if you feel otherwise.

[jevansaks]

I forgot to call out that I think we should also do a SplitButton reveal style along with this.

For DropDownButton, yes, the fix may be simple -- but it still needs to be done. :)

[kikisaints]

For SplitButton, I was imagining something like this:

[lhak]

I tried using ButtonRevealStyle, but this does not show the dropdown indicator.

[kikisaints]

Ah! So you are correct, @lhak. For your immediate remedy then, you can do this:

<DropDownButton Style="{ThemeResource ButtonRevealStyle}">
    <DropDownButton.Content>
        <StackPanel Orientation="Horizontal">
            <TextBlock
            Text="Email"
            VerticalAlignment="Center"/>
            
            <TextBlock
            x:Name="ChevronTextBlock"
            Grid.Column="1"
            FontFamily="Segoe MDL2 Assets"
            FontSize="12"
            Text="&#xE70D;"
            VerticalAlignment="Center"
            Margin="6,0,0,0"
            AutomationProperties.AccessibilityView="Raw"/>
        </StackPanel>
    </DropDownButton.Content>
    
    <DropDownButton.Flyout>
        <MenuFlyout Placement="Bottom">
            <MenuFlyoutItem Text="Send"/>
            <MenuFlyoutItem Text="Reply"/>
            <MenuFlyoutItem Text="Reply All"/>
        </MenuFlyout>
    </DropDownButton.Flyout>
</DropDownButton>

But @jevansaks, here's a prototype comp for DropDownButtonStyle:

[lhak]

Thank you for the suggestion. I actually need to put this button into a commandbar so I have used some similar code in a retemplated AppBarButton. Still, an official AppBarDropDownButton control would be great (see #172).

[chigy]

@lhak - Sounds like you were able to workaround it for now. And I thank you for opening the issue in the Windows UI Library repo. That's the right place for the feedback. Let me know if there is anything that you still need (other than the support which will be tracked with #172).

[msft-github-bot]

🎉This issue was addressed in #1211, which has now been successfully released as Microsoft.UI.Xaml v2.2.190830001.:tada:

Handy links:

• Release Notes
• Official Nuget Release

[lhak]

It seems that the added style is incomplete and lacks the dropdown indicator. It also does not show up in the intellisense box.

[msft-github-bot]

🎉This issue was addressed in #1316, which has now been successfully released as Microsoft.UI.Xaml v2.2.190917002.:tada:

Handy links:

• Release Notes
• Official Nuget Release

[lhak]

I tested the updated package but I still see some issues (the first two might be limitations of Visual Studio):

• The intellisense context menu in Visual Studio does not offer this as a style for the DropDownButton
• Jumping to the style definition with F12 does not work
• When the control is disabled the text of the button is grayed out, but the dropdown symbol is not

[jevansaks]

Thanks! Yes, the first two are limitations of visual studio. Could you file those via the "send feedback" in VS?

The third one seems like a bug. @chingucoding @kaiguo can you take a look?

[marcelwgn]

I will look into the third bug.

[msft-github-bot]

🎉This issue was addressed in #1316, which has now been successfully released as Microsoft.UI.Xaml v2.3.191007001-prerelease.:tada:

Handy links:

• Release Notes
• Official Nuget Release