Post
Ask Question

Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms

Introduction

 
Xamarin is a platform that allows us to create a multi-platform app for Android, Windows, or iOS through a single integrated development environment (IDE). And with Xamarin.forms, the interface design for all three platforms can be accomplished within its XAML-based standard, native user-interface control.
 
Step 1 
 
Open Visual Studio and go to New Project >> Installed >> Visual C# >> Cross-Platform.
 
Select the Cross-Platform app, then give your project a name and location.
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Step 2 
 
Open Solution Explorer >> Project Name(Portable) >> App.xaml.cs >> double-click will open the design view of this page. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
The Code is given below.
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
C# Code 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5.   
  6. using Xamarin.Forms;  
  7.   
  8. namespace FloatMenuItem  
  9. {  
  10.     public partial class App : Application  
  11.     {  
  12.         public App()  
  13.         {  
  14.             InitializeComponent();  
  15.   
  16.             MainPage = new NavigationPage(new MainPage());  
  17.         }  
  18.   
  19.         protected override void OnStart()  
  20.         {  
  21.             // Handle when your app starts  
  22.         }  
  23.   
  24.         protected override void OnSleep()  
  25.         {  
  26.             // Handle when your app sleeps  
  27.         }  
  28.   
  29.         protected override void OnResume()  
  30.         {  
  31.             // Handle when your app resumes  
  32.         }  
  33.     }  
  34. }   
Step 3 
 
Next, add an image to Solution Explorer >> Project Name.Android >> Resourses >> Right Click >> drawable >> Add >> Existing Item. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Next, a dialogue box will open. Choose image location and add images. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Step 4 
 
Next, add an image to Solution Explorer >> Project Name.Universal Windows Platform >>Right Click >> Add >> Existing Item. 
 
 Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Next, a dialogue box will open Choose image location and add images.
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Step 5
 
The Image is added successfully for Android and UWP.
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms   Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Step 6
 
Next, Open Solution Explorer >> Project Name(Portable) >> Right-Click >> Add  >> New Item or Ctrl+Shift+A.
 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
A new dialogue box will open. Now, add the XAML page and give it a name. Click the "Add" button.
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Similarly, add the XAML page and give your name - "Page 2".
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms 
 
Similarly, add the XAML page and give your name - "Page 3".
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Step 7 
 
Open Solution Explorer >> Project Name >> Page1.xaml. Open the design view of this page.
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
The Code is given below. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Xaml Code  
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              x:Class="FloatMenuItem.Page1">    
  5.     <ContentPage.Content>    
  6.         <StackLayout>    
  7.             <Image Source="Android.png"/>    
  8.         </StackLayout>    
  9.     </ContentPage.Content>    
  10. </ContentPage>     
Step 8
 
Open Solution Explorer >> Project Name >> Page2.xaml. Open the design view of this Page.
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
The Code is given below. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Xaml Code 
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              x:Class="FloatMenuItem.Page2">    
  5.     <ContentPage.Content>    
  6.         <StackLayout>    
  7.             <Image Source="Windows.png"/>    
  8.         </StackLayout>       
  9.     </ContentPage.Content>    
  10. </ContentPage>      
Step 9 
 
Open Solution Explorer >> Project Name >> Page3.xaml. Open the design view of this Page. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
The Code is given below. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Xaml Code 
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              x:Class="FloatMenuItem.Page3">    
  5.     <ContentPage.Content>    
  6.         <StackLayout>    
  7.             <Image Source="Apple.jfif"/>    
  8.         </StackLayout>    
  9.     </ContentPage.Content>    
  10. </ContentPage>      
Step 10
 
