Arrow Overlay Control¶

The Arrow Overlay is a flexible control with a simple to use API.

This control affords developers an elegant way to highlight potentially hard-to-discover features of an application or as an informational tool-tip that exposes more details about important features of the UI.

ArrowOverlayView

Properties¶

OverlayBackgroundColor - Color¶

Gets or sets the color of the overlay background.

ShadowColor - Color¶

Gets or sets the color of the shadow.

ShadowLocation - Point¶

Gets or sets the shadow location using a simple x, y Point system.

ShadowBlurAmount - Color¶

Gets or sets the shadow blur amount.

CornerRadius - double¶

Gets or sets the corner radius. This property rounds the corner of the control.

A CornerRadius of 10:

Corner10

A CornerRadius of 1:

Corner1

ArrowPosition - ArrowOverlayPosition¶

Gets or sets the arrow position. This controls where the arrow will appear along the edge of the control, and is accessed via an enum ArrowOverlayPosition with the following properties:

public enum ArrowOverlayPosition {
    TopLeft,
    TopCenter,
    TopRight,
    RightTop,
    RightCenter,
    RightBottom,
    BottomRight,
    BottomCenter,
    BottomLeft,
    LeftBottom,
    LeftCenter,
    LeftTop
}

An ArrowPosition of TopLeft:

TopLeft

An ArrowPosition of BottomCenter:

TopLeft

ArrowSize - Size¶

Gets or sets the size of the arrow.

Inset - Thickness¶

Gets or sets the inset. The inset property defines an inset or margin between the arrow overlay and the parent container.

Text - string¶

Gets or sets the text label.

FontSize - double¶

Gets or sets the font size of the label. Default is 14d.

FontColor - Color¶

Gets or sets the font color of the label. Default is White.

TextAlignment - TextAlignment¶

Gets or sets the text alignment. Can be Start, Center or End. Default is Center.

Typeface - SKTypeface¶

Gets or sets the typeface.

AdjustFontSizeToFixMax - bool¶

Gets or sets a value that determines whether or not the maximum font size is used to fit the area of the view.

Example Usage¶

Xaml¶

<aurora:ArrowOverlayView x:Name="ControlTwo" HeightRequest="88"
    ArrowPosition="TopCenter" 
    CornerRadius="0" ShadowColor="Transparent" 
    ShadowLocation="0,0" OverlayBackgroundColor="Fuchsia">
    <ArrowOverlayView.ArrowSize Width="60" Height="60" />
</aurora:ArrowOverlayView>

C#¶

var overlay = new Aurora.Controls.ArrowOverlayView
{
    HeightRequest = 80,
    ArrowPosition = Aurora.Controls.ArrowOverlayPosition.TopLeft,
    CornerRadius = 0,
    ShadowColor = Color.Transparent,
    ShadowLocation = new Point(0, 0),
    OverlayBackgroundColor = Color.Fuchsia,
    ArrowSize = new Size(60, 60)
};