Binding inside SfListView

[David Saylor]

Hello, we are having trouble with binding a custom control inside of a SfListView.ItemTemplate to a property on the containing control.  The binding seems correct as far as I can tell -- the name of the containing control is ThisControl, it has a property named ViewModel, which has an ICommand property ToggleItemCommand.  The property is a custom BindableProperty, but it also seems correct.

The item shows with the correct Text value. Even though the binding is set, and everything "seems" correct, we do not see any value from the binding for the Command property.  The Set is never called.  I can only think that it is something about the list view that we are doing wrong.  Could you please offer some help?

The hopefully relevant portions are shown below.  Syncfusion.Xamarin.SfListView version is 17.2.0.47

<Grid  Grid.Row="4" BackgroundColor="White">

    <listView:SfListView x:Name="selectedChildBucketItems" FlowDirection="LeftToRight" ItemsSource="{Binding SelectedChildBucket.Items}" Margin="16,16,0,0" ItemSize="121" SelectionBackgroundColor="Transparent" >

        <listView:SfListView.LayoutManager>

            <listView:GridLayout SpanCount="4" />

        </listView:SfListView.LayoutManager>

        <listView:SfListView.ItemTemplate>

            <DataTemplate>

                <MyControls:MyButtonListButton Text="{Binding Description}" Command="{Binding ViewModel.ToggleItemCommand, Source={Reference ThisControl}}" CommandParameter="{Binding }" IsToggled="{Binding IsSelected, Mode=TwoWay, Converter={StaticResource nullableBoolConverter}}" FontSize="18" FontFamily="Arial"/>

            </DataTemplate>

        </listView:SfListView.ItemTemplate>

    </listView:SfListView>

</Grid>

public partial class MVButtonListButton : ContentView, INotifyPropertyChanged

{

    public static readonly BindableProperty CommandProperty = BindableProperties.Create(nameof(Command), returnType: typeof(ICommand), declaringType: typeof(MyButtonListButton), defaultValue: null, propertyChanged: (obj, oldCommand, newCommand) => (obj as MyButtonListButton).CommandChangedHandler((ICommand)oldCommand, (ICommand)newCommand));

    public ICommand Command

    {

        get => (ICommand)GetValue(CommandProperty);

        set => SetValue(CommandProperty, value);

    }

    private void CommandChangedHandler(ICommand oldCommand, ICommand newCommand)

    {

    }

}

[Sangeetha Raju]

Hi David, 

 

We would like to let you know that if  you apply binding to SfListView through ViewModel, you can access the ViewModel Command as like below mentioned code snippet. Since we don’t have complete xaml snippet of “ThisControl” reference we have done the binding using SfListView binding context to access ViewModel. 

 

<listView:SfListView.ItemTemplate> 

   <DataTemplate> 

      <MyControls:MyButtonListButton Text="{Binding Description}" Command="{Binding Path=BindingContext.ToggleItemCommand, Source={x:Reference selectedChildBucketItems}}" CommandParameter="{Binding .}" IsToggled="{Binding IsSelected, Mode=TwoWay, Converter={StaticResource nullableBoolConverter}}" FontSize="18" FontFamily="Arial"/> 

   </DataTemplate> 

</listView:SfListView.ItemTemplate> 

 

Can you please check with the above mentioned codes and please let us know if you require any further assistance. 

 

Regards, 

Sangeetha Raju. 

[David Saylor]

Thanks, we will try that.

[David Saylor]

YES, this worked for us. Thank you!

[Sangeetha Raju]

Hi David, 

 

We are glad for our solution works. Thanks for the update.  

 

Please let us know if you require further queries or else you can close the incident. 

 

Regards, 

Sangeetha Raju. 

[David Saylor]

I actually don't see where the option to close this incident is.  Can you show me?

[Sangeetha Raju]

Hi David, 

 

Sorry for our previous update. This is the open forum which can't be closed at your end. So, please ignore previous update and let us know if you have any further queries. 

 

Regards, 

Sangeetha Raju. 

[Rowena Young]

Hi,

I have a sfbutton which is inside the multilevel sflistview.

