Изменение цвета рамки и метки для выбранного элемента - syncfusion listview xamarin форм

Question

Я пытался изменить цвет первого элемента моего списка [0], а также, когда я нажал на элемент - цвет, который мне нужно изменить, - это рамка и метки внутри нее.

Я попробовал следующее: BackgroundColor="{Binding IsActive, Converter={StaticResource colorConverter}}"

Это работает только на уровне списка, но ничего внутри шаблона данных. Что еще я могу сделать?

что я ищу, при выделении изменить границу, цвет фона и текста

<sync:SfListView x:Name="list" 
  SelectionMode="Single" 
  SelectionGesture="Tap" 
  ItemTapped="Day_ItemTapped">
    <sync:SfListView.ItemTemplate >
      <DataTemplate>
        <Frame x:Name="frame"
          BackgroundColor="{Binding IsActive, Converter={StaticResource colorConverter}}"
          BorderColor="#D9DADB">
            <StackLayout>
              <Label Text="{Binding dayoftheweek}"  
               TextColor="{Binding textcolor}"/>
            </StackLayout>
          </Frame>
        </DataTemplate>
  </sync:SfListView.ItemTemplate>
</sync:SfListView>

- @ Использование шаблона Селектор и рамка, при повторном нажатии на элемент можно вернуться к исходным цветам?

Answer 1

SfListView как SelectedItemTemplate и HeaderTemplate свойств, которые вы можете использовать, вам нужен отдельный шаблон для выбранного элемента и заголовок выше SfListView.

Но если цвет меняется на Tap и отделяется Вам необходим шаблон для первого элемента.

Для шаблона первого элемента

1. Добавление свойства для индекса в модели элемента списка.
2. Используйте свойство index в селекторе шаблонов для выбора шаблона

Xaml

<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:FirstItem"
    mc:Ignorable="d" x:Class="FirstItem.MainPage">
    <ContentPage.Resources>
        <local:ColorConverter x:Key="colorConverter"/>
        <DataTemplate x:Key="defaultTemplate">
            <ViewCell>
                   <Frame x:Name="frame"
                          BackgroundColor="{Binding IsActive, Converter={StaticResource colorConverter}, ConverterParameter=Frame}"
                          BorderColor="#D9DADB">
                       <Frame.GestureRecognizers>
                           <TapGestureRecognizer
                               Tapped="TapGestureRecognizer_Tapped"/>
                       </Frame.GestureRecognizers>
                       <StackLayout>
                           <Label
                               Text="{Binding Name}"
                               BackgroundColor="{Binding IsActive, Converter={StaticResource colorConverter}, ConverterParameter=Label}"/>
                       </StackLayout>
                   </Frame>
                </ViewCell>
               </DataTemplate>
        <DataTemplate x:Key="firstTemplate">
            <ViewCell>
            <Label
                FontSize="32"
                Text="I'm Header"/>
                </ViewCell>
        </DataTemplate>
    </ContentPage.Resources>
    <StackLayout>
       <ListView
           x:Name="listView">
           <ListView.ItemTemplate>
               <local:ListTemplateSelector
                   DefaultTemplate="{StaticResource defaultTemplate}"
                   FirstTemplate="{StaticResource firstTemplate}"/>
           </ListView.ItemTemplate>
       </ListView>
    </StackLayout>
</ContentPage>

TemplateSelector

    public class ListTemplateSelector : DataTemplateSelector
    {
        public DataTemplate FirstTemplate { get; set; }
        public DataTemplate DefaultTemplate { get; set; }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            if(item != null)
            {
                ListItem listItem = (item as ListItem);
                if (listItem.Index == 0)
                {
                    return FirstTemplate;
                }
            }

            return DefaultTemplate;
        }
    }

Заполнение ListView

    listView.ItemsSource = new List<ListItem>()
            {
                new ListItem(){Index=0, Name="Zero"},
                new ListItem(){Index=1, Name="One"},
                new ListItem(){Index=2, Name="Two"},
                new ListItem(){Index=3, Name="Three"},
                new ListItem(){Index=4, Name="Four"},
                new ListItem(){Index=5, Name="Five"},
                new ListItem(){Index=6, Name="Six"},
                new ListItem(){Index=7, Name="Seven"}
            };

Модель элемента ListView (ListItem.cs)

    public class ListItem : INotifyPropertyChanged
    {
        private bool isActive;

        public bool IsActive
        {
            get
            {
                return isActive;
            }
            set
            {
                isActive = value;
                OnPropertyChanged();
            }
        }

        private int index;

        public int Index
        {
            get
            {
                return index;
            }
            set
            {
                index = value;
                OnPropertyChanged();
            }
        }

        private string name;

        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                name = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

Для изменения цвета при нажатии

1. Установите жест касания для макета элемента
2. Установите для свойства IsActive элемента значение true
3. Используйте свойство IsActive в преобразователе, чтобы изменить его на требуемый цвет.

TapGesture:

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            ((sender as Frame).BindingContext as ListItem).IsActive = !(((sender as Frame).BindingContext as ListItem).IsActive);
        }

ColorConverter:

    public class ColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string sender = (string)parameter;
            if ((bool)value)
            {
                return sender == "Frame" ? Color.Lime : Color.Red;
            }

            return Color.White;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Answer 2

Вы можете выполнить свое требование, используя свойство Converter for BackgroundColor объекта Frame and Label для события ItemTapped в ListView. Для получения дополнительной информации см. Следующий фрагмент кода:

Xaml : привязать свойство модели IsActive к свойству BackgroundColor объекта Frame and Label, чтобы изменить цвет

<syncfusion:SfListView x:Name="dayslist" Margin="10" 
                               SelectionMode="Single"  
                               SelectionGesture="Tap" 
                               Orientation="Horizontal"  
                               ItemTapped="Dayslist_ItemTapped" 
                               ItemsSource="{Binding ContactsInfo}"> 
<syncfusion:SfListView.ItemTemplate> 
                <DataTemplate> 
                    <Frame x:Name="frame" 
                           BackgroundColor="{Binding IsActive, Converter={StaticResource colorConverter}, ConverterParameter={x:Reference frame}}" 
                           BorderColor="#D9DADB"> 
                        <StackLayout> 
                            <Label x:Name="label" Text="{Binding ContactName}" 
                                   BackgroundColor="{Binding IsActive, Converter={StaticResource colorConverter}, ConverterParameter={x:Reference label}}"/> 
                        </StackLayout> 
                    </Frame> 
                </DataTemplate> 
            </syncfusion:SfListView.ItemTemplate> 
</syncfusion:SfListView>

C#: изменить значение свойства IsActive для события ItemTapped

    private void Dayslist_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 
    { 
        var currentItem = e.ItemData as ListViewContactsInfo; 

        currentItem.IsActive = true; 

       //To reset the background color for previous selected item. 
        if (previousItem != null) 
        { 
            previousItem.IsActive = false; 
        } 

        previousItem = currentItem; 
    } 

Преобразователь : вернуть цвет для кадра и метки на основе выбора

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        var item = parameter as Frame; 
        ListViewContactsInfo model = null; 

        if (item != null) 
            model = (parameter as Frame).BindingContext as ListViewContactsInfo; 

        //To change the background color for item[0]. 
        if (model != null && model.Index == 0) 
            return Color.Red; 

        else 
        { 
            //To change the background color for Frame and Label. 
            if ((bool)value) 
                return parameter as Frame != null ? Color.Blue : Color.Yellow; 
        } 
        return Color.Transparent; 
    }