Need the Multi selectable, but don´t lose OnItemSelected for the Grid Items.

[marcelo couto fernandes]

So, I implemented to test, but when i customize the item selectable by a image (based on example), all the grid item is selectable.
I need when the user Touch the listview item, do one thing. When the user Touch the image (selectable), mark the item as SelectedItem. 

How to do this ?

Thanks.

[Muthu Kumaran Gnanavinayagam]

Hi Marcelo, 

 

You can achieve the reported requirement by modifying the Image source for Image element inside ItemTemplate of SfListView using the TapGestureRecognizers. If you need to disable the selection of the SfListView items, you can set the InputTransparent as ‘True’ for Android and ‘False’ for iOS and UWP platforms for the base parent View inside ItemTemplate of SfListView. By doing so, you can get the checked and unchecked image while tapping the Image element. 

 

For your reference, we have attached the sample and you can download it from the below link. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/136319/ze/SfListViewSample-656147192 

 

Note: Using TapGestureRecognizers for element inside ItemTemplate of SfListView is not advisable as it breaks the selection action in SfListView. So if you want to implement selection based applications, we recommend you to use the Selection related events and methods in SfListView. 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu kumaran. 

[marcelo couto fernandes]

Really? I need the selection atributte when clicked on the image :(

[marcelo couto fernandes]

Now, if I click on the grid, the Image change and the "Item is selected". But I need, if the User click at a CircleImage or at a Label, Go to a webview. And if click at the "SELECT Image" or other place, that is not the CircleImage or Label, mark the item as selected. So, may i add a CircleImage tap gesture to go to the webview and if whatever other place clicked, mark as selected (changing the SelectedImage) ?? Thanks.

I am trying to put my code, but not success.

[marcelo couto fernandes]

Now, if I click on the grid, the Image change and the "Item is selected". But I need, if the User click at a CircleImage or at a Label, Go to a webview. And if click at the "SELECT Image" or other place, that is not the CircleImage or Label, mark the item as selected. So, may i add a CircleImage tap gesture to go to the webview and if whatever other place clicked, mark as selected (changing the SelectedImage) ?? Thanks.

I am trying to put my code, but not success.

I tried to put a TapGestureRecognize at circle Image and e.Handled=true when TappedOnImage, but not success. Check my XAML code attached and help me if you can.

Thanks.

Attachment: Views_663aa905.zip

[Rawoof Sharief Muthuja Sherif]

Hi Marcelo, 

  

We would like to let you know that you can achieve your requirement by maintaining a separate Grid for the Image element and another Grid to load the remaining elements(if any) inside ItemTemplate of SfListView. ItemTapped event will be triggered while tapping on the Image element in Android platform because 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 within the ItemTemplate) and if returns true(default value), touch interaction is not passed to its child.  

  

So, you can handle the ItemTapped event through ItemTappedEventArgs in case of Android platform. But if you want to recognize the tap of the item, you can set the InputTransparent for android platform as ‘False’ for the Grid containing other elements and perform your selection operation using the Command and CommandParameters as like below code example.   

  

Code Example[XAML]:  

<ContentPage.Content>  

    <Grid>  

      <Grid.RowDefinitions>  

        <RowDefinition Height="*" />  

      </Grid.RowDefinitions>  

      <listView:SfListView x:Name="listView" ItemSize="70" ItemsSource="{Binding contactsinfo}"SelectionMode="Single" ItemTapped="listView_ItemTapped">  

  

        <listView:SfListView.ItemTemplate>  

          <DataTemplate>  

            <ViewCell>  

              <ViewCell.View>  

               <Grid x:Name="grid" RowSpacing="1">      

                  <Grid.RowDefinitions>  

                    <RowDefinition Height="*" />  

                    <RowDefinition Height="1" />  

                  </Grid.RowDefinitions>  

                   <Grid.ColumnDefinitions>  

                       <ColumnDefinition Width="50"/>  

                       <ColumnDefinition Width="*"/>  

                   </Grid.ColumnDefinitions>  

                     

                    <Image Source="{Binding ContactImage}" x:Name="image"  

                           VerticalOptions="Center"  

                           HorizontalOptions="Center"  

                           HeightRequest="50">  

                        <Image.GestureRecognizers>  

                           <TapGestureRecognizer Command="{Binding Source={x:Reference listView},Path=BindingContext.ImageTappedCommand}" CommandParameter="{Binding .}"/>  

                        </Image.GestureRecognizers>  

                    </Image>  

  

                  <Grid RowSpacing="1" Grid.Column="1">  

                      <Grid.InputTransparent>  

                        <OnPlatform x:TypeArguments="x:Boolean">  

                            <OnPlatform.WinPhone>  

                              <OnIdiom x:TypeArguments="x:Boolean" Phone="True" Tablet="True"Desktop="True" />  

                            </OnPlatform.WinPhone>  

                            <OnPlatform.Android>  

                              <OnIdiom x:TypeArguments="x:Boolean"  

                                       Phone="False"  

                                       Tablet="False" />  

                            </OnPlatform.Android>  

                            <OnPlatform.iOS>  

                              <OnIdiom x:TypeArguments="x:Boolean"  

                                       Phone="True"  

                                       Tablet="True" />  

                            </OnPlatform.iOS>  

                          </OnPlatform>  

                   </Grid.InputTransparent>  

  

                   <Grid.GestureRecognizers>  

                       <TapGestureRecognizer Command="{Binding Source={x:Reference listView}, Path= BindingContext.GridTappedCommand}" CommandParameter="{Binding .}"/>  

                   </Grid.GestureRecognizers>  

  

                    <Grid RowSpacing="1"  

                          Padding="10,0,0,0"  

                          VerticalOptions="Center">  

                      <Grid.RowDefinitions>  

                        <RowDefinition Height="*" />  

                        <RowDefinition Height="*" />  

                      </Grid.RowDefinitions>  

  

                      <Label LineBreakMode="NoWrap"  

                             TextColor="#474747"  

                             Text="{Binding ContactName}">  

                      </Label>  

                      <Label Grid.Row="1"  

                             Grid.Column="0"  

                             TextColor="#474747"  

                             LineBreakMode="NoWrap"  

                             Text="{Binding ContactNumber}">  

                      </Label>  

                    </Grid>  

                    <Grid Grid.Row="0"  

                          Grid.Column="2"  

                          RowSpacing="0"  

                          HorizontalOptions="End"  

                          Padding="0,10,10,0">  

                      <Label LineBreakMode="NoWrap"  

                             TextColor="#474747"  

                             Text="{Binding ContactType}">  

                      </Label>  

                    </Grid>  

                  </Grid>  

                  <StackLayout Grid.Row="1" Grid.ColumnSpan="2" BackgroundColor="Gray"HeightRequest="1"/>  

                </Grid>  

              </ViewCell.View>  

            </ViewCell>  

          </DataTemplate>  

        </listView:SfListView.ItemTemplate>  

      </listView:SfListView>  

    </Grid>  

  </ContentPage.Content>  

  