I try to apply the same code, but encounter the following error:

Position 49:79. Can not find the object referenced by `x:Reference selectedChildBucketItems` when the app load on my phone.

Full code as below.

   

   

       

                                    HorizontalOptions="CenterAndExpand" >

           

               

                   

                       

                           

                           

                       

                       

                       

                               BackgroundColor="{StaticResource LightThemeColour}" Style="{StaticResource labelBoldBlackStyle}" TextColor="{StaticResource ThemeColour}" Margin="10">

                       

                       

                           

                               

                           

                           

                                   

                                       

                                           

                                               

                                           

                                           

                                                 CommandParameter="{Binding}" Command="{Binding BindingContext.EntryCommand, Source={x:Reference x:Reference selectedChildBucketItems}}" 

                                                 ImageSource="{Binding entryImage, Mode=TwoWay}" ImageWidth="130" ShowIcon="True" ImageAlignment="Bottom" 

                                                 HeightRequest="160" HasShadow="False"

                                                 BackgroundImage="buttonbg.png" BackgroundColor="Transparent" CornerRadius="50"

                                                 WidthRequest="160" Margin="0" Padding="0">

                                           

                                           

                                               

                                                   

                                                       

                                                       

                                                   

                                               

                                               

                                                   

                                                       

                                                       

                                                   

                                               

                                           

                                       

                               

                                       

                                   

                               

                           

                   

               

           

       

   

   

---

LN Lakshmi Natarajan Syncfusion Team April 5, 2021 11:45 AM UTC

Hi Rowena, 

 

Thank you for using Syncfusion support. 

 

We have checked the reported query “Cannot find the object referenced by `x:Reference selectedChildBucketItems` when the app load on my phone” from our side. We would like to inform you that the selectedChildBucketItems is the name of the SfListView.  

 

Please refer to the document regarding x:Reference in the following link, 

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-binding-basics#view-to-view-bindingsa 

 

Please refer to the following code snippets for more reference, 

XAML 

<listView:SfListView x:Name="selectedChildBucketItems"> 

    <listView:SfListView.ItemTemplate> 

        <DataTemplate> 

            <button:SfButton CommandParameter="{Binding}" 

                             Command="{Binding BindingContext.EntryCommand, Source={x:Reference x:Reference selectedChildBucketItems }}"  

                             ImageSource="{Binding entryImage, Mode=TwoWay}" ImageWidth="130" ShowIcon="True" ImageAlignment="Bottom"  

                             HeightRequest="160" HasShadow="False" 

                             BackgroundImage="buttonbg.png" BackgroundColor="Transparent" CornerRadius="50" 

                             WidthRequest="160" Margin="0" Padding="0" /> 

        </DataTemplate> 

    </listView:SfListView.ItemTemplate> 

</listView:SfListView> 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

[Lakshmi Natarajan]

Hi Rowena, 

 

Thank you for using Syncfusion support. 

 

We have checked the reported query “Cannot find the object referenced by `x:Reference selectedChildBucketItems` when the app load on my phone” from our side. We would like to inform you that the selectedChildBucketItems is the name of the SfListView.  

 

Please refer to the document regarding x:Reference in the following link, 

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-binding-basics#view-to-view-bindingsa 

 

Please refer to the following code snippets for more reference, 

XAML 

<listView:SfListView x:Name="selectedChildBucketItems"> 

    <listView:SfListView.ItemTemplate> 

        <DataTemplate> 

            <button:SfButton CommandParameter="{Binding}" 

                             Command="{Binding BindingContext.EntryCommand, Source={x:Reference x:Reference selectedChildBucketItems }}"  

                             ImageSource="{Binding entryImage, Mode=TwoWay}" ImageWidth="130" ShowIcon="True" ImageAlignment="Bottom"  

                             HeightRequest="160" HasShadow="False" 

                             BackgroundImage="buttonbg.png" BackgroundColor="Transparent" CornerRadius="50" 

                             WidthRequest="160" Margin="0" Padding="0" /> 

        </DataTemplate> 

    </listView:SfListView.ItemTemplate> 

</listView:SfListView> 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan