Skip to content

Popover.md

Latest commit

 

History

History
101 lines (84 loc) · 2.94 KB

Popover.md

File metadata and controls

101 lines (84 loc) · 2.94 KB

Popover

In order to use the control, you need to call the UseSimpleToolkit() extension method in your MauiProgram.cs file:

builder.UseSimpleToolkit();

Popover allows you to display custom popovers (flyouts) anchored to any control:

<Button
    VerticalOptions="Center" HorizontalOptions="Center"
    Clicked="ButtonClicked"
    Text="Show popover"
    Background="Orange">
    <simpleCore:Popover.AttachedPopover>
        <simpleCore:Popover>
            <Border
                Background="DarkOrange">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="6"/>
                </Border.StrokeShape>

                <VerticalStackLayout Padding="12,10" Spacing="10">
                    <simpleCore:Icon
                        Source="star.png" TintColor="White"
                        VerticalOptions="Center"
                        HeightRequest="25" WidthRequest="25"/>
                    <Label
                        Text="Star this repo" TextColor="White"
                        FontAttributes="Bold"
                        VerticalOptions="Center"/>
                </VerticalStackLayout>
            </Border>
        </simpleCore:Popover>
    </simpleCore:Popover.AttachedPopover>
</Button>

Code behind:

private void ButtonClicked(object sender, EventArgs e)
{
    var button = sender as Button;

    button.ShowAttachedPopover();
}

Output:

Android

iOS

Windows

Implementation details

The Popover class is inherited from the .NET MAUI Element class. Popover offers these properties and methods in addition to Elements properties and methods:

  • Content - the popover content of type View
  • Show() - shows the popover anchored to a view you pass as a parameter
  • Hide() - hides the popover

Use of the methods mentioned above:

popover.Show(anchorView);
popover.Hide();

Popover can be attached to a view using the AttachedPopover attached property. Such a popover can be displayed or hidden (dismissed) by calling the ShowAttachedPopover() and HideAttachedPopover() extension methods on the view:

button.ShowAttachedPopover();
button.HideAttachedPopover();