Image Overlay

Lay a design picture over your app. Line it up with your screen. Then fade it to spot what is off.

Set up

Add this call beside UseBuoy in your app setup. Builder calls must come before builder.Build(). They use using Buoy.Maui;. Keep Buoy code in Debug guards.

builder.UseBuoyImageOverlay();

builder.UseBuoyImageOverlay();

Tag the views to match

Give a view an AutomationId that starts with image-target:. The words after it are the name you see in the list.

<Border AutomationId="image-target:LoginCard">
    <Label Text="Welcome back" />
</Border>

<Border AutomationId="image-target:LoginCard">
    <Label Text="Welcome back" />
</Border>

Buoy only looks at ids with that start. Your other AutomationId values stay as they are. It also skips views that are hidden.

Pick a mode

Component Match finds each tagged view on the screen. Tap one to pin the picture to it. The picture is sized to fit the view's width.

Turn on Auto Track to follow the view. Buoy checks where it is on each frame. So the picture stays on it as you scroll.

Free Placement puts the picture in the middle of the screen. Drag it to move it. Drag a corner dot to make it bigger or smaller. It keeps its shape.

Load a picture

• Paste from Clipboard uses a picture you copied. If you copied a web address, it goes in the box.
• Or type a web address and tap Load.

Tune it

• Opacity fades the picture in or out.
• Scale makes it bigger or smaller.
• Offset X and Offset Y nudge it a few points.
• Flip turns it left to right or top to bottom.
• Show Outline draws a dashed box on the view.
• Lock Position stops the picture from moving. Taps then go through to your app.
• Reset Settings puts the fit and fade back.
• Remeasure finds the view again.

The power button hides the picture. The trash button clears it all.

Buoy's windows stay on top of the picture. So you can always reach the menu.

See all MAUI tools.