wpf gradient brush that spans multiple elements - wpf

Question

Suppose there is an element with irregular shape composed of other elements with arbitrary nesting:
<Window.Resources>
<RadialGradientBrush x:Key="brush">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="1" />
</RadialGradientBrush>
</Window.Resources>
<StackPanel Name="element">
<StackPanel.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="10" />
</StackPanel.Effect>
<Rectangle Name="child1" Height="100" Margin="10" Stroke="Black" Fill="{StaticResource brush}" />
<Grid>
<Rectangle Name="child2" Height="100" Margin="10" Stroke="Black" Fill="{StaticResource brush}" />
</Grid>
</StackPanel>
All parts are interactive (i.e a child can be a real control).
How can I fill backgrounds of children with a single radial gradient that spans all of them (should look like as if it is sized to element).
UPDATE: StackPanel has a shadow which should be drawn around children.
One possible solution is to generate gradients with Radius and Origin/Center bound to element's and child's properties with appropriate conversions, but such approach would be rather complex and expensive.

Answer 1

Finally, I went with transformed gradients route except instead of bindings and converters I was able to elegantly solve it by creating background Transformation in ArrangeOverride of child elements and exposing it via dependency property.
Actual RadialGradientBrush binds its Transform to BackgroundTransform by searching for ancestor with matching type.
This assumes that one can modify/wrap child classes which is true in my case. It can be made more flexible with attached properties and a bit more work.
Actual code is in this gist.