更改所选项目上的框架和标签颜色 - 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上方的SfListView 。

但是，如果在 Tap 上更改颜色并为第一个项目分离模板是您所需要的。

对于第一项模板

1. 在列表项的模型中为索引添加一个属性。
2. 使用模板选择器中的 index 属性来决定模板

xml

<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>

模板选择器

    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. 将 Item 的 IsActive 属性设置为 true
3. 使用转换器中的 IsActive 属性更改为所需的颜色。

点击手势：

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

颜色转换器：

    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

您可以在 ListView 的 ItemTapped 事件上使用 Converter for BackgroundColor 属性的 Frame 和 Label 来实现您的要求。 请参考以下代码片段以获取更多参考，

Xaml ：将 IsActive 模型属性绑定到 Frame 和 Label 的 BackgroundColor 属性以更改颜色

<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# ：更改 ItemTapped 事件的 IsActive 属性值

    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; 
    }