Note: When GestureRecognizers for element inside ItemTemplate is used, the touch will not be passed to SfListView and basic selection operations will not be performed in UWP and iOS platform. So while using GestureRecognizers, you need to set the InputTransparent as ‘True’ as like above.  

  

We have prepared a sample to achieve your requirement and you can download it from the below link.  

  

Sample link:  http://www.syncfusion.com/downloads/support/forum/136319/ze/SfListViewSample295602342  

 

Please let us know if you require further assistance.  

 

Regards, 

Rawoof M 

[marcelo couto fernandes]

I will give a try tomorrow. Thank you so much for the help.
I am trying to understand and apply to my code. If you help me with my example, that i attached before, it will be thankfull.

Thank you so much !

[marcelo couto fernandes]

I am trying but not success on it.
I am trying to do like this:

One Main Grid, containing : 1) Child Grid with the image and 2 labels, 2) Child Grid containing the image of "selected or not"

The 1) Grid i putted Transparency False and the 2) i left without nothing.

But didn´t work.

[Rawoof Sharief Muthuja Sherif]

Hi Marcelo, 

 

Sorry for the inconvenience. 

 

Based on your requirement, we have prepared the sample with similar to your code example (i.e., XAML page) and you can download it from the below link. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/136319/ze/CustomSelection1319521891  

 

In the sample, we have loaded the image in a grid and loaded rest of the elements in another grid and added the tap gesture recognizers to both the grid elements separately. In the image grid element, on tapping the image view, you can redirect to another link as your requirement and on tapping the other view, the selected image gets visible by using converter as like below code example. 

 

Code Example[XAML]: 

<ContentPage.Resources> 

  <ResourceDictionary> 

     <local:ImageSelectionConverter x:Key="ImageSelectionConverter"/> 

  </ResourceDictionary> 

</ContentPage.Resources> 

… 

<sync:SfListView x:Name="listView"> 

… 

 <sync:SfListView.ItemTemplate> 

… 

  <Grid.GestureRecognizers> 

    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/> 

  </Grid.GestureRecognizers> 

  <Label  Grid.Row="0" Text="{Binding SongTitle}" FontAttributes="Bold" VerticalOptions="End" /> 

  <Label  Grid.Row="1" Text="{Binding SongAuther}" Font="Small" TextColor="#4BA0FB" VerticalOptions="Start"/> 

  <Image  Grid.Row="0" Source="{Binding IsSelected, Converter=ImageSelectionConverter}"  

… 

  </sync:SfListView.ItemTemplate> 

</sync:SfListView> 

 

Code Example[C#]: 

public class ImageSelectionConverter : IValueConverter 

{ 

   public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

   { 

       var isselected = (bool)value; 

       if (isselected) 

           return ImageSource.FromResource("CustomSelection.Images.Selected.png"); 

       return ImageSource.FromResource("CustomSelection.Images.NotSelected.png"); 

   } 

 

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

   { 

      throw new NotImplementedException(); 

   } 

} 

 

Please let us know if you require further assistance. 

 

Regards, 

Rawoof M 

[marcelo couto fernandes]

Worked!!!

Thank you so much.

[Rawoof Sharief Muthuja Sherif]

Hi Marcelo, 

 

Thanks for your valuable response. 

 

Regards, 

Rawoof M