Group Expand and collapse behavior in android

[Samir Asaf]

I have come across a scenario while using Sflistview groupheading feature.As per my requirement I have to use a tappable element inside the groupheader area(For displaying a popup).On touching the element,the command is registered,however the group expanding also occurs in android.This issue doesnt exist in ios.
I would like to have the same behaviour as in ios to be there in android.

Code
<------------------------------------------------------------------>
 <listView:SfListView    x:Name ="list"                               

                               AutoFitMode="Height"

                               ItemsSource="{Binding Datas}" ItemSpacing="0,0,0,10"

                               AllowGroupExpandCollapse="False"

                               Grid.Row="0"

                                        Grid.RowSpan="3"

                        BackgroundColor="#EAEAEA"

                               SelectionMode="None"

                          Margin="0,10,0,0"

                           >   

 <listView:SfListView.GroupHeaderTemplate>

                        <DataTemplate>

                            <ViewCell>

                                <ViewCell.View>

                                    <Grid VerticalOptions="StartAndExpand" BackgroundColor="{Binding Key.BackgroundColor}" Margin="10,0,10,0" Padding="0,0,0,0" RowSpacing="0" ColumnSpacing="0">

                              

                                <Grid.RowDefinitions>

                                            <RowDefinition Height="Auto"/>

                                            <RowDefinition Height="Auto"/>

                                        </Grid.RowDefinitions>

                                        <Grid.ColumnDefinitions>

                                            <ColumnDefinition Width="*"/>

                                            <ColumnDefinition Width="Auto"/>

                                            <ColumnDefinition Width="Auto"/>

                                        </Grid.ColumnDefinitions>

                                

                                        <customControls:SingleLabel Margin="0,0,0,0" Grid.Row="0" Grid.RowSpan="2" VerticalOptions="CenterAndExpand" Image="Img" LabelStyle="ListHeading" ItemsSource="{Binding Key.Name}" ></customControls:SingleLabel>

                                <Grid Grid.Row="0" HeightRequest="80" WidthRequest="80"  Grid.RowSpan="2" VerticalOptions="CenterAndExpand" Grid.Column="1"  HorizontalOptions="End" Margin="5,10,15,10">

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="Auto"/>

                                    </Grid.RowDefinitions>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="Auto"/>

                                    </Grid.ColumnDefinitions>

                                    <customControls:RadialProgressBase VerticalOptions="CenterAndExpand" HeightRequest="60"  Progress="{Binding Key.Data1}"

                             BorderColor = "{Binding Key.BackgroundColor}"

                             TextColor = "{Binding Key.BackgroundColor}"

                             Grid.Column="0">

                                        <customControls:RadialProgressBase.GestureRecognizers>

                                            <TapGestureRecognizer  Command="{Binding Path=BindingContext.CloseCommand, Source={x:Reference PageName}}"></TapGestureRecognizer>

                                        </customControls:RadialProgressBase.GestureRecognizers>

                                    </customControls:RadialProgressBase>

                                    <!--<Frame WidthRequest="60" BackgroundColor="White" Padding="5"  >

                                    <Label HorizontalOptions="CenterAndExpand" TextColor="{Binding BackgroundColor}" FontAttributes="Bold" FontSize="14" Text="{Binding Number}"></Label>

                             

                                </Grid>

                             

                                        <Image  Source="arrow_up.png" WidthRequest="15" HeightRequest="15" Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" VerticalOptions="CenterAndExpand" IsVisible="{Binding IsExpand}"  Margin ="3,0,10,0" />

                                        <Image  Source="arrow_down.png" WidthRequest="15" HeightRequest="15"  Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" VerticalOptions="CenterAndExpand" IsVisible="{Binding IsExpand,Converter={StaticResource inverter}}" Margin ="3,0,10,0" />

                                

                                    </Grid>

                              

                                </ViewCell.View>

                            </ViewCell>

                        </DataTemplate>

                    </listView:SfListView.GroupHeaderTemplate>

<------------------------------------------->

Ideally my requirement is that while tapping customControls:RadialProgressBase element only the command link is to be triggered,not the actual expand or collapse behaviour.I still want to keep the collapse/expand behaviour in the other regions of the header.

[Dinesh Babu Yadav]

Hi Samir, 

 

We have checked the reported query “Group header item gets expanded/collapsed and command gets triggered while tapping the item in Android platform” at our end and we would like to let you know that, In Android platform when background color is set for SfListView, touch click listener is not passed to the SfListView due to some limitations in Xamarin Forms Android and the gestures like tapping, double tapping etc.., cannot be detected. So, we have internally override the OnInterceptTouchEvent(Implement this method to intercept all touch screen motion events) in the Android renderer project to detect the gestures event when background color is set. The OnInterceptTouchEvent is a Boolean type override method, if return false, the touch is passed to its child (example button (clicked event or command), gesture recognizer element within the ItemTemplate) and if returns true(default value), touch interaction is not passed to its child and the touch interaction is not detected if background color is set for SfListView. And we have deeply analyzed to provide a workaround regarding this but currently we are unable to achieve it in a sample level due to some limitations in Xamarin Forms.   

   

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav