How to apply DesktopAcrylic to Flyouts

[harvinders]

I understand ComboBox and other controls have DesktopAcrylicBackdrop for their Flyouts since WinAppSDK 1.4. However, I am not able to see the effect when I apply it to Flyouts as shown below. I read somewhere that ShouldConstrainToRootBounds="False" is required, but that also did not work.

What is it that I am missing? I am on Win 10 21H2.

        <HyperlinkButton x:Name="PersonButton">
            <Grid ColumnDefinitions="Auto,Auto" ColumnSpacing="{StaticResource SmallSpacing}">
                <TextBlock x:Name="Name" Grid.Column="0" Style="{ThemeResource CaptionTextBlockStyle}" />
                <PersonPicture x:Name="PersonPicture" Grid.Column="1" Height="18" AutomationProperties.AccessibilityView="Control" />
                <Ellipse x:Name="Ellipse" Grid.Column="1" Width="18" Height="18"  StrokeThickness="1" Stroke="Transparent" />
            </Grid>
            <FlyoutBase.AttachedFlyout>
                <Flyout x:Name="SigninStatusFlyout"  Placement="BottomEdgeAlignedRight"  AllowFocusOnInteraction="true" ShouldConstrainToRootBounds="False" >
                    <FlyoutBase.SystemBackdrop>
                        <DesktopAcrylicBackdrop/>
                    </FlyoutBase.SystemBackdrop>
                    <Grid ColumnSpacing="{StaticResource MediumSpacing}" Background="Transparent" RowSpacing="{StaticResource XXSmallSpacing}" MaxWidth="400" MinHeight="700">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <PersonPicture x:Name="PersonPhoto" Grid.RowSpan="5" VerticalAlignment="Top"  Height="48" />
                        <TextBlock x:Name="PersonName" Grid.Column="1" Grid.Row="0" Style="{ThemeResource BodyLargeTextBlockStyle}" FontWeight="SemiBold" />
                        <TextBlock x:Name="PersonEmail" Grid.Column="1" Grid.Row="1" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                        <TextBlock x:Name="PersonOrg" Grid.Column="1" Grid.Row="2" TextWrapping="WrapWholeWords"  Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                        <TextBlock x:Name="PersonRegion" Grid.Column="1" Grid.Row="3" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    </Grid>
                </Flyout>
            </FlyoutBase.AttachedFlyout>
        </HyperlinkButton>

[Gaoyifei1011]

I understand ComboBox and other controls have DesktopAcrylicBackdrop for their Flyouts since WinAppSDK 1.4. However, I am not able to see the effect when I apply it to Flyouts as shown below. I read somewhere that ShouldConstrainToRootBounds="False" is required, but that also did not work.

What is it that I am missing? I am on Win 10 21H2.

        <HyperlinkButton x:Name="PersonButton">
            <Grid ColumnDefinitions="Auto,Auto" ColumnSpacing="{StaticResource SmallSpacing}">
                <TextBlock x:Name="Name" Grid.Column="0" Style="{ThemeResource CaptionTextBlockStyle}" />
                <PersonPicture x:Name="PersonPicture" Grid.Column="1" Height="18" AutomationProperties.AccessibilityView="Control" />
                <Ellipse x:Name="Ellipse" Grid.Column="1" Width="18" Height="18"  StrokeThickness="1" Stroke="Transparent" />
            </Grid>
            <FlyoutBase.AttachedFlyout>
                <Flyout x:Name="SigninStatusFlyout"  Placement="BottomEdgeAlignedRight"  AllowFocusOnInteraction="true" ShouldConstrainToRootBounds="False" >
                    <FlyoutBase.SystemBackdrop>
                        <DesktopAcrylicBackdrop/>
                    </FlyoutBase.SystemBackdrop>
                    <Grid ColumnSpacing="{StaticResource MediumSpacing}" Background="Transparent" RowSpacing="{StaticResource XXSmallSpacing}" MaxWidth="400" MinHeight="700">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <PersonPicture x:Name="PersonPhoto" Grid.RowSpan="5" VerticalAlignment="Top"  Height="48" />
                        <TextBlock x:Name="PersonName" Grid.Column="1" Grid.Row="0" Style="{ThemeResource BodyLargeTextBlockStyle}" FontWeight="SemiBold" />
                        <TextBlock x:Name="PersonEmail" Grid.Column="1" Grid.Row="1" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                        <TextBlock x:Name="PersonOrg" Grid.Column="1" Grid.Row="2" TextWrapping="WrapWholeWords"  Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                        <TextBlock x:Name="PersonRegion" Grid.Column="1" Grid.Row="3" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    </Grid>
                </Flyout>
            </FlyoutBase.AttachedFlyout>
        </HyperlinkButton>

you need to modify flyoutpresenterstyle，flyoutpresenter background transparent

[harvinders]

Can we do the same for teaching tips?

[Gaoyifei1011]

Can we do the same for teaching tips?

In Winui3, the teachingTip control does not appear to have the SystemBackdrop property, so it should not be set