<listView:SfListView.GroupHeaderTemplate>
<DataTemplate>
<Grid BackgroundColor="Teal">
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Grid.GestureRecognizers>
<Label Text="{Binding Key}" FontSize="22" FontAttributes="Bold"
VerticalOptions="Center" HorizontalOptions="Start"
Margin="20,0,0,0" />
<Button Text="Click Me" TextColor="White" Grid.Column="1"
BackgroundColor="Teal" FontSize="Medium"
Clicked="Button_Clicked" HorizontalOptions="Start"
VerticalOptions="Center"/>
</Grid>
</DataTemplate>
</listView:SfListView.GroupHeaderTemplate> |
private void Button_Clicked(object sender, EventArgs e)
{
//Do your necessary actions here
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var grid = sender as Grid;
var group = grid.BindingContext as GroupResult;
if (group.IsExpand)
listView.CollapseGroup(group);
else
listView.ExpandGroup(group);
} |
Hi Dinesh,
Thank you for your reply!
Although our issue is with the ListViewItems and not the group template, I believe what you are saying can probably be made for ListViewItems as well.
I also believe I am familiar with android defect you are talking about? Is this it? https://bugzilla.xamarin.com/show_bug.cgi?id=55912
If it is, the xamarin team have released a fix, that is current in one of their Beta builds. I am currently using the beta build, and this fix is in it, is there a way to override your renderer so that I can set this back to true?
Regards,
-Jeff
Hi Dinesh,
This workaround does fix the issue where the ItemTapped even is firing when it shouldn't.. but by doing this another problems occurs:
In our ViewCell when have a 'Grid' that by default has 'IsVisible=False'. In our tapped handler, we are effectively adding some controls into this grid and then setting this Grid's IsVisible property to True.
For reference our ViewCell looks like the below:
ViewCell
--Grid
----Grid (Main content)
----Grid (The IsVisible=False one, should expand when ListViewItem is clicked)
----BoxView (Separator line)
When we were doing this on the ItemTapped event, everything worked as expected, the controls would be added, IsVisible is set to True, and the ListViewItem would be expanded to show the new controls.
After switching the event handler to occur on the gesture recognizer of the parent Grid in the ViewCell, the ListViewItem is no longer AutoFit when we add the controls/ set IsVisible=true (although I can see that stuff is added, because the box view disappears, like it is being pushed down below the visible clipping). Occasionally I will see that cell expands, but the content is blank, almost like the height was finally recalculated, but only after attempting to remove the added controls.
Note: we add/ remove controls to the grid in question because when we had them as part of the Grid in Xaml, it would cause a major memory leak and our app would run out of memory while scrolling in the ListView.
Any ideas how to get around this issue?
Regards,
-Jeff
Thank you Dinesh,
This issue is a 'showstopper' for us, so any help is greatly appretiated!
Regards,
-Jeff
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var grid = sender as Grid;
var listviewItem = grid.Parent as ListViewItem;
var listviewinfo = listviewItem.GetType().GetRuntimeProperties().
FirstOrDefault(x => x.Name =="ListViewItemInfo").
GetValue(listviewItem) as ListViewItemInfo;
var item = grid.BindingContext as ListViewBookInfo;
item.IsDetailsVisible = !item.IsDetailsVisible;
listviewinfo.ListView.RefreshView();
} |
public class MyDataTemplateSelector : Xamarin.Forms.DataTemplateSelector
{
public MyDataTemplateSelector()
{
// Retain instances!
this.detailsViewDataTemplate = new DataTemplate(typeof(DetailsView));
this.nondetailsViewDataTemplate = new DataTemplate(typeof(NonDetailsView));
}
protected override DataTemplate OnSelectTemplate(object item,
BindableObject container)
{
var bookinfo = item as ListViewBookInfo;
if (bookinfo == null)
return null;
return bookinfo.IsDetailsVisible ? this.detailsViewDataTemplate :this.nondetailsViewDataTemplate;
}
private readonly DataTemplate detailsViewDataTemplate;
private readonly DataTemplate nondetailsViewDataTemplate;
} |
Hi Jeff,Apologies for the delay.The reported issues can be resolved by using different custom views bind to the ItemTemplate property by using DataTemplateSelector and add the tap gesture recognizer to each views as provided in previous update similar to GroupHeaderTemplate property. You need to use two views, one for defining the IsVisible as true and another for resetting the visibility to false. So, when an item is tapped, tap gesture event for the respective view will be triggered and change the property value which is used to select the template as like below code example.Code Example[C#]:
private void TapGestureRecognizer_Tapped(object sender, EventArgs e){var grid = sender as Grid;var listviewItem = grid.Parent as ListViewItem;var listviewinfo = listviewItem.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name =="ListViewItemInfo").GetValue(listviewItem) as ListViewItemInfo;var item = grid.BindingContext as ListViewBookInfo;item.IsDetailsVisible = !item.IsDetailsVisible;listviewinfo.ListView.RefreshView();}Code Example[C#]:
public class MyDataTemplateSelector : Xamarin.Forms.DataTemplateSelector{public MyDataTemplateSelector(){// Retain instances!this.detailsViewDataTemplate = new DataTemplate(typeof(DetailsView));this.nondetailsViewDataTemplate = new DataTemplate(typeof(NonDetailsView));}protected override DataTemplate OnSelectTemplate(object item,BindableObject container){var bookinfo = item as ListViewBookInfo;if (bookinfo == null)return null;return bookinfo.IsDetailsVisible ? this.detailsViewDataTemplate :this.nondetailsViewDataTemplate;}private readonly DataTemplate detailsViewDataTemplate;private readonly DataTemplate nondetailsViewDataTemplate;}For your reference, we have modified the sample with the above code example and you can download it from the below link.Note: There is an problem in autofit while using single ItemTemplate and switching the visibility of the Grid within ItemTemplate. That is, measuring the size of the item doesn’t returns proper height since the visibility has been updated only on PCL and not on native element. So, you can use the above approach to achieve your requirement.Please let us know if you require further assistance.Regards,Dinesh Babu Yadav
Hi Dinesh,
Doing it this way seemed to do the trick! We are noticing that occasional though that the listview is a little jumpy (its intermittent, but all of a sudden the top of the listview is empty, and I need to scroll to make it appear again). I am wondering if it has to do with constantly refreshing the list view.
In any case, thank you so much for your support! It seems to finally be usable :).
Best Regards,
-Jeff
private void OnCategoryTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e)
{
DisplayAlert("Alert", "Selected Book number: " + (e.ItemData as categoryModel).category_id, "OK");
} |
Hi Jeff,Apologies for the delay.The reported issues can be resolved by using different custom views bind to the ItemTemplate property by using DataTemplateSelector and add the tap gesture recognizer to each views as provided in previous update similar to GroupHeaderTemplate property. You need to use two views, one for defining the IsVisible as true and another for resetting the visibility to false. So, when an item is tapped, tap gesture event for the respective view will be triggered and change the property value which is used to select the template as like below code example.Code Example[C#]:
private void TapGestureRecognizer_Tapped(object sender, EventArgs e){var grid = sender as Grid;var listviewItem = grid.Parent as ListViewItem;var listviewinfo = listviewItem.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name =="ListViewItemInfo").GetValue(listviewItem) as ListViewItemInfo;var item = grid.BindingContext as ListViewBookInfo;item.IsDetailsVisible = !item.IsDetailsVisible;listviewinfo.ListView.RefreshView();}Code Example[C#]:
public class MyDataTemplateSelector : Xamarin.Forms.DataTemplateSelector{public MyDataTemplateSelector(){// Retain instances!this.detailsViewDataTemplate = new DataTemplate(typeof(DetailsView));this.nondetailsViewDataTemplate = new DataTemplate(typeof(NonDetailsView));}protected override DataTemplate OnSelectTemplate(object item,BindableObject container){var bookinfo = item as ListViewBookInfo;if (bookinfo == null)return null;return bookinfo.IsDetailsVisible ? this.detailsViewDataTemplate :this.nondetailsViewDataTemplate;}private readonly DataTemplate detailsViewDataTemplate;private readonly DataTemplate nondetailsViewDataTemplate;}For your reference, we have modified the sample with the above code example and you can download it from the below link.Note: There is an problem in autofit while using single ItemTemplate and switching the visibility of the Grid within ItemTemplate. That is, measuring the size of the item doesn’t returns proper height since the visibility has been updated only on PCL and not on native element. So, you can use the above approach to achieve your requirement.Please let us know if you require further assistance.Regards,Dinesh Babu YadavHi Dinesh,
Doing it this way seemed to do the trick! We are noticing that occasional though that the listview is a little jumpy (its intermittent, but all of a sudden the top of the listview is empty, and I need to scroll to make it appear again). I am wondering if it has to do with constantly refreshing the list view.
In any case, thank you so much for your support! It seems to finally be usable :).
Best Regards,
-Jeff