Open Solution Explorer >> Project Name >> MainPage.xaml. Open the design view of this Page.
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
The Code is given below. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Xaml Code
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              xmlns:local="clr-namespace:FloatMenuItem"    
  5.              x:Class="FloatMenuItem.MainPage"    
  6.              BackgroundImage="CSharp.jpg">    
  7.     <AbsoluteLayout>    
  8.     
  9.     
  10.         <Grid AbsoluteLayout.LayoutBounds="1,1,-1,-1"    
  11.               AbsoluteLayout.LayoutFlags="PositionProportional"    
  12.               Margin="0,0,10,100">    
  13.             <Grid.RowDefinitions>    
  14.                 <RowDefinition/>    
  15.                 <RowDefinition/>    
  16.                 <RowDefinition/>    
  17.             </Grid.RowDefinitions>    
  18.     
  19.             <StackLayout Grid.Row="0" Orientation="Horizontal" IsVisible="False" x:Name="FloatMenuItem1">    
  20.                 <Label Text="Android" VerticalOptions="Center"/>    
  21.                 <Frame BackgroundColor="Red" CornerRadius="30">    
  22.                     <Frame.GestureRecognizers>    
  23.                         <TapGestureRecognizer x:Name="FloatMenuItem1Tap" Tapped="FloatMenuItem1Tap_OnTapped" />    
  24.                     </Frame.GestureRecognizers>    
  25.                 </Frame>    
  26.             </StackLayout>    
  27.     
  28.             <StackLayout Grid.Row="1" Orientation="Horizontal" IsVisible="False" x:Name="FloatMenuItem2">    
  29.                 <Label Text="Windows" VerticalOptions="Center"/>    
  30.                 <Frame BackgroundColor="Green" CornerRadius="30">    
  31.                     <Frame.GestureRecognizers>    
  32.                         <TapGestureRecognizer x:Name="FloatMenuItem2Tap" Tapped="FloatMenuItem2Tap_OnTapped" />    
  33.                     </Frame.GestureRecognizers>    
  34.                 </Frame>    
  35.             </StackLayout>    
  36.     
  37.             <StackLayout Grid.Row="2" Orientation="Horizontal" IsVisible="False" x:Name="FloatMenuItem3">    
  38.                 <Label Text="iOS" VerticalOptions="Center"/>    
  39.                 <Frame BackgroundColor="LightBlue" CornerRadius="30">    
  40.                     <Frame.GestureRecognizers>    
  41.                         <TapGestureRecognizer x:Name="FloatMenuItem3Tap" Tapped="FloatMenuItem3Tap_OnTapped" />    
  42.                     </Frame.GestureRecognizers>    
  43.                 </Frame>    
  44.             </StackLayout>    
  45.         </Grid>    
  46.     
  47.         <Frame BackgroundColor="Blue" CornerRadius="30" HasShadow="True"    
  48.                AbsoluteLayout.LayoutFlags="PositionProportional"    
  49.                AbsoluteLayout.LayoutBounds="1,1,-1,-1"    
  50.                Margin="10">    
  51.             <Label Text="C#" TextColor="White" FontSize="Medium" FontAttributes="Bold"/>    
  52.             <Frame.GestureRecognizers>    
  53.                 <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped"/>    
  54.             </Frame.GestureRecognizers>    
  55.         </Frame>    
  56.     </AbsoluteLayout>    
  57. </ContentPage> 
Step 11
 
Open Solution Explorer >> Project Name >> MainPage.xaml.cs. Open the design view of this Page. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
The Code is given below. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
C# Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Xamarin.Forms;  
  7.   
  8. namespace FloatMenuItem  
  9. {  
  10.     public partial class MainPage : ContentPage  
  11.     {  
  12.         public MainPage()  
  13.         {  
  14.             InitializeComponent();  
  15.         }  
  16.   
  17.         private bool isOpen = false;  
  18.         private async void TapGestureRecognizer_OnTapped(object sender, EventArgs e)  
  19.         {  
  20.             if (isOpen == false)  
  21.             {  
  22.                 isOpen = true;  
  23.                 //Scale to smaller  
  24.                 await ((Frame)sender).ScaleTo(0.8, 50, Easing.Linear);  
  25.                 //Wait a moment  
  26.                 await Task.Delay(100);  
  27.                 //Scale to normal  
  28.                 await ((Frame)sender).ScaleTo(1, 50, Easing.Linear);  
  29.   
  30.                 //Show FloatMenuItem1  
  31.                 FloatMenuItem1.IsVisible = true;  
  32.                 await FloatMenuItem1.TranslateTo(0, 0, 100);  
  33.                 await FloatMenuItem1.TranslateTo(0, -20, 100);  
  34.                 await FloatMenuItem1.TranslateTo(0, 0, 200);  
  35.   
  36.                 //Show FloatMenuItem2  
  37.                 FloatMenuItem2.IsVisible = true;  
  38.                 await FloatMenuItem2.TranslateTo(0, 0, 100);  
  39.                 await FloatMenuItem2.TranslateTo(0, -20, 100);  
  40.                 await FloatMenuItem2.TranslateTo(0, 0, 200);  
  41.   
  42.                 //Show FloatMenuItem3  
  43.                 FloatMenuItem3.IsVisible = true;  
  44.                 await FloatMenuItem3.TranslateTo(0, 0, 100);  
  45.                 await FloatMenuItem3.TranslateTo(0, -20, 100);  
  46.                 await FloatMenuItem3.TranslateTo(0, 0, 200);  
  47.             }  
  48.             else  
  49.             {  
  50.                 isOpen = false;  
  51.                 //Scale to smaller  
  52.                 await ((Frame)sender).ScaleTo(0.8, 50, Easing.Linear);  
  53.                 //Wait a moment  
  54.                 await Task.Delay(100);  
  55.                 //Scale to normal  
  56.                 await ((Frame)sender).ScaleTo(1, 50, Easing.Linear);  
  57.   
  58.                 //Hide FloatMenuItem1  
  59.                 await FloatMenuItem1.TranslateTo(0, 0, 100);  
  60.                 await FloatMenuItem1.TranslateTo(0, -20, 100);  
  61.                 await FloatMenuItem1.TranslateTo(0, 0, 200);  
  62.                 FloatMenuItem1.IsVisible = false;  
  63.   
  64.                 //Hide FloatMenuItem2  
  65.                 await FloatMenuItem2.TranslateTo(0, 0, 100);  
  66.                 await FloatMenuItem2.TranslateTo(0, -20, 100);  
  67.                 await FloatMenuItem2.TranslateTo(0, 0, 200);  
  68.                 FloatMenuItem2.IsVisible = false;  
  69.   
  70.                 //Hide FloatMenuItem3  
  71.                 await FloatMenuItem3.TranslateTo(0, 0, 100);  
  72.                 await FloatMenuItem3.TranslateTo(0, -20, 100);  
  73.                 await FloatMenuItem3.TranslateTo(0, 0, 200);  
  74.                 FloatMenuItem3.IsVisible = false;  
  75.             }  
  76.   
  77.         }  
  78.   
  79.         private async void FloatMenuItem1Tap_OnTapped(object sender, EventArgs e)  
  80.         {  
  81.             await Navigation.PushAsync(new Page1());  
  82.         }  
  83.   
  84.         private async void FloatMenuItem2Tap_OnTapped(object sender, EventArgs e)  
  85.         {  
  86.             await Navigation.PushAsync(new Page2());  
  87.         }  
  88.   
  89.         private async void FloatMenuItem3Tap_OnTapped(object sender, EventArgs e)  
  90.         {  
  91.             await Navigation.PushAsync(new Page3());  
  92.         }  
  93.     }  
  94. } 
Step 12 
 
Next, select the "Build and Deploy"  option followed by selecting from the list of Android Emulator or simulator. You can choose any API(Application Program Interface) Level Emulator or simulator to run it.
 
Output 
 
After a few seconds, you will see your app working.
 
Android Output 
 
You can choose the Android Platform. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms 
 
Click the "C#" Float item menu in Android, Windows, iOS. 
 
 Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Click Android Navigate and the Page 1 result is displayed. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Click Windows Navigate and the Page 2 result is displayed. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms 

Click iOS Navigate the Page 3 result is displayed. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Windows Output
 
You can choose the UWP Platform.  
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Click the "C#" Float item menu in Android, Windows, iOS.
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
 Click Android Navigate and the Page 1 result is displayed.
  
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
 Click Windows Navigate and the Page 2 result is displayed.
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Click iOS Navigate and the Page 3 result is displayed. 
 
Float Menu Item Working Navigation In Android And UWP Using Xamarin.Forms
 
Finally, we have successfully created our desired Xamarin.Forms application. 
 

Conclusion 

 
I hope you have learned about Float Item Menu Working Navigation Android and UWP Using Xamarin.Forms with C#. 


Similar Articles