How to remove shadow of ContentDialog in UWP?

Dart 21 Reputation points
2021-01-05T07:37:41.563+00:00

I want to remove shadow of ContentDialog in my UWP application, I found document on https://learn.microsoft.com/en-us/windows/uwp/design/layout/depth-shadow. In the section "Disabling default ThemeShadow on custom Flyout controls", I can see how to remove shadow of controls based on Flyout, but it didn't offer any method to remove shadow of other control, such as ContentDialog. When debugging in Visual Studio, I found the Shadow Property of Border Control which named "BackgroundElement" was set to "ThemeShadow" in "Live Property Explorer", then I Reset this property, although the shadow was removed, but the ContentDialog in my app disappeared(or I could't see it from my app). I also modify this property in Style in App.xaml, which like this: <Border x:Name="BackgroundElement" Shadow="{x:Null}"> but it also did't work.

Developer technologies | Universal Windows Platform (UWP)
0 comments No comments
{count} votes

Accepted answer
  1. Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,866 Reputation points
    2021-01-05T09:12:04.913+00:00

    How to remove shadow of ContentDialog in UWP?

    Please check Z-depth and shadow document.

    ThemeShadow automatically casts shadows when applied to any XAML element in a Popup. It will cast shadows on the app background content behind it and any other open Popups below it.

    If you want to disable it, the better way is that set Container a new Translation in loaded event, and make z value as low enough.

    For example: (place the style of ContentDialog in the page resource and give it new name MyContentDialog ).

    var diaog = new ContentDialog() { Title = "hello world!",Style= (Style)Resources["MyContentDialog"] ,SecondaryButtonText="ok"};    
    await diaog.ShowAsync();  
    

    Set the new Translation.

    private void Container_Loaded(object sender, RoutedEventArgs e)  
    {  
      var border = sender as Border;  
      border.Translation = new Vector3(0, 0, -100);  
    }  
    
    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.