0

我一直在尝试更改列表 [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>

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

在此处输入图像描述

4

2 回答 2

2

SfListView作为SelectedItemTemplateHeaderTemplate属性,您可以使用您需要为所选项目单独的模板,并且需要上面的标题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();
        }
    }
于 2020-01-23T18:35:11.733 回答
0

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

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; 
    } 
于 2020-02-19T10:45:50.423 回答