Hide content during swipe

4 posts, 0 answers
  1. Andy Macourek
    Andy  Macourek avatar
    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?
  2. Didi
    Admin
    Didi avatar
    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
  3. Andy Macourek
    Andy  Macourek avatar
    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>

  4. Didi
    Admin
    Didi avatar
    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
Back to Top