question

GaneshGebhard-8778 avatar image
0 Votes"
GaneshGebhard-8778 asked KyleWang-MSFT commented

Xamarin.Forms - Tooltip as menu

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:

135510-picture1.png

135662-picture2.png

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.

dotnet-xamarinforms
picture1.png (83.4 KiB)
picture2.png (83.5 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

KyleWang-MSFT avatar image
0 Votes"
KyleWang-MSFT answered KyleWang-MSFT commented

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.

· 7
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Kyle!

This seems like a nice option, but I cannot get it working since this function would be part of a collectionview. So the code als ends up under the collectionview itself. When I do that, the C# code is not able to find the name "relativeLayout". Do you know how to solve this?

0 Votes 0 ·

I have a reduced example code here:

find the name "relativeLayout". Do you know how to solve this?

 <renderedViews:HorizontalListView.ItemTemplate>
                         <DataTemplate>
                             <renderedViews:DraggableViewCell>
                                 <Frame>
                                     <Grid>
                                         <Frame>
                                             <Grid>
    
                                                 [CODE]
    
                                             </Grid>
    
                                             <Frame.GestureRecognizers>
                                                 <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                                             </Frame.GestureRecognizers>
                                                
                                         </Frame>
    
                                         <RelativeLayout>
    
                                         </RelativeLayout>
    
                                     </Grid>
                                 </Frame>
                             </renderedViews:DraggableViewCell>
                         </DataTemplate>
                     </renderedViews:HorizontalListView.ItemTemplate>


[1]: /answers/storage/attachments/136377-image.png

0 Votes 0 ·
image.png (85.3 KiB)
KyleWang-MSFT avatar image KyleWang-MSFT GaneshGebhard-8778 ·

@GaneshGebhard-8778 You can create a new Content View file and set it as the DataTemplate of CollectionView.

View1.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="tooltiptest.View1">
   <ContentView.Content>
         <StackLayout>
             <Label Text="{Binding .}" />
             <Grid ColumnDefinitions="*,*"
         RowDefinitions="*,*">
             ...
             </Grid>
         </StackLayout>
     </ContentView.Content>
 </ContentView>

MainPage.xaml

 <CollectionView ItemsSource="{Binding SourceList}">
     <CollectionView.ItemTemplate>
         <DataTemplate>
             <local:View1/>
         </DataTemplate>
     </CollectionView.ItemTemplate>
 </CollectionView>
0 Votes 0 ·

I've tried several things, but I cannot get it to work for some reason. I have a demo app for this, but I'm not allowed to send it here because it's a zip-file.

0 Votes 0 ·
Show more comments