Create a Transparent Region in a View

PDF for offline use
Related Articles:
Related SDKs:

Let us know how you feel about this

Translation Quality


0/250

This recipe shows how to create a transparent region within a view.

Recipe

The following UIView subclass fills a path transparently, creating a cutout that displays the superview within the fill area of the path (which is a triangle in this case):

public class TransparentRegionView : UIView
{
  public TransparentRegionView ()
  {
    BackgroundColor = UIColor.Clear;
    Opaque = false;
  }

  public override void Draw (CGRect rect)
  {
    base.Draw (rect);

    var gctx = UIGraphics.GetCurrentContext ();

    // setting blend mode to clear and filling with
    // a clear color results in a transparent fill
    gctx.SetFillColor (UIColor.Purple.CGColor);
    gctx.FillRect (rect);

    gctx.SetBlendMode (CGBlendMode.Clear);
    UIColor.Clear.SetColor ();

    // create some cutout geometry
    var path = new CGPath ();   
    path.AddLines(new CGPoint[]{
        new CGPoint(100,200),
        new CGPoint(160,100), 
        new CGPoint(220,200)}); 
    path.CloseSubpath();

    gctx.AddPath(path);
    gctx.DrawPath(CGPathDrawingMode.Fill);  
  }
}

Additional Information

Using CGBlendMode.Clear together with setting a clear color results in the transparent fill, as shown in the example.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.