Unable to automatically apply width using SfShadow

Question

My original page markup looks similar to this:

<Grid>

</Grid>

In this case, my nested grid fills the entire width of the root parent grid with just 32 pixels of left and right margins. The parent grid is basically the size of the screen and adjusts properly as the window is resized. Everything looks as I want at this point.

Next, I want to add a shadow around this inner grid. So, I changed this markup to:

<Grid>

<sf:Shadow Margin="32,0,32,0" Color="Black" BlurRadius="8" OffsetX="0" OffsetY="0">

</sf:Shadow>

</Grid>

While the shadow appears correctly, my inner grid no longer expands to the width of its parent grid. Rather, it displays (unexpanded) in the center of the parent grid.

I suspect this happens because I changed the inner grid's parent from the parent grid to the new shadow element. However, the shadow seems to conform to its child (the inner grid) and not to its parent (the parent grid), which leaves me unable to auto-size my inner grid relative to the parent grid.

How do I get myself out of this situation? Thanks.

Ben Callister · Answer

Just thinking here, but... I suspect the issue is that the SfShadow element reverses the whole flow of Xaml property inheritance. It conforms to its child, while everything else in Xaml conforms to its parent. This breaks the normal Xaml development features.

I suspect this is why other APIs (i.e. Windows Community Toolkit's AttachedDropShadow) have their shadow elements as a CHILD of the element that needs the shadow, not as a parent.

If this is true, this could be a major limitation to the developer.

Kayalvizhi Sivashanmugam · Answer

Hi Ben Callister,If you want the child grid to fill the entire width, set HorizontalContentAlignment and VerticalContentAlignment to Stretch, as shown in the code below.