How to set ShadowDepth or Elevation for Popupbox in material design WPF?

[VahidEra]

I have a material design Popupbox in my project, And I want to change its Shadow, but unfortunately I can't do it in every way I tried, do I have any chance to do this?
This is my cod:

               <materialDesign:PopupBox  
                                            
                            materialDesign:RippleAssist.RippleSizeMultiplier="0.6"
                            materialDesign:ElevationAssist.Elevation="Dp24" 
                            x:Name="P"  
                            PopupUniformCornerRadius ="5" 
                            PlacementMode            ="TopAndAlignRightEdges" 
                            HorizontalAlignment      ="Right" 
                            Height                   ="25" 
                            Margin                   ="0,35,20,0" 
                            VerticalAlignment        ="Top" 
                            Panel.ZIndex             ="1000" 
                            Width                    ="25">
                        
                        <StackPanel   HorizontalAlignment="Left">

                            <Grid Height ="40"  
                                  Width  ="250" VerticalAlignment="Center">
                                <Label         
                                    Content             ="Lock or Unlock player"                                                
                                    FontFamily          ="Sahel"                                     
                                    HorizontalAlignment ="Left" 
                                    VerticalAlignment   ="Center" 
                                    Margin              ="8,0,0,0" 
                                    FontSize            ="12"/>



                                <ToggleButton  
                                    x:Name                          ="tgLock"
                                    Style                           ="{StaticResource MaterialDesignSwitchToggleButton}"
                                    ToolTip                         ="Lock/Unlock" 
                                    ToolTipService.InitialShowDelay ="100" 
                                    Cursor                          ="Hand" 
                                    HorizontalAlignment             ="Right" 
                                    VerticalAlignment               ="Center" 
                                    Margin                          ="0,0,10,0">


                                    <materialDesign:ToggleButtonAssist.SwitchTrackOnBackground>
                                        <SolidColorBrush
                                               Color ="DarkSlateGray">
                                        </SolidColorBrush>
                                    </materialDesign:ToggleButtonAssist.SwitchTrackOnBackground>
                                    <materialDesign:ToggleButtonAssist.SwitchTrackOffBackground>
                                        <SolidColorBrush 
                                                Color ="Gray" >
                                        </SolidColorBrush>
                                    </materialDesign:ToggleButtonAssist.SwitchTrackOffBackground>
                                </ToggleButton>
                            </Grid>

                            <Separator></Separator>
                            <Button 
                                    x:Name                     ="itmCenterLocation"
                                    Content                    ="Set location of player to center of screen"                                     
                                    Height                     ="50"
                                    FontFamily                 ="Sahel" 
                                    FontSize                   ="12">

                            </Button>
                            <Grid  Height ="40"  
                                  Width  ="250" VerticalAlignment="Center">

                                <Label         
                                    Content             ="Replay"                                                
                                    FontFamily          ="Sahel" 
                                    HorizontalAlignment ="Left" 
                                    VerticalAlignment   ="Center" 
                                    Margin              ="8,0,0,0" 
                                    FontSize            ="12"/>
                                <ToggleButton  
                                    x:Name                          ="tgReplay"
                                    Style                           ="{StaticResource MaterialDesignSwitchToggleButton}"
                                    ToolTip                         ="OFF/ON" 
                                    ToolTipService.InitialShowDelay ="100" 
                                    Cursor                          ="Hand" 
                                    HorizontalAlignment             ="Right" 
                                    VerticalAlignment               ="Center" 
                                    Margin                          ="0,0,10,0">


                                    <materialDesign:ToggleButtonAssist.SwitchTrackOnBackground>
                                        <SolidColorBrush
                                               Color ="DarkSlateGray">
                                        </SolidColorBrush>
                                    </materialDesign:ToggleButtonAssist.SwitchTrackOnBackground>
                                    <materialDesign:ToggleButtonAssist.SwitchTrackOffBackground>
                                        <SolidColorBrush 
                                                Color ="Gray" >
                                        </SolidColorBrush>
                                    </materialDesign:ToggleButtonAssist.SwitchTrackOffBackground>
                                </ToggleButton>
                                
                            </Grid >

                        </StackPanel>
                       
                    </materialDesign:PopupBox>

Of course, I want to do this for my context menu as well, but unfortunately I didn't succeed

[nicolaihenriksen]

@VahidEra Based on your example, I assume you're talking about the ("default style") PopupBox similar to this one from the demo application?

And if so, you are indeed correct that changing ElevationAssist.Elevation has no effect. I believe this is a bug and something that should be fixed. The reason it happens is quite straight-forward actually. The default PopupBox internally uses a Card which has ElevationAssist.Elevation=Dp1 by default. I believe the value applied on the PopupBox should be applied to the internal card as well. So basically this line:

wpf:ElevationAssist.Elevation="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ElevationAssist.Elevation)}"

is missing in this nested Card element.

However, this does present an issue where I will need some input from @Keboo: The nested Card has a hard-coded margin of 5. This works fine with the default elevation of Dp1 which the card uses by default, but once we open up for overriding it, that margin needs to be large enough to contain the drop shadow produced by the selected elevation value; unless we can use another method to avoid clipping the drop shadow. Another thing is that this margin actually offsets the PopupBox, so if the users chooses a large elevation value and we adjust the margin accordingly, then it may not open where you would expect it to. So there is possibly some logic around calculating the margin and also placing the PopupBox (possibly using negative margins?) that needs to be added. What are your thoughts?

Regarding the ContextMenu. That seems to be implemented a bit differently, and does not currently seem to have a way to override the elevation. See here. In particular, line 322. As a side note, this also seems to suffer from the "margin issue" mentioned above (clipping the drop shadow if changed to something that requires more space).

[VahidEra]

@nicolaihenriksen Dear Nicolai,
Yes, I mean exactly the same issue that you have fully explained, so if I understood correctly, the opportunity of doing this is not possible at the moment until the bug of this issue is fixed. Thank you very much for your help, dear friend.

[Keboo]

To answer the question about the Margin from above. I think since PopupBox is our own control, I would propose adding a new DependencyProperty to it. Perhaps called PopupMargin with a default value for this set in the style to 5 (just to match prior behavior). Then use that as the Margin property. I think this way it puts the focus back on the caller, so that if they want to change the elevation or margin, they can and will be able to do whatever makes sense in their app.