Share via

Using Clips

  • Article

The Clip view item is used for preventing drawing outside of the parent's constraints. It applies a gradient fade (horizontal or vertical) to the edge of a view item's bounds. Specify a fade size that is non-zero to enable clipping.

The example below shows a Clip view item. The MinimumSize and MaximumSize values are the same, indicating the clip must be exactly that size. If a layout type is not defined on the Clip element, the child follows the same constraints as the Clip element. The Padding property below allows the child to exceed the MaximumSize, while the parent is clipped to the size specified by the MinimumSize and MaximumSize properties.

An example of a Clip view item.

    <Content>
      <ColorFill Content="Blue">
        <Children>
          
          <Clip FadeSize="25" MinimumSize="100,100" MaximumSize="100,100" Padding="-100,-100,-100,-100">

            <Children>
              <ColorFill Content="Silver" />
            </Children>
            
          </Clip>
        </Children>
      </ColorFill>

    </Content>

Sample Explorer

  • View Items – Clip > all samples

See Also