Menu expander like WhatsApp

Ángel Rubén Valdeolmos Carmona 586 Reputation points
2020-11-28T12:22:12.803+00:00

I am creating an application that has a chat option, I want an option like WhatsApp that shows an expanded menu, I am thinking of doing it with the expander but I do not get the desired result, you also have to take into account that I use for the position when the keyboard pops up, could someone guide me?

 xmlns: android = "clr-namespace: Xamarin.Forms.PlatformConfiguration.AndroidSpecific; assembly = Xamarin.Forms.Core"  
 android: Application.WindowSoftInputModeAdjust = "Resize"  

43417-sin-titulo.png

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,284 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 67,631 Reputation points Microsoft Vendor
    2020-11-30T03:14:48.357+00:00

    Hello,​

    Welcome to our Microsoft Q&A platform!

    Do you want to acheve the result like following GIF?

    43515-searchbar.gif

    If so, you can create an custom ContentView for this needs. I add an searchbar for testing, You can add custom Entry that you want.

       <ContentView xmlns="http://xamarin.com/schemas/2014/forms"   
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                    x:Class="CustomSearcnBar.View1">  
         <ContentView.Content>  
             <StackLayout>  
         
                   <Frame x:Name="myFrame" HeightRequest="200" HorizontalOptions="CenterAndExpand" CornerRadius="20" IsVisible="false">  
                       <Grid >  
                           <Grid.ColumnDefinitions>  
                               <ColumnDefinition Width="*"/>  
                               <ColumnDefinition Width="*"/>  
                               <ColumnDefinition Width="*"/>  
                           </Grid.ColumnDefinitions>  
                           <Grid.RowDefinitions>  
                               <RowDefinition Height="*" />  
                               <RowDefinition Height="*" />  
                           </Grid.RowDefinitions>  
         
         
                           <Image Grid.Column="0" Grid.Row="0"  Source="power.png"></Image>  
                           <Image Grid.Column="1" Grid.Row="0"  Source="power.png"></Image>  
                           <Image Grid.Column="2" Grid.Row="0"  Source="power.png"></Image>  
                           <Image Grid.Column="0" Grid.Row="1"  Source="power.png"></Image>  
                           <Image Grid.Column="1" Grid.Row="1"  Source="power.png"></Image>  
                           <Image Grid.Column="2" Grid.Row="1"  Source="power.png"></Image>  
         
                       </Grid>  
                   </Frame>  
                   <Grid HeightRequest="35">  
                       <Grid.ColumnDefinitions>  
                           <ColumnDefinition Width="8*"/>  
                           <ColumnDefinition Width="2*"/>  
                       </Grid.ColumnDefinitions>  
         
                       <SearchBar Grid.Column="0" Placeholder="Search items..." />  
                       <Image Grid.Column="1" Source="hamburger.png">  
                           <Image.GestureRecognizers>  
                               <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>  
                           </Image.GestureRecognizers>  
                       </Image>  
                   </Grid>  
               </StackLayout>  
         </ContentView.Content>  
       </ContentView>  
    

    Here is contentView's background code. When you click the Image, the expander's view will appear. When click it again, this view will be hide.

       public partial class View1 : ContentView  
           {  
               public View1()  
               {  
                   InitializeComponent();  
               }  
         
               private void TapGestureRecognizer_Tapped(object sender, EventArgs e)  
               {  
                   myFrame.IsVisible = !myFrame.IsVisible;  
               }  
           }  
    

    Then We can use it in the ContentPage.

       <StackLayout  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">  
               <Label Text="Testting"></Label>  
               <Label Text="Testting"></Label>  
               <Label Text="Testting"></Label>  
               <Label Text="Testting"></Label>  
               <Label Text="Testting"></Label>  
               <Label Text="Testting"></Label>  
         
               <customsearcnbar:View1 VerticalOptions="EndAndExpand"></customsearcnbar:View1>  
           </StackLayout>  
    

    Best Regards,

    Leon Lu


    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.

    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful