Custom Switch/Picker in Xamarin Forms

Question

I was wondering if anyone knows how to create something like this in Xamarin Forms. I have been looking for a while but am not sure what to use to make it. If someone could just give me somewhere to start I would really appreciate it!

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

I create an custom view as your screenshot, here is running result.

I used Frame that contails three Lables in the Grid, And set background of Frame' is the same as unselected Lables, here is code.

   <?xml version="1.0" encoding="UTF-8"?>  
   <ContentView xmlns="http://xamarin.com/schemas/2014/forms"   
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                 
                x:Class="CustomTabs.TabsView">  
     <ContentView.Content>  
           <Frame CornerRadius="10" Padding="5" HeightRequest="50" HorizontalOptions="FillAndExpand" VerticalOptions="Start" BackgroundColor="#e0e0e0">  
               <Grid>  
     
                   <Grid.ColumnDefinitions>  
                       <ColumnDefinition Width="4*" />  
     
                       <ColumnDefinition Width="4*" />  
     
                       <ColumnDefinition Width="4*" />  
                   </Grid.ColumnDefinitions>  
     
                   <!--<Button x:Name="mybtn1"   Text="Pickup" BackgroundColor="White" Grid.Column="0"/>-->  
                   <Label x:Name="label1" Text="Pickup" TextColor="Black" FontSize="18" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"   BackgroundColor="White" Grid.Column="0" >  
                       <Label.GestureRecognizers>  
                           <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>  
                       </Label.GestureRecognizers>  
                  </Label>  
                   <Label x:Name="label2" Text="Delivery" TextColor="Black" FontSize="18" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"   BackgroundColor="#e0e0e0" Grid.Column="1" >  
                       <Label.GestureRecognizers>  
                           <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"></TapGestureRecognizer>  
                       </Label.GestureRecognizers>  
                   </Label>  
                   <Label x:Name="label3" Text="Mail" TextColor="Black" FontSize="18" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"   BackgroundColor="#e0e0e0" Grid.Column="2" >  
                       <Label.GestureRecognizers>  
                           <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_2"></TapGestureRecognizer>  
                       </Label.GestureRecognizers>  
                   </Label>  
     
                   
               </Grid>  
     
           </Frame>  
     </ContentView.Content>  
   </ContentView>  

When tab Lables, change the background color, here is contentview's background code.

   public partial class TabsView : ContentView  
       {  
           public TabsView()  
           {  
               InitializeComponent();  
                
               
           }  
     
           private void TapGestureRecognizer_Tapped(object sender, EventArgs e)  
           {  
               label1.BackgroundColor = Color.White;  
               label2.BackgroundColor = Color.FromRgb(224, 224, 224);  
               label3.BackgroundColor = Color.FromRgb(224, 224, 224);  
           }  
     
           private void TapGestureRecognizer_Tapped_1(object sender, EventArgs e)  
           {  
               label2.BackgroundColor = Color.White;  
               label1.BackgroundColor = Color.FromRgb(224, 224, 224);  
               label3.BackgroundColor = Color.FromRgb(224, 224, 224);  
           }  
     
           private void TapGestureRecognizer_Tapped_2(object sender, EventArgs e)  
           {  
               label3.BackgroundColor = Color.White;  
               label2.BackgroundColor = Color.FromRgb(224, 224, 224);  
               label1.BackgroundColor = Color.FromRgb(224, 224, 224);  
           }  
     
             
       }  
   }  

In the ned, use it in the layout with <customtabs:TabsView></customtabs:TabsView>

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.