Xamarin Forms Switch using EventToCommandBehavior not firing

Question

Xamarin Forms Switch using EventToCommandBehavior not firing

Gordon S 501

I have a page with a "CollectionView", the DataTemplate has a "Switch" for which I have added a "behaviors:EventToCommandBehavior" (from Xamarin.CommunityToolkit).

The project compiles and runs without error, but the command assigned to the Switch does not fire.

I have this in the Page XAML:

...  
    <CollectionView ...  
        ...  
        <DataTemplate ...  
        ...  
            <Switch x:Name="xamlSwitch"   
                 Grid.Column="1"  
                 IsToggled="{Binding IsActive, Mode=OneTime}"  
                OnColor="{StaticResource AppPrimaryColor}"  
                ThumbColor="{StaticResource SecondaryColor}"  
                VerticalOptions="Center">  
                   <Switch.Behaviors>  
                        <behaviors:EventToCommandBehavior   
                             EventName="Toggled"    
                             Command="{Binding ToggledCommand}"   
                            CommandParameter="{Binding .}"  
                            x:DataType="viewModels:DevicesPageViewModel"   
                         />  
                   </Switch.Behaviors>  
             </Switch>

In the DevicesPageViewModel:

public Command ToggledCommand { get; set; }  
   
public DevicesPageViewModel(){  
  
        ToggledCommand = new Command(async x => await ExecuteToggledCommand((UserDevice)x));          
  
}  
  
private async Task ExecuteToggledCommand(UserDevice x)  
{  
    ... code  
}

I have tried (what feels like) a million combinations but nothing works! What am I doing wrong?

Edit: Full code for XAML and ViewModel

XAML:

<?xml version="1.0" encoding="utf-8" ?>  
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
             xmlns:viewModels="clr-namespace:MyTest.ViewModels;assembly=MyTest"  
             xmlns:models="clr-namespace:MyTest.Models;assembly=MyTest"  
             xmlns:behaviors="http://xamarin.com/schemas/2020/toolkit"  
             x:Class="MyTest.Views.DevicesPage"  
             x:Name="pageName"  
             Title="My Devices">  
    <ContentPage.BindingContext>  
        <viewModels:DevicesPageViewModel />  
    </ContentPage.BindingContext>  
    <ContentPage.Content>  
          
        <AbsoluteLayout>  
            <StackLayout Margin="{StaticResource PageMargin}"   
                         Spacing="80"  
                x:Name="MainLayout"  
                AbsoluteLayout.LayoutBounds="0,0,1,1"  
                AbsoluteLayout.LayoutFlags="All" >  
                  
                <RefreshView IsRefreshing="{Binding IsRefreshing}"   
                         Command="{Binding RefreshItemsCommand}">  
                    <CollectionView x:Name="ItemsCollectionView"   
                                ItemsSource="{Binding Items}"  
                                RemainingItemsThreshold="{Binding ItemThreshold}"  
                                RemainingItemsThresholdReachedCommand="{Binding ItemThresholdReachedCommand}"  
                                Margin="12,12,12,0"  
                                >  
						<CollectionView.ItemTemplate>  
							<DataTemplate>  
								<!--SwipeView layout  
                                see https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/swipeview#custom-swipe-items for commands -->  
								<SwipeView >  
									<SwipeView.RightItems>  
                                        <SwipeItems Mode="Reveal">  
                                            <SwipeItemView>  
                                                <Grid WidthRequest="85" Margin="0,16,0,16" RowSpacing="0" RowDefinitions=".5*,.5*" ColumnSpacing="0">  
                                                    <BoxView Grid.RowSpan="2"  
															 BackgroundColor="{StaticResource SwipeItemAlert}"  
															 CornerRadius="0,8,0,8" />  
                                                    <Image	Grid.Row="0"  
                                                            Margin="0,0,0,-6"  
															Aspect="AspectFit"  
															HorizontalOptions="Center"  
															Source="icon_white_alert"  
                                                            HeightRequest="32"  
															VerticalOptions="End"/>  
                                                    <Label	Grid.Row="1"  
															Text="Report lost or stolen"  
                                                            Padding="6,6,6,0"  
															FontAttributes="Bold"  
															FontSize="{StaticResource SwipeItemFontSize}"  
															HorizontalOptions="Center"															  
															TextColor="White"  
                                                            HorizontalTextAlignment="Center"  
															VerticalOptions="Start" />  
                                                </Grid>  
                                            </SwipeItemView>  
                                            <SwipeItemView>  
                                                <Grid WidthRequest="85" Margin="0,16,0,16" RowSpacing="0" RowDefinitions="*,*">  
                                                    <BoxView Grid.RowSpan="2"  
															 BackgroundColor="{StaticResource SwipeItemDefault }"  
															 CornerRadius="0" />  
                                                    <Image	Grid.Row="0"   
                                                            Margin="0,0,0,-6"  
															Aspect="AspectFit"  
															HorizontalOptions="Center"  
															Source="icon_white_more"  
                                                            HeightRequest="32"  
															VerticalOptions="End"/>  
                                                    <Label	Grid.Row="1"  
															Text="More"  
                                                            Padding="6,6,6,0"  
															FontAttributes="Bold"  
															FontSize="{StaticResource SwipeItemFontSize}"  
															HorizontalOptions="Center"  
                                                            HorizontalTextAlignment="Center"  
															TextColor="White"  
															VerticalOptions="Start" />  
                                                </Grid>  
                                            </SwipeItemView>  
                                        </SwipeItems>  
									</SwipeView.RightItems>  
								  
								<!--Content layout-->  
									<StackLayout Margin="0, 16, 0, 16" >  
										<Frame  
										Padding="{StaticResource SpacingMedium}"  
										CornerRadius="10"  
										IsClippedToBounds="True"  
										HorizontalOptions="Center"  
										VerticalOptions="Center"  
										HasShadow="True"  
										BackgroundColor="{StaticResource SecondaryColor}">  
											<Grid ColumnDefinitions="Auto, *" ColumnSpacing="{StaticResource DefaultSpacing}">  
  
												<Image Source="{Binding ProductImage}"  
												   Aspect="AspectFill"  
												   HeightRequest="60"  
												   WidthRequest="60"  
                                                   BackgroundColor="Aquamarine">  
													<Image.Clip>  
														<EllipseGeometry  
														Center="30,30"  
														RadiusX="30"  
														RadiusY="30"/>  
													</Image.Clip>  
												</Image>  
  
												<StackLayout Grid.Column="1" Padding="0">  
													<Label Text="{Binding ProductName}"  
												   FontSize="18"  
												   FontAttributes="Bold" />  
													<Label Text="{Binding MaskedPAN, StringFormat='ID: {0}'}"  
												   FontAttributes="Bold" />  
													<Label Text="{Binding CardBalanceText}"  
												   VerticalOptions="End"  />  
  
													<Grid ColumnDefinitions="Auto, Auto" ColumnSpacing="6" >  
														<Label x:Name="switchStateLabel"   
                                                            Text="Active"  
														    VerticalOptions="Center" />  
														<Switch x:Name="xamlSwitch"   
														    Grid.Column="1"  
														    IsToggled="{Binding IsActive, Mode=OneTime}"  
														    OnColor="{StaticResource AppPrimaryColor}"  
														    ThumbColor="{StaticResource SecondaryColor}"  
														    VerticalOptions="Center">  
                                                            <Switch.Behaviors>  
                                                                <behaviors:EventToCommandBehavior   
                                                                    EventName="Toggled"    
                                                                    Command="{Binding   Path=BindingContext.ToggledCommand,   
                                                     Source={x:Reference   
                                                    Name=pageName}}"   
                                                                    CommandParameter="{Binding .}"  
                                                                    />  
                                                            </Switch.Behaviors>  
                                                        </Switch>  
                                                    </Grid>  
												</StackLayout>  
  
  
											</Grid>  
										</Frame>  
									</StackLayout>  
								</SwipeView>  
								  
							</DataTemplate>  
						</CollectionView.ItemTemplate>  
					</CollectionView>  
                </RefreshView>  
  
            </StackLayout>  
  
            <StackLayout  
        x:Name="aiLayout"  
        IsVisible="{Binding IsBusy}"  
        AbsoluteLayout.LayoutBounds="0,0,1,1"  
        AbsoluteLayout.LayoutFlags="All"  
        >  
                <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">  
                    <!--Semi transparent overlay panel-->  
                    <BoxView BackgroundColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Opacity=".75"  />  
                      
                    <Frame  
                    CornerRadius="50"  
                    HeightRequest="48"  
                    WidthRequest="48"  
                        Padding="5"  
                    IsClippedToBounds="True"  
                    HorizontalOptions="Center"  
                    VerticalOptions="Center"  
                    HasShadow="True"  
                    BackgroundColor="{StaticResource SecondaryColor}">  
                        <ActivityIndicator   
                        x:Name="ai"              
                        IsRunning="{Binding IsBusy}"  
                        Color="{StaticResource AppPrimaryColor}"  
                        HorizontalOptions="CenterAndExpand"  
                        VerticalOptions="CenterAndExpand"  
                        IsVisible="{Binding IsBusy}"  
                        />  
                    </Frame>  
  
                </Grid>  
                  
            </StackLayout>  
  
        </AbsoluteLayout>  
          
    </ContentPage.Content>  
