В этой статье блога мы рассмотрим различные методы установки выделенного цвета фона в MAUI (пользовательский интерфейс многоплатформенного приложения) CollectionView.ItemTemplate. Мы предоставим примеры кода для демонстрации каждого метода. Давайте погрузимся!

Метод 1: использование триггеров данных

<CollectionView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.Style>
                <Style TargetType="Grid">
                    <Setter Property="BackgroundColor" Value="White" />
                    <Style.Triggers>
                        <DataTrigger
                            Binding="{Binding Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type CollectionView}}, Path=SelectedItem}"
                            Value="{Binding}">
                            <Setter Property="BackgroundColor" Value="LightGray" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>
            <!-- Add your item template content here -->
        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

Метод 2: использование пользовательского средства визуализации (Android)

[assembly: ExportRenderer(typeof(CollectionView), typeof(CustomCollectionViewRenderer))]
namespace YourNamespace
{
    public class CustomCollectionViewRenderer : CollectionViewRenderer
    {
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == nameof(CollectionView.SelectedItem))
            {
                // Access the native control
                var nativeControl = Control as AndroidX.RecyclerView.Widget.RecyclerView;
                // Set the background color for the selected item
                var selectedItem = (sender as CollectionView)?.SelectedItem;
                var selectedPosition = (sender as CollectionView)?.ItemsSource?.IndexOf(selectedItem);
                nativeControl.GetChildAt(selectedPosition)?.SetBackgroundColor(Android.Graphics.Color.LightGray);
            }
        }
    }
}

Метод 3: использование пользовательского ItemTemplateSelector

public class HighlightedItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate NormalTemplate { get; set; }
    public DataTemplate SelectedTemplate { get; set; }
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var collectionView = container as CollectionView;
        if (collectionView.SelectedItem == item)
            return SelectedTemplate;
        else
            return NormalTemplate;
    }
}
<CollectionView.ItemTemplateSelector>
    <local:HighlightedItemTemplateSelector
        NormalTemplate="{StaticResource NormalTemplate}"
        SelectedTemplate="{StaticResource SelectedTemplate}" />
</CollectionView.ItemTemplateSelector>

В этой статье мы рассмотрели три различных метода установки выделенного цвета фона в MAUI CollectionView.ItemTemplate: использование триггеров данных, использование пользовательского средства визуализации (Android) и использование пользовательского ItemTemplateSelector. Каждый метод обеспечивает гибкость и позволяет разработчикам достичь желаемого эффекта пользовательского интерфейса. Реализуя эти методы, вы можете улучшить визуальное восприятие ваших приложений MAUI. Приятного кодирования!