Display content inside control when used negative margin.

Question

For example I have 2 Grids, like this:

<Grid  Height="200" Width="200" Background="Red">
    <Grid HorizontalAlignment="Left" Height="100" Width="100" Background="Blue" Margin="-30,0,0,0" />
</Grid>

And result looks:

How I can create that content will display only inside control when used negative margin?
Like this:

Answer 1

You can use ClipToBounds="True" for Grid or other container of elements.

  <Grid>  
    <Grid  Height="200" Width="200" Background="Red" ClipToBounds="True">
        <Grid HorizontalAlignment="Left" Height="100" Width="100" Background="Blue" Margin="-30,0,0,0" />
    </Grid>
  </Grid>