Hide content during swipe in UI for Xamarin

This is a migrated thread and some comments may be shown as answers.

Hide content during swipe

3 Answers 36 Views

ListView

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 25 May 2018, 02:09 PM

Hello Andy,

There are a set of ItemSwipe events that you can use to identify when the item is being swiped (see the rest in the Cell Swipe documentation)

- ItemsSwipeStarting Fires at the beginning of the swipe
- ItemSwiping This will fire for each discrete swipe translation, during the same swipe (e.g. user stopped swiping halfway but keeps their finger on it, then continues swiping).
- ItemSwipeCompleted Fires at the end of the swipe

You can also access a few properties in the event args:

- e.Item is available in all the events (this is the bound data item)
- e.Cancel is available in ItemSwipeStarting (set Cancel = true to stop the swipe )
- e.Offset is available in ItemSwiping and ItemSwipeComplete (to get the offset position of the swiped item)

As far as the mechanism you use to show or hide the item can be up to your preferences, a common approach is to use a model property bound to the UI.

Furthermore, you can have a look at the different examples and demos that we are providing with the Telerik UI for Xamarin installation. You can find them in the Examples and QSF folders within your local installation of the suite.

Regards,
Didi
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 25 May 2018, 06:26 PM

Or some reason, changing an item in the collection is not working. My source is on ObservableCollection. I can remove items from it and they do not show in the list after that, but when I change the data in the code behind, the item is not changing.

The code to set is:
listView.ItemsSource = propertyList;

I was testing changing the address of an item to see if it changes.

XAML is:

<telerikDataControls:RadListView x:Name="listView"

SwipeOffset="70, 0, 70, 0"

IsItemSwipeEnabled="True"

SelectionMode="Single"

SwipeThreshold="70" Grid.Row="1">

<telerikDataControls:RadListView.ItemTemplate>

<DataTemplate>

<telerikListView:ListViewTemplateCell>

<telerikListView:ListViewTemplateCell.View>

<Grid HeightRequest="70" Margin="0,20,0,0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="70"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<Image Grid.Column ="0" Source="{Binding ImageUrl}" Aspect="AspectFill" Margin="0,0,5,0"/>

<StackLayout Orientation="Vertical" Grid.Column ="1">

<Label Margin="10,10,10,0"

FontAttributes="Bold"

FontSize="16"

Text="{Binding Address}"

TextColor="Black" />

<Label Grid.Row="1"

Margin="10,0,10,10"

FontAttributes="Italic"

FontSize="13"

Text="{Binding CombinedAddress}"

TextColor="Black" />

</StackLayout>

</Grid>

</telerikListView:ListViewTemplateCell.View>

</telerikListView:ListViewTemplateCell>

</DataTemplate>

</telerikDataControls:RadListView.ItemTemplate>

<telerikDataControls:RadListView.ItemSwipeContentTemplate>

<DataTemplate>

<Grid Margin="0"

Padding="0"

ColumnSpacing="0"

RowSpacing="0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="70" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="70" />

</Grid.ColumnDefinitions>

<Button Margin="0" BackgroundColor="#8BC640"

BorderRadius="0"

Grid.Column="0"

Clicked="OnShare"

Image="sharesmall.png"

WidthRequest="70" />

<Button Margin="0" BackgroundColor="Red"

BorderRadius="0"

Grid.Column="2"

Clicked="OnDelete"

Image="whitexsmall.png"

TextColor="White"

WidthRequest="70" />

</Grid>

</DataTemplate>

</telerikDataControls:RadListView.ItemSwipeContentTemplate>

</telerikDataControls:RadListView>

answered on 29 May 2018, 11:56 AM

RadListViewXF-1169119.zip

Hi Andy,

Thank you for the provided XAML.

I created a project with it and I was able to change the address successfully, when the data is updated from the code.
In order the change to be reflected in the UI, the object should implement the INotifyPropertyChanged Interface.

Please take a look at the attached project for the complete implementation.

I hope I could be of help.

Regards,
Didi
Progress Telerik