</ContentPage>

ViewModel:

using System;  
using System.Collections.ObjectModel;  
using System.Diagnostics;  
using System.Linq;  
using System.Threading.Tasks;  
using MyTestAppApi;  
using MyTestAppApi.Models.ResponseData;  
using MyTest.Services;  
using Xamarin.Forms;  
  
namespace MyTest.ViewModels  
{  
    public class DevicesPageViewModel : BaseViewModel  
    {  
        #region Private Properties  
  
        private bool _isRefreshing;  
  
        private int _itemThreshold;  
  
        #endregion  
  
        #region Public Properties  
  
        public ObservableCollection<UserDevice> Items { get; set; }  
        public const string ScrollToPreviousLastItem = "Scroll_ToPrevious";  
  
  
        public bool IsRefreshing  
        {  
            get => _isRefreshing;  
            set => SetProperty(ref _isRefreshing, value);  
        }  
  
        public Command RefreshItemsCommand { get; set; }  
        public Command ItemThresholdReachedCommand { get; set; }  
        public Command LoadItemsCommand { get; set; }  
  
        public Command ToggledCommand { get; set; }  
  
        public int ItemThreshold  
        {  
            get => _itemThreshold;  
            set => SetProperty(ref _itemThreshold, value);  
        }  
  
        #endregion  
  
        #region Constructors  
  
        public DevicesPageViewModel()  
        {  
            ItemThreshold = 1;  
            Items = new ObservableCollection<UserDevice>();  
  
            LoadItemsCommand = new Command(async () => await ExecuteLoadItemsCommand());  
            ItemThresholdReachedCommand = new Command(async () => await ItemsThresholdReached());  
            RefreshItemsCommand = new Command(async () =>  
            {  
                IsRefreshing = false;  
                await ExecuteLoadItemsCommand();  
            });  
  
            ToggledCommand = new Command(async x => await ExecuteToggledCommand((UserDevice)x));  
  
        }  
  
  
        private async Task ExecuteToggledCommand(UserDevice x)  
        {  
            var myApi = new MyTestAppApiService(MyTestAppConfig.ApiBaseUrl);  
            var accessToken = await AccessToken();  
            myApi.UpdateDeviceStatus(accessToken, "?", "?");  
        }  
  
        #endregion  
  
        public async Task ItemsThresholdReached()  
        {  
            if (IsBusy)  
                return;  
  
            IsRefreshing = false;  
            IsBusy = true;  
  
            // Get next lot of data  
            try  
            {  
                var myApi = new MyTestAppApiService(MyTestAppConfig.ApiBaseUrl);  
                var accessToken = await AccessToken();  
                var rtnData = await myApi.GetUserDevicesAsync(accessToken, Items.Count);  
  
                foreach (var item in rtnData.Devices)  
                {  
                    Items.Add(item);  
                }  
                if (!Items.Any())  
                {  
                    ItemThreshold = -1;  
                }  
            }  
            catch (Exception ex)  
            {  
                Debug.WriteLine(ex);  
            }  
            finally  
            {  
                IsBusy = false;  
            }  
        }  
  
