Category / Section
How to display the overlay view over ListViewItem while tapping the item?
1 min read
You can display the overlay view over the ListViewItem while tapping a button in the item. It can be achieved by binding Command from ViewModel and changing IsVisibile property of each item’s binding context(model).
C#:
public class BookInfoRepository
{
private ICommand tapcommand;
public ICommand TapCommand
{
get { return tapcommand; }
set { this.tapcommand = value; }
}
public BookInfoRepository()
{
TapCommand = new Command(OnButtonTapped);
}
private void OnButtonTapped(object obj)
{
var item = obj as BookInfo;
if(item.TemplateVisible)
{
item.TemplateVisible = false;
item.OveralyVisible = true;
}
else
{
item.TemplateVisible = true;
item.OveralyVisible = false;
}
}
}
XAML:
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
<syncfusion:SfListView x:Name="listView"
ItemsSource="{Binding BookInfo}"
ItemSize="100">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid IsVisible="{Binding TemplateVisible}">
<Button Command="{Binding Path=BindingContext.TapCommand, Source={x:Reference Name=listView}}" CommandParameter="{Binding .}" Text="MayBe"/>
<Button Command="{Binding Path=BindingContext.TapCommand, Source={x:Reference Name=listView}}" CommandParameter="{Binding .}" Text="Yes"/>
<Button Command="{Binding Path=BindingContext.TapCommand, Source={x:Reference Name=listView}}" CommandParameter="{Binding .}" Text="No"/>
</Grid>
<Grid IsVisible="{Binding OveralyVisible}" BackgroundColor="#F5F6CE">
<Label Text="Undo"/>
<Label Text="Add"/>
</Grid>
</Grid>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</ContentPage>
Run the application to renderer the following output.
Sample : OverlaySample
