InkToolbarCustomToolButton Does not look the same as built-in InkToolbarToolButtons

[TheJoeFin]

Describe the bug The InkToolbarCustomToolButtondoes not have the same UI as the built-in InkToolBarToolButtons

Steps to reproduce the bug Steps to reproduce the behavior:

Add a InkToolbarCustomToolButton to an InkToolbar. Run app Click on the InkToolbarCustomToolButton

Expected behavior Expect the custom button (lasso tool) to look like the built-in tool (eraser tool)

Screenshots Here is a .gif showing the missing the same UI which is present on the other toolbars, the highlighted background and the chevron at the bottom.

Here is the code from the above .gif

<InkToolbar
                    Name="mainInkToolBar"
                    Grid.Column="0"
                    HorizontalAlignment="Right"
                    Background="Transparent"
                    InitialControls="None">
                    <InkToolbarEraserButton x:Name="mainInkToolbarEraser" Background="Transparent" />
                    <InkToolbarCustomToolButton
                        Name="SelectInkBTN"
                        x:Uid="Select"
                        Background="Transparent"
                        Click="SelectInkBTN_Click"
                        ToolTipService.ToolTip="Select">
                        <FontIcon Glyph="&#xEF20;" />
                        <InkToolbarCustomToolButton.ConfigurationContent>
                            <MenuFlyoutItem
                                Name="ClearInkSelction"
                                x:Uid="Clear_Selection"
                                Click="ClearInkSelction_Click">
                                <MenuFlyoutItem.Icon>
                                    <SymbolIcon Symbol="ClearSelection" />
                                </MenuFlyoutItem.Icon>
                            </MenuFlyoutItem>
                        </InkToolbarCustomToolButton.ConfigurationContent>
                    </InkToolbarCustomToolButton>
                    <InkToolbarCustomToggleButton
                        Name="TouchMouseInkToggleBTN"
                        x:Uid="DrawWithTouchCursor"
                        Background="Transparent"
                        Click="TouchMouseInkToggleBTN_Click"
                        IsChecked="{x:Bind TouchDrawChecked, Mode=TwoWay}">
                        <SymbolIcon Symbol="TouchPointer" />
                    </InkToolbarCustomToggleButton>
                    <InkToolbarCustomToggleButton
                        x:Name="ImageToggleBTN"
                        Background="Transparent"
                        Click="ImageToggleBTN_Click"
                        IsChecked="{x:Bind ImageBTNChecked, Mode=TwoWay}">
                        <fluent:FluentIconElement Symbol="Image24" />
                    </InkToolbarCustomToggleButton>
                </InkToolbar>

Version Info

NuGet package version: [Microsoft.UI.Xaml 2.7.0-prerelease.210827001]

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
21H1 Update (19043.1081)	Yes
October 2020 Update (19042)
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

[StephenLPeters]

Looks like we didn't provide a style override for that type in Winui2 https://github.com/microsoft/microsoft-ui-xaml/blob/main/dev/CommonStyles/InkToolbar_themeresources.xaml. You could probably construct a style of your own that includes the missing elements.