How to set master details page with option selected in xamarin.forms?

Question

I am creating an application using the Master details page. In that, there is one thing that I missed out is that when I open an application than at that time the first item is not selected here. I try with different solutions like make "Custom View Cell" and make a renderer for solving that but there is also the same issue is raised.

I also mention the image below.

Is there any solution in regards to that?

Answer 1

It's a bit complicated , you can do it totally in Forms project without custom renderer.

I list the steps to achieve what you want .

1. Give the Model property to indicate which one is selected and implement `INotifyPropertyChanged.

   public class MasterPageItem  : INotifyPropertyChanged
   {
       private bool isSelected;
       public bool IsSelected {
           get {
               return isSelected;
           }
           set {
               if (value != this.isSelected)
               {
                   this.isSelected = value;
                   NotifyPropertyChanged();
               }
           } 
       }
   }
   

2. Bind with the background color of parent view in ViewCell and convert bool value to color in Converter

               <ViewCell>
                   <Grid Padding="5,10" BackgroundColor="{Binding IsSelected , Converter={StaticResource BooltoColor}}">
                       <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="30"/>
                           <ColumnDefinition Width="*" />
                       </Grid.ColumnDefinitions>
                       <Image Source="{Binding IconSource}" />
                       <Label Grid.Column="1" Text="{Binding Title}" />
                   </Grid>
               </ViewCell>
   
   public class BooltoColorConverter : IValueConverter
   {
       public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
       {
           Color color ;
   
           if(((bool)value) == true)
           {
               color = Color.Gray;
           }
           else
           {
               color = Color.Transparent;
           }
   
           return color;
       }
   
       public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
       {
           return true;
       }
   }
   

3. Set the item as selected and set other item disselected when you tap the listview item.

   private void ListView_ItemTapped(object sender, ItemTappedEventArgs e)
   {
       foreach (MasterPageItem i in list)
       {
           i.IsSelected = false;
       }
   
       MasterPageItem item = e.Item as MasterPageItem;
       if (item != null)
       {
           item.IsSelected = true;
           list.RemoveAt(e.ItemIndex);
           list.Insert(e.ItemIndex, item);
       }
   }
   

Check my testing image and sample link below

https://github.com/ColeXm/MasterDetailedSample/blob/master/Xamarin_Forms___MasterDetailPage.zip