Question

I have an expander defined as such;

<Canvas Panel.ZIndex="99">
 <Expander HorizontalAlignment="Left" VerticalAlignment="Top">
  <StackPanel Background="White">
    <TextBlock>Some Stuff in the Expander</TextBlock>
   </StackPanel>
 </Expander>
</Canvas>

This allows for the expander to draw over other content. The problem I’m having is when the content under the expander is adorned (in my case with a red border indicating a user input error) the adorner always bleeds through the expander.

Answer 1

Wrap the other controls in an AdornerDecorator by doing something like this:

<Grid>
    <Canvas Panel.ZIndex="99">
        <Expander HorizontalAlignment="Left" VerticalAlignment="Top">
            <StackPanel Background="White">
                <TextBlock>Some Stuff in the Expander</TextBlock>
            </StackPanel>
        </Expander>
    </Canvas>
    <AdornerDecorator>
        <!-- Other content here -->
        <StackPanel>
            <TextBox Text="{Binding Foo, ValidatesOnDataErrors=True}"/>
        </StackPanel>
    </AdornerDecorator>
</Grid>

By default, the only AdornerDecorator is the one created by the Window. Adorners will render in that layer, which is in front of all the Window’s content. If you wrap the other elements in an AdornerDecorator it will create a new AdornerLayer for them to render in. Placing the Canvas at a higher ZIndex than the AdornerDecorator will cause the Canvas to render in front of the AdornerLayer.