How to highlight the tapped view in ItemTemplate in .NET MAUI ListView (SfListView)?
In .NET MAUI ListView (SfListView), you can customize the appearance by highlighting views within the ItemTemplate when tapped. This can be achieved through event handling and custom value converters to dynamically change the background color based on user interactions.
XAML
Define your SfListView with a custom ItemTemplate. Use a behavior to handle tap actions and update the view state.
<syncfusion:SfListView x:Name="listView" ItemSpacing="1"
ItemSize="120" ItemsSource="{Binding contactsinfo}">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.Behaviors>
<local:Behavior/>
</Grid.Behaviors>
…
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ContactImage}"/>
<StackLayout Grid.Column="1" Margin="5,0,0,0" Padding="0, 10, 0, 0" >
<Label Text="{Binding ContactName}" VerticalOptions="Center" FontFamily="RobotoMedium"/>
<Label Text="{Binding ContactNumber}" VerticalOptions="Center" FontFamily="RobotoMedium"/>
</StackLayout>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="Availability" FontSize="15" FontFamily="RobotoMedium" HorizontalOptions="Start" VerticalOptions="Center"/>
<Button x:Name="Button1" Margin="5" CornerRadius="15" Text="Busy" FontFamily="RobotoMedium" FontSize="10" BackgroundColor="{Binding Availability, Converter={StaticResource backgroundColorConverter}, ConverterParameter={x:Reference Button1}}" Grid.Column="1"/>
<Button x:Name="Button2" Margin="5" CornerRadius="15" Text="Available" FontFamily="RobotoMedium" FontSize="10" BackgroundColor="{Binding Availability, Converter={StaticResource backgroundColorConverter}, ConverterParameter={x:Reference Button2}}" Grid.Column="2"/>
<Button x:Name="Button3" Margin="5" CornerRadius="15" Text="Away" FontFamily="RobotoMedium" FontSize="10" BackgroundColor="{Binding Availability, Converter={StaticResource backgroundColorConverter}, ConverterParameter={x:Reference Button3}}" Grid.Column="3"/>
</Grid>
<StackLayout Grid.Row="2" BackgroundColor="DarkGray"/>
</Grid>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
C#
This behavior handles the tap event to update the view's background color based on the tapped button.
public class Behavior : Behavior<Grid>
{
Button Button1;
Button Button2;
Button Button3;
protected override void OnAttachedTo(Grid bindable)
{
Button1 = bindable.FindByName<Button>("Button1");
Button2 = bindable.FindByName<Button>("Button2");
Button3 = bindable.FindByName<Button>("Button3");
Button1.Clicked += OnClicked;
Button2.Clicked += OnClicked;
Button3.Clicked += OnClicked;
base.OnAttachedTo(bindable);
}
protected override void OnDetachingFrom(Grid bindable)
{
Button1.Clicked -= OnClicked;
Button2.Clicked -= OnClicked;
Button3.Clicked -= OnClicked;
Button1 = null;
Button2 = null;
Button3 = null;
base.OnDetachingFrom(bindable);
}
private void OnClicked(object sender, EventArgs e)
{
var button = sender as Button;
var bc = button.BindingContext as Contacts;
if (button.Text == "Available")
bc.Availability = true;
else if (button.Text == "Away")
bc.Availability = false;
else
bc.Availability = null;
}
}
C#
Use this converter to adjust the button's background color based on the Availability property.
public class BackgroundColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var button = parameter as Button;
if ((bool?)value == null && button.Text == "Busy")
return Colors.Red;
else if ((bool?)value == true && button.Text == "Available")
return Colors.YellowGreen;
else if ((bool?)value == false && button.Text == "Away")
return Colors.Orange;
else
return Colors.Transparent;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Output
Download the complete sample on GitHub
Conclusion
I hope you enjoyed learning how to highlight the tapped view in ItemTemplate in the .NET MAUI ListView (SfListView).
You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to get started with configuration specifications quickly. You can also explore our .NET MAUI ListView example to understand how to create and manipulate data.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.
Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
