Why do my panels clip all the way around the panel when made smaller than the explicit size?

Question

Probably a confusing question title.

The Grid with the Red Rectangle is an example of how it should look.

The Grid with the Blue Rectangle (not appearing in

Answer 1

There are three things that go into to determining how something clips. The first two are ClipToBounds and Clip, but the third is a little more annoying and that is GetLayoutClip.

By default, for UIElement the GetLayoutClip method will return either null or a RectangleGeometry the same size as the element, depending on the ClipToBounds property. FrameworkElement, and it's derivations, are much more complex though. Take a look in Reflector/ILSpy and you will see what I mean.

You can override this behavior though. If you use something like the following as your Grid for the blue rectangle, then it will no longer be clipped:

public class MyGrid : Grid {
    protected override Geometry GetLayoutClip(Size layoutSlotSize) {
        return null;
    }
}

There is a great blog post on this here.