listview - 更改所选项目的框架和标签颜色 - syncfusion listview xamarin forms

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>

-@使用模板选择器和框架，当您再次点击该项目时可以恢复其原始颜色？

标签： listviewxamarin.formsframedatatemplatesyncfusion

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>

模板选择器

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