Binding in Swipe Template

Hi, i have the following template:

'                <listview:SfListView.RightSwipeTemplate>
                    <DataTemplate>
                        <Grid >
                            <Grid BackgroundColor="Green" IsVisible="{Binding IsDone, Converter={StaticResource InverseBoolConverter} }">
                                <Label  HorizontalOptions="Center" VerticalOptions="Center" FontFamily="FASolid" FontSize="Medium" FontAttributes="Bold" Text="{x:Static helpers:FAIcons.ShoppingCart}"></Label>
                            </Grid>
                            <Grid BackgroundColor="Red" IsVisible="{Binding IsDone}">
                                <Label  HorizontalOptions="Center" VerticalOptions="Center" FontFamily="FASolid" FontSize="Medium" FontAttributes="Bold" Text="{x:Static helpers:FAIcons.Undo}"></Label>
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </listview:SfListView.RightSwipeTemplate>
'

The SfListView is bound to a collection of TaskItems, One of the TaskItem propperties is a boolean named IsDone.

With this DataTemplate the results are inconsistant, it sometimes gives me a green SwipeMenu, and sometimes it gives a red. Additionally i see in VS that i get a binding Error to the IsDone Binding.


1 Reply 1 reply marked as answer

RK Ranjith Kumar Durairaj Syncfusion Team June 2, 2021 10:34 AM UTC

Hi Jonas

We suggest you to use DataTemplateSelector to achieve your requirement instead of binding a property value to the IsVisible property of a VisualElement.

Please refer the following code snippet

 
        public MainPage() 
        { 
            InitializeComponent(); 
            this.listView.RightSwipeTemplate = new RightTemplateSelector(); 
        } 
 
    public class RightTemplateSelector : DataTemplateSelector 
    { 
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container) 
        { 
            var value = ((container as SfListView).BindingContext as BookInfoRepository).IsDone; 
            if (value) 
            { 
                var dataTemplate = new DataTemplate(() => 
                { 
                    Grid grid = new Grid(); 
                    grid.RowDefinitions.Add(new RowDefinition() { Height = 50 }); 
                    Label label = new Label() 
                    { 
                        VerticalOptions = LayoutOptions.Center, 
                        HorizontalOptions = LayoutOptions.Center, 
                        Text = "True" 
                    }; 
                    grid.Children.Add(label); 
                    grid.BackgroundColor = Color.Green; 
                    return grid; 
                }); 
                return dataTemplate; 
            } 
 
            else 
            { 
                var dataTemplate = new DataTemplate(() => 
                { 
                    Grid grid = new Grid(); 
                    grid.RowDefinitions.Add(new RowDefinition() { Height = 50 }); 
                    Label label = new Label() 
                    { 
                        VerticalOptions = LayoutOptions.Center, 
                        HorizontalOptions = LayoutOptions.Center, 
                        Text = "True" 
                    }; 
                    grid.Children.Add(label); 
                    grid.BackgroundColor = Color.Red; 
                    return grid; 
                }); 
                return dataTemplate; 
            } 
        } 
    } 


Marked as answer
Loader.
Up arrow icon