How to hide WPF Grid Overflow (like CSS overflow:hidden)

martinyyyy picture martinyyyy · Aug 1, 2011 · Viewed 12.1k times · Source

I'm currently creating a metro styled app. Because of this I need to extend my client area out of my window to draw the shadow. The problem now is that I have a button set to Margin="0,0,15,15" and of course it draws itself also in this shadow area. How can I hide this? In CSS I would just apply overflow:hidden to the "Content" or the UserControl.

problem

The basic WPF structure is like this:

<Grid x:Name="LayoutRoot" SnapsToDevicePixels="True" Margin="15" Background="White">
    <Grid.Effect>
        <DropShadowEffect ShadowDepth="0" BlurRadius="15" Direction="470"/>
    </Grid.Effect>
        <Grid x:Name="Content">
        <UserControl></UserControl> // This is where the arrow button is with Margin="0,0,15,15"
    </Grid>
</Grid>

Answer

H.B. picture H.B. · Aug 1, 2011

Normally you can use some container and set its ClipToBounds to true.