Hide content during swipe

[Andy Macourek]

I have a list item that have an image and text.  I would like to be able to hide the image during swipe action and when the swipe context is shown.  What event do I need to look for?

[Didi]

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

[Andy Macourek]

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>

[Didi]

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