        public async Task ExecuteLoadItemsCommand()  
        {  
            if (IsBusy)  
                return;  
  
            IsRefreshing = false;  
            IsBusy = true;  
  
            try  
            {  
                Items.Clear();  
                var myApi = new MyTestAppApiService(MyTestAppConfig.ApiBaseUrl);  
                var accessToken = await AccessToken();  
                var rtnData = await myApi.GetUserDevicesAsync(accessToken, 0);  
  
                foreach (var item in rtnData.Devices)  
                {  
                    Items.Add(item);  
                }  
            }  
            catch (Exception ex)  
            {  
                Debug.WriteLine(ex);  
            }  
            finally  
            {  
                IsBusy = false;  
            }  
        }  
    }  
}

2 answers

Your answer

Answer 1

Joe Manke 1,091

Bindings inside a CollectionView DataTemplate are to the item from the ItemsSource. To bind to a command defined on the ViewModel that holds the ItemsSource, you need to specify a different source for the binding. The best way to do that is with the RelativeSource extension:

<behaviors:EventToCommandBehavior   
    EventName="Toggled"    
    Command="{Binding ToggledCommand, Source={RelativeSource AncestoryType={x:Type viewModels:DevicesPageViewModel}}}"   
    CommandParameter="{Binding .}" />

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/relative-bindings

Gordon S 501 Reputation points

2021-03-24T08:05:07.637+00:00

Unfortunately, I get an error using this method, when loading the page:

System.InvalidOperationException
Message=Operation is not valid due to the current state of the object.

Also, there was a typo - it should be "AncestorType" rather than "AncestoryType"

Answer 2

Hello,

Welcome to our Microsoft Q&A platform!

You can try the following code . It works on my app.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:behaviors="clr-namespace:CollectionViewDemos.Behaviors"
             x:Class="CollectionViewDemos.Views.VerticalListPage"
             x:Name="pageName"
             Title="Vertical list (DataTemplate)">
    <StackLayout >
        <CollectionView ItemsSource="{Binding Monkeys}" VerticalOptions="Start">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="3">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                        </Grid.ColumnDefinitions>

                        <Switch x:Name="xamlSwitch"
                                Grid.RowSpan="2"
                                IsToggled="{Binding IsActive, Mode=OneTime}"
                                VerticalOptions="Center">
                            <Switch.Behaviors>
                                <behaviors:EventToCommandBehavior
                              EventName="Toggled"
                             Command="{Binding   Path=BindingContext.ToggledCommand,
                                                    Source={x:Reference
                                                   Name=pageName}}"
                              CommandParameter="{Binding .}"
                             />
                            </Switch.Behaviors>
                        </Switch>


                        <Label Grid.Column="1"
                               Text="{Binding Name}"
                               FontAttributes="Bold" />
                        <Label Grid.Row="1"
                               Grid.Column="1"
                               Text="{Binding Location}"
                               FontAttributes="Italic"
                               VerticalOptions="End" />

                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        </StackLayout>
</ContentPage>

Note: We can define the x:Name for our page( x:Name="pageName") :

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:behaviors="clr-namespace:CollectionViewDemos.Behaviors"
         x:Class="CollectionViewDemos.Views.VerticalListPage"
         x:Name="pageName">

And use the following code for Switch :

  <Switch x:Name="xamlSwitch"
                            Grid.RowSpan="2"
                            IsToggled="{Binding IsActive, Mode=TwoWay}"
                            VerticalOptions="Center">
                        <Switch.Behaviors>
                            <behaviors:EventToCommandBehavior
                          EventName="Toggled"
                         Command="{Binding   Path=BindingContext.ToggledCommand,
                                                Source={x:Reference
                                               Name=pageName}}"
                          CommandParameter="{Binding .}"
                         />
                        </Switch.Behaviors>
    </Switch>

Update

Try to change your code like this:

  ToggledCommand = new Command(( s) =>  ExecuteToggledCommand(s as UserDevice));

