Telerik Forums / UI for Xamarin Forum / ListView /

Hide content during swipe

4 posts, 0 answers

Andy Macourek

33 posts

Member since:
Mar 2010

Posted 24 May 2018 Link to this post

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
Admin

356 posts

Posted 25 May 2018 Link to this post

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
Andy Macourek

33 posts

Member since:
Mar 2010

Posted 25 May 2018 in reply to Didi Link to this post

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
Admin

356 posts
Posted 29 May 2018 Link to this post

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
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

RadListViewXF-1169119.zip

Hide content during swipe

Andy Macourek

Didi

Andy Macourek

Didi