Change frame and label colors on an item selected - syncfusion listview xamarin forms

问题

I have been trying to change the color of the first item of my list[0] and also when I tapped on an Item - the color I need to change is the frame and the labels inside it.

I tried the following: BackgroundColor="{Binding IsActive, Converter={StaticResource colorConverter}}"

This works at the list level only, but nothing inside the data template. What else could I do?

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

回答1:

SfListView as SelectedItemTemplate and HeaderTemplate properties, which you could use you need separate template for selected item and need a header above SfListView.

But if Color change on Tap and separate Template for first item is what you require.

For first item template

Add a property for index in list item's model.
Use the index property in the template selector for deciding the template

Resource

        <!-- default item template-->
        <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>

        <!-- first item template-->
        <DataTemplate x:Key="firstTemplate">
            <ViewCell>
            <Label
                FontSize="32"
                Text="I'm Header"/>
                </ViewCell>
        </DataTemplate>

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

For color change on tap

Set a tap gesture for item layout
Set the IsActive property of the Item to true
Use IsActive property of the in the converter to change to required color.

TapGesture:

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

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

来源：https://stackoverflow.com/questions/59881543/change-frame-and-label-colors-on-an-item-selected-syncfusion-listview-xamarin

标签

listview

xamarin.forms

frame

datatemplate

syncfusion