Flyout shadow display not right while set the CornerRadius

[h82258652]

<Grid>
    <Button HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="Test">
        <Button.Flyout>
            <Flyout>
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="Background"
                                Value="White" />
                        <Setter Property="CornerRadius"
                                Value="20" />
                        <Setter Property="Padding"
                                Value="0" />
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <Border>
                    <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Text="Shadow Test" />
                </Border>
            </Flyout>
        </Button.Flyout>
    </Button>
</Grid>

[YuliKl]

@h82258652, as the Note on keyboard focus rect and shadow in the Corner Radius How-To document PR states, this isn't really a supported scenario.

[mdtauk]

I think it's obvious that ThemeShadow is cheating when it is drawn, but there perhaps could be an alternative type of shadow, which actually either reflects the exact shape of the casting element, or at the very least, uses the CornerRadius to alter the shape of the shadow.

[h82258652]

@h82258652, as the Note on keyboard focus rect and shadow in the Corner Radius How-To document PR states, this isn't really a supported scenario.

Thanks for the response. I change my app SDK version from 17763 to 18362 and found this problem. Is any way to solve this problem now?

[chigy]

@h82258652 , can you tell me your scenario why you are creating a flyout that has such a round shape? Are you trying to make your flyout sized to a content or something?

[h82258652]

@chigy
I want to use the same design with other platforms that's why I need a round shape flyout.
I didn't try, I just change my SDK version as I mentioned above.

[chigy]

I want to use the same design with other platforms that's why I need a round shape flyout.

@h82258652 , curious... Could you share with us why you want to use the same design with other platforms? I'm not saying it is good or bad, we are trying to understand the cross-platform wishes and desires of developers. For Fluent, we established that app should "feel native to the platform" which makes using the same design across sort of go against that principle. For Windows, we are going with 4px rounded flyouts for more coherent experience at least for now.

At this point in time, a solution for you is to either not make your flyout so round or turn off shadow. To turn off shadow, refer to this doc. https://docs.microsoft.com/en-us/windows/uwp/design/layout/depth-shadow#disabling-default-themeshadow-on-custom-flyout-controls

[chigy]

@h82258652 , as I mentioned, at this point in time, unless you want to make the flyout less rounded, the option is to turn off shadow and I've provided the link above.