Button Clicked handler doesn't fire in a ListViewTemplateCell.View

[Alan]

Hi,

I'm trying to add a button to a RadListView cell. The ListView cell has an ItemTapped event handler, which works as expected. But when I add a button to the template cell, the button's click handler is never called. 

XAML:

<telerikDataControls:RadListView x:Name="listView" ItemsSource="{Binding ListSource, Mode=TwoWay}" SelectionMode="Single"  ItemTapped="List_Tapped">
    <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
            <telerikListView:ListViewTemplateCell>
                <telerikListView:ListViewTemplateCell.View>

                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Label Margin="10" Text="{Binding itemName}" Grid.Row="0" Grid.Column="0" />

                        <Button Text="Button" BackgroundColor="Blue" Clicked="Button_Clicked" Grid.Row="0" Grid.Column="1" Margin="0,0,30,0" HorizontalOptions="EndAndExpand" VerticalOptions="Center" />
                    </Grid>
                </telerikListView:ListViewTemplateCell.View>
            </telerikListView:ListViewTemplateCell>
        </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>

 

Code Behind:

private void List_Tapped(object sender, Telerik.XamarinForms.DataControls.ListView.ItemTapEventArgs e)
{
    Debug.WriteLine("List item tapped");
}

private void Button_Clicked(object sender, EventArgs e)
{
    Debug.WriteLine("Button clicked");
    DisplayAlert("Alert", "Button was clicked", "OK");
}

 

I'm assuming that the ListView ItemTapped event is overridding the button's click handler, but how can I make this work?

 

Thanks in advance!

 

 

[Stefan Nenchev]

Hello, Alan,

We have tested the scenario and could replicate the undesired behavior in the UWP platform only. Please confirm whether this is the case at your end as well.

As for the issue in UWP, let me try to explain you in details what is causing the observed behavior. The UWP native ListView that is rendered in Xamarin has inside its Template two Borders. These Borders are connected with the Swipe functionality of the control and are positioned below the Content part of the control in the visual tree - in your case after the Grid with the Button and Label. Because of that when you try to click, the visual elements you are actually clicking on these two borders that have a transparent background.

In order to try providing you with a suitable solution for your scenario could you please, let us know if you are using the swipe functionality?  

Regards,
Stefan Nenchev
Progress Telerik

[Alan]

Hi Stafan,

Thanks for coming back to me. Yes, it is a UWP app and no, I'm not using the swipe functionality. Any help with getting this working will be very much appreciated!

[Namysław]

You can do this that way - also with NOT firing code behind, but the ViewModel logic - https://stackoverflow.com/questions/39033460/detecting-tap-on-label-inside-viewcell-inside-listview/39036743#39036743

[Stefan Nenchev]

Hi, Alan,

The following modification through a custom renderer in UWP should be of help:

public class CustomListViewRenderer : Telerik.XamarinForms.DataControlsRenderer.UWP.ListViewRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<RadListView> e)
    {
        base.OnElementChanged(e);
        this.Control.Loaded += Control_Loaded;
    }

    private void Control_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
    {
        var lv = sender as Telerik.UI.Xaml.Controls.Data.RadListView;
        if (lv != null)
        {
            var items = ElementTreeHelper.EnumVisualDescendants(lv, a => a is RadListViewItem);
            foreach (var lvItem in items)
            {
                var borders = ElementTreeHelper.EnumVisualDescendants(lvItem, a => a is Border);
                foreach (Border border in borders)
                {
                    if (border.Name == "PART_FirstHandle" || border.Name == "PART_SecondHandle")
                    {
                        border.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
                        continue;
                    }
                }
            }
        }

        lv.Loaded -= Control_Loaded;
    }
}

I would like to once again mention that the swiping functionality will not work once you apply these changes so you should have this in mind. 

Regards,
Stefan Nenchev
Progress Telerik

[Alan]

Hi Stefan,

Fantastic, that works. Thanks very much!

Alan

[Manish]

Hello Stefan,

I am facing the similar issue in UWP but I am using the swiping functionality.

Is there a way to keep both clicking and swiping functionality in this control.

[Stefan Nenchev]

Hi, Manish,

Unfortunately, there is a limitation in this scenario and there is no way to get both functionalities working in the UWP platform.

Regards,
Stefan Nenchev
Progress Telerik