xamarin.formsxamarin.forms.listview

Xamarin Forms Switch inside Stacklayout BindableLayout get toggled event using MVVM (Prism.Forms)


I have the following list:

 <StackLayout BindableLayout.ItemsSource="{Binding NotificationList}" Margin="0,10,0,10" >
                     <BindableLayout.ItemTemplate>
                         <DataTemplate>                             <StackLayout Style="{StaticResource StacklayoutAStyle}">
                                <Label Text="{Binding notificationLabel}" VerticalOptions="Center" VerticalTextAlignment="Center"/>
                                 <Switch IsToggled="{Binding isNotificationToggled, Mode=TwoWay}" VerticalOptions="Center" HorizontalOptions="End" />
                             </StackLayout>
                         </DataTemplate>
                     </BindableLayout.ItemTemplate>
                 </StackLayout>

I'd like to get the notificationLabel text when I toggle the corresponding switch in the list. My ViewModel looks like this:

 private ObservableCollection<NotificationModel> _notificationList = new ObservableCollection<NotificationModel>
         {
             new NotificationModel { notificationLabel = "Notification1", isNotificationToggled = true },
             new NotificationModel { notificationLabel = "Notification2", isNotificationToggled = false },
             new NotificationModel { notificationLabel = "Notification3", isNotificationToggled = false },
             new NotificationModel { notificationLabel = "Notification4", isNotificationToggled = true },
         };
         public ObservableCollection<NotificationModel> NotificationList
         {
             get { return _notificationList; }
             set { SetProperty(ref _notificationList, value); }
         }

When I toggled Notification 3 for example, it switches to on (true), but how can I capture that event with "Notification 3"?


Solution

  • You can use Switch.Toggled to listen for toggled event,then get the BindingContext (NotificationModel),then determine which Switch is turned on according to NotificationModel.notificationLabel.

    <StackLayout BindableLayout.ItemsSource="{Binding NotificationList}" Margin="0,10,0,10" >
            <BindableLayout.ItemTemplate>
                 <DataTemplate>                             
                     <StackLayout Style="{StaticResource StacklayoutAStyle}">
                           <Label Text="{Binding notificationLabel}" VerticalOptions="Center" VerticalTextAlignment="Center"/>
                           <Switch IsToggled="{Binding isNotificationToggled, Mode=TwoWay}" VerticalOptions="Center" HorizontalOptions="End" Toggled="Switch_Toggled" />
                     </StackLayout>
                 </DataTemplate>
            </BindableLayout.ItemTemplate>
    </StackLayout>
    

    in your page.xaml.cs:

    private void Switch_Toggled(object sender, ToggledEventArgs e)
        {
            Switch sw = sender as Switch;
            NotificationModel notificationModel = (NotificationModel)sw.BindingContext;
            if (e.Value)
            {
                switch (notificationModel.notificationLabel)
                {
                    case "Notification1":
                        //do something
                        break;
    
                    case "Notification2":
                        //do something
                        break;
                    case "Notification3":
                        //do something
                        break;
                    case "Notification4":
                        //do something
                        break;
                }
            }
        }