And ExecuteToggledCommand is:

         private void ExecuteToggledCommand(UserDevice s)
    {
        if (s != null)
        {
            // add your code here
        }

    }

Note: 1. You can also just need to change the following code:

        ToggledCommand = new Command(async x => await ExecuteToggledCommand((UserDevice)x));

to

        ToggledCommand = new Command(async x => await ExecuteToggledCommand(x as Monkey));

And ExecuteToggledCommand is :

        private async Task ExecuteToggledCommand(Monkey s)
    {
        if (s != null)
        {

        }
    }

Best Regards,

Jessie Zhang

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.

Gordon S 501 Reputation points

2021-03-24T08:20:37.287+00:00

I get an error when loading the page:

System.InvalidOperationException
Message=Operation is not valid due to the current state of the object.

Also, Visual Studio underlines "ToggledCommand" and says

Cannot resolve property 'ToggledCommand' in data context of type 'object'
JessieZhang-MSFT 7,716 Reputation points Microsoft External Staff

2021-03-24T08:27:15.917+00:00

ToggledCommand is the command in your viewmodel. Could you please post the ViewModel of your page and the whole xaml file of current page?
Gordon S 501 Reputation points

2021-03-24T08:40:13.17+00:00

There is a lot of it, so I have updated the question.
JessieZhang-MSFT 7,716 Reputation points Microsoft External Staff

2021-03-24T08:53:05.537+00:00

That's a lot of code. Which line reported the error? If it is convenient for you,could you please post a basic demo to github or one driver so that we can test on our side?
Gordon S 501 Reputation points

2021-03-24T09:11:32.657+00:00

The error is not at a line of code, Visual Studio reports "Your app has entered a break state, but there is no code to show because all threads were executing external code (typically system or framework code)."

I'll see if I can create the simplest solution that fails - actually, that might help me isolate the issue too!
Gordon S 501 Reputation points

2021-03-24T11:25:46.187+00:00

So, the problem turned out to be the parameter passing! And possibly because the ToggledCommand was being called while the page was being constructed and the data was null?

I used your setup for the Switch behaviour and this for the definition of the ToggledCommand:

ToggledCommand = new Command(async x => await ExecuteToggledCommand(x)); private async Task ExecuteToggledCommand(object s = null) { ... }

The issue now is how do I know which way the "Switch" is toggled?!
Joe Manke 1,091 Reputation points

2021-03-24T12:40:22.477+00:00

You're passing the UserDevice into the command, which has IsActive bound to the Switch's IsToggled property. Use that.
Gordon S 501 Reputation points

2021-03-24T12:59:14.263+00:00

Actually, the problem has moved on to "how do I only call ToggledCommand when the user clicks the switch - NOT when the Switch is bound?"

Currently, ToggledCommand looks at the status of the UserDevice and toggles it. Which is extremely unhelpful when it does that during page load!!

Ideally, I would like to know where the Switch is positioned when the ToggledCommand is called. I also need either the full UserDevice details or at least one key property.

I can't believe how difficult it is to work with this Switch command!
JessieZhang-MSFT 7,716 Reputation points Microsoft External Staff

2021-03-25T08:20:58.453+00:00

I have updated the answer, you can check the updated reply at the bottom of my answer.
Gordon S 501 Reputation points

2021-03-25T09:09:47.3+00:00

I had trouble if I defined the Command parameter as UserDevice, using Object works OK and if it isn't null I can then cast it to UserDevice. The trouble comes when it does the initial load (?) and tries to call ToggledCommand with a null UserDevice. Also, are you specifically saying not to use async?

What is the reason for selecting Mode=TwoWay?
JessieZhang-MSFT 7,716 Reputation points Microsoft External Staff

2021-03-25T10:23:36.627+00:00

When it is initialized (in the constructor of your viewmodel), it is null, so you will get an exception if you turn strongly in that way((UserDevice)x)).

public DevicesPageViewModel() { ToggledCommand = new Command(async x => await ExecuteToggledCommand((UserDevice)x)); }

You can also use async if you need, just change (UserDevice)x to x as Monkey.

Share via

Xamarin Forms Switch using EventToCommandBehavior not firing

2 answers

Your answer