Возникли трудности с использованием Z-Index в WPF

Я следил за несколькими примерами, пытаясь наложить прямоугольник на объект WebBrowser:

Вот ссылка на пример MSDN. (я заставил его работать)

Проблема со слоями при использовании Z-Index

Вот код, который я пытаюсь заставить работать:

<Grid>
    <Canvas Margin="2,4,0,-450" >
        <Rectangle Height="452" Canvas.ZIndex="1000" Name="rectangle1" Stroke="Black" Width="524" Opacity=".5" Fill="#8CBABABA" Canvas.Top="-7" Canvas.Left="-3" />
        <WebBrowser Name="mapBrowser" Canvas.ZIndex="999" Margin="5,5,5,5"  Height="452" Width="516" Canvas.Top="-11" />
    </Canvas>
</Grid>

Я пытаюсь сделать WebBrowser затененным, заставляя прямоугольник отображаться поверх него. Я тоже отключу.

Может ли кто-нибудь указать на то, что я делаю неправильно?