This is a migrated thread and some comments may be shown as answers.
Hide content during swipe
3 Answers 20 Views
This is a migrated thread and some comments may be shown as answers.
Andy Macourek
Top achievements
Rank 1
Andy Macourek asked on 24 May 2018, 02:30 PM
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?

3 Answers, 1 is accepted

Sort by
0
Didi
Telerik team
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
0
Andy Macourek
Top achievements
Rank 1
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>

0
Didi
Telerik team
answered on 29 May 2018, 11:56 AM
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
Asked by
Andy Macourek
Top achievements
Rank 1
Answers by
Didi
Telerik team
Andy Macourek
Top achievements
Rank 1
Share this question
or