Xamarin.Forms - Tooltip as menu

Question

Hey!

I couldn't find it anywhere, so I'm trying this option.

I have an app with frames and when I click on the frame I want a tooltip-like window to come up where the user can select an option. Something like this:

I took a look at Xamarin.Android.Tooltips, but that doesn't seem to be able to handle multiple options to choose from. Are there other packages available which work better for this case?

I hope my question is clear.

Answer 1

Hi GaneshGebhard-8778,

Welcome to our Microsoft Q&A platform!

A workaround is that you can draw a custom tooltip using Path. Then add the tooltip and path to a RelativeLayout.

Here is a simple demo you can refer to.

xaml

<Grid ColumnDefinitions="*,*"  
        RowDefinitions="*,*">  
    <Frame BackgroundColor="Blue">  
        <Frame.GestureRecognizers>  
            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>  
        </Frame.GestureRecognizers>  
    </Frame>  
  
    <RelativeLayout Margin="20" Grid.Column="1" x:Name="relativeLayout" IsVisible="false">  
        <Path Stroke="Black"  
            Aspect="Uniform" Fill="lightgreen"  
            HorizontalOptions="Start"  
                RelativeLayout.XConstraint="0"  
                RelativeLayout.YConstraint="0"  
                RelativeLayout.WidthConstraint="200"  
                RelativeLayout.HeightConstraint="200"   
                >  
            <Path.Data>  
                <PathGeometry>  
                    <PathGeometry.Figures>  
                        <PathFigureCollection>  
                            <PathFigure IsClosed="True"  
                            StartPoint="10,80">  
                                <PathFigure.Segments>  
                                    <PathSegmentCollection>  
                                        <LineSegment Point="30,60" />  
                                        <LineSegment Point="30,0" />  
                                        <LineSegment Point="180,0" />  
                                        <LineSegment Point="180,200" />  
                                        <LineSegment Point="30,200" />  
                                        <LineSegment Point="30,100" />  
  
                                    </PathSegmentCollection>  
                                </PathFigure.Segments>  
                            </PathFigure>  
                        </PathFigureCollection>  
                    </PathGeometry.Figures>  
                </PathGeometry>  
            </Path.Data>  
        </Path>  
  
        <Frame BackgroundColor="Transparent" HasShadow="False"  
                RelativeLayout.XConstraint="25"  
                RelativeLayout.YConstraint="0"  
                RelativeLayout.WidthConstraint="150"  
                RelativeLayout.HeightConstraint="200" >  
            <StackLayout>  
                <Label Text="Choose options"/>  
                <StackLayout Orientation="Horizontal">  
                    <CheckBox/>  
                    <Label Text="A" VerticalTextAlignment="Center"/>  
                </StackLayout>  
                <StackLayout Orientation="Horizontal">  
                    <CheckBox/>  
                    <Label Text="B" VerticalTextAlignment="Center"/>  
                </StackLayout>  
                <StackLayout Orientation="Horizontal">  
                    <CheckBox/>  
                    <Label Text="C" VerticalTextAlignment="Center"/>  
                </StackLayout>  
            </StackLayout>  
        </Frame>  
    </RelativeLayout>  
  
</Grid>  

xaml.cs

private void TapGestureRecognizer_Tapped(object sender, EventArgs e)  
{  
    relativeLayout.IsVisible = !relativeLayout.IsVisible;  
}  

Regards,
Kyle

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.