Behavior of labels in the swipe template of a sfListView control

[Alfredo]

Hi,

I am using an sfListView control inside one of my Xamarin.Forms pages.  I am trying to add two labels when swiping: Delete and Modify:

<sflistview:SfListView.RightSwipeTemplate>

<DataTemplate>

<StackLayout Orientation="Horizontal">

<Label x:Name="_deleteLabel"

Text="Delete"

BackgroundColor="Red"

TextColor="White"

VerticalOptions="FillAndExpand"

VerticalTextAlignment="Center"

HorizontalOptions="Start" />

<Label x:Name="_modifyLabel"

Text="Modify"

VerticalOptions="FillAndExpand"

VerticalTextAlignment="Center"

HorizontalOptions="Start" />

</StackLayout>

</DataTemplate>

</sflistview:SfListView.RightSwipeTemplate>

However, when I swipe, the labels appear to be compressed and don't look very good (see the attached SyncfusionListViewSwipe.JPG file).  I would like them to behave as in the regular ListView control in Xamarin.Forms, in which the labels appear to slide from the right (see the attached XamarinListViewSwipe.JPG).  In essence, I want the labels in the code above to behave like the ListView context actions:

<ViewCell.ContextActions>

<MenuItem x:Name="_deleteLabel"

Text ="Delete"

IsDestructive="True"/>

<MenuItem x:Name="_modifyLabel"

Text ="Modify"/>

</ViewCell.ContextActions>

Do you know how I can accomplish this?

Thanks,

Alfredo

Attachment: ListViewSwipeImages_ecdc967d.zip

[Lakshmi Natarajan]

Hi Alfredo, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Behavior of labels in the swipe template of a sfListView control” from our end. We would like to inform you that you can overcome the reported scenario by using LineWrapMode for the label. You can refer the following document regarding LineBreakMode, 

https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.linebreakmode 

 

Please refer the following code snippets, 

Xaml: 

<sflistview:SfListView.RightSwipeTemplate> 

    <DataTemplate> 

        <StackLayout Orientation="Horizontal"> 

            <Label x:Name="_deleteLabel" 

            Text="Delete" 

            BackgroundColor="Red" 

            TextColor="White" 

       LineBreakMode="NoWrap" 

            VerticalOptions="FillAndExpand" 

            VerticalTextAlignment="Center" 

            HorizontalOptions="Start" /> 

            <Label x:Name="_modifyLabel" 

            Text="Modify" 

       LineBreakMode="NoWrap" 

            VerticalOptions="FillAndExpand" 

            VerticalTextAlignment="Center" 

            HorizontalOptions="Start" /> 

        </StackLayout> 

    </DataTemplate> 

</sflistview:SfListView.RightSwipeTemplate> 

 

Also, you can set the size of the swipe views using SwipeOffset for the SfListView. Please refer our online document regarding the same from the following link, 

UG link: https://help.syncfusion.com/xamarin/listview/swiping 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

 

[Swetha Srikumar]

Thank you Lakshmi, that worked perfectly!  In retrospect, that seems rather obvious.  Sorry for the dumb question. J 

 

Thanks for your great support! 

 

Alfredo 

[Lakshmi Natarajan]

Hi Alfredo, 

 

We are glad that our solution meets your requirement. Please let us know if you need any further update. As always we are happy to help you out. 

 

Regards, 

Lakshmi Natarajan