WPF Custom Controls

I. ScrollViewer

In the WPF custom control--self-painted article we made a drag rectangle, but did you find that when the rectangle was dragged out of the background, it was generally not visible for the scrollbar area, as shown in the figure:

The most common use of this application in WPF should be the scrollviewer of the controls, so how do we make our controls support ScrollViewer?

First, let's take a look at ScrollViewer fundamentals.

We can see from the diagram above that ScrollViewer is a control that is made up of grid as a container, which includes mainly Scrollcontentpresenter, and two ScrollBar, where ScrollBar is the two we see in the first picture, It is also a composite control composed of multiple controls, where the scrollbar is skipped; look at the scrollcontentpresenter in the red border, you can see our control Pieces Customerrender in the Scrollcontentpresenter, then the position of the control rendering must be controlled by it.

What does this mysterious scrollcontentpresenter do to make us see part of the content? Look at this picture, it's clear.

We can see that Scrollcontentpresenter actually played a masking effect on us, using our control as a background image, moving the background position with ScrollBar, and the visual parts of the control outside the ScrollViewer were cut off. You can overload the Getlayoutclip method to cut the zone as long as the control inherits the UIElement.

protected　override 　Geometry　GetLayoutClip(Size　layoutSlotSize)
{
　　return 　new　RectangleGeometry(new　Rect(base.RenderSize));
}