Xamarin.Les formes ListView: Définir la couleur de mise en évidence d'un élément taraudé

Il semble qu'il y est fait une croix-plate-forme de façon de faire qui fonctionne à la fois sur iOS et Android (pas sûr à propos de Windows). Il utilise seulement contraignant et ne nécessite pas coutume moteurs de rendu (ce qui semble rare). C'est un mash-up de beaucoup de googler, merci donc à toute personne à qui j'ai emprunté...

Je suis en supposant que ViewCells, mais cela devrait fonctionner pour le Texte ou l'Image des cellules. Je ne suis que le code ici-delà de l'habituelle texte, image, etc.

Sur votre page de faire quelque chose comme ceci:

MyModel model1 = new MyModel();
MyModel model2 = new MyModel();

ListView list = new ListView
{
    ItemsSource = new List<MyModel> { model1, model2 };
    ItemTemplate = new DataTemplate( typeof(MyCell) )
};

Votre Modèle personnalisé peut ressembler à quelque chose comme ceci:

public class MyModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private Color _backgroundColor;

    public Color BackgroundColor 
    { 
        get { return _backgroundColor; } 
        set 
        { 
            _backgroundColor = value; 

            if ( PropertyChanged != null )
            {
                PropertyChanged( this, new PropertyChangedEventArgs( "BackgroundColor" ) );
            }
        }
    }

    public void SetColors( bool isSelected )
    {
        if ( isSelected )
        {
            BackgroundColor = Color.FromRgb( 0.20, 0.20, 1.0 );
        }
        else
        {
            BackgroundColor = Color.FromRgb( 0.95, 0.95, 0.95 ); 
        }
    }
}

Alors pour votre ItemTemplate vous avez besoin d'une cellule personnalisé de classe à quelque chose comme ceci:

public class MyCell : ViewCell
{
    public MyCell() : base()
    {
        RelativeLayout layout = new RelativeLayout();
        layout.SetBinding( Layout.BackgroundColorProperty, new Binding( "BackgroundColor" ) );

        View = layout;
    }
}

Puis dans votre ItemSelected gestionnaire d'événements, procédez de la manière suivante. Notez que "sélectionnées" est une instance de Monmodèle utilisé pour le suivi de l'élément actuellement sélectionné. Je veux seulement montrer la couleur de fond ici, mais j'utilise aussi cette technique pour inverser mettez en surbrillance le texte et le détail les couleurs de texte.

private void ItemSelected( object sender, ItemTappedEventArgs args )
{
    //Deselect previous
    if ( selected != null )
    {
        selected.SetColors( false );
    }

    //Select new
    selected = (list.SelectedItem as MyModel);
    selected.SetColors( true );
}

J'ai un processus similaire, complètement croix-plate-forme, cependant je suivre l'état de sélection de moi-même et je l'ai fait dans le code XAML.

 <ListView x:Name="ListView" ItemsSource="{Binding ListSource}" RowHeight="50">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <ViewCell.View>
                <ContentView Padding="10" BackgroundColor="{Binding BackgroundColor}">
                  <Label Text="{Binding Name}" HorizontalOptions="Center" TextColor="White" />
                </ContentView>
              </ViewCell.View>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>

Puis dans le ItemTapped Événement

 ListView.ItemTapped += async (s, e) =>
            {
                var list = ListSource;

                var listItem = list.First(c => c.Id == ((ListItem)e.Item).Id);

                listItem.Selected = !listItem.Selected;

                SelectListSource = list;

                ListView.SelectedItem = null;

            };

Comme vous pouvez le voir je viens de mettre la Liste.SelectedItem à null pour supprimer tout de la plate-forme spécifique sélection de styles qui entrent en jeu.

Dans mon modèle, j'ai

        private Boolean _selected;

        public Boolean Selected
        {
            get
            {
                return _selected;
            }
            set
            {
                _selected = value;
                if (PropertyChanged != null)
                    PropertyChanged(this, new PropertyChangedEventArgs("BackgroundColor"));
            }
        }                 

        public Color BackgroundColor
        {
            get
            {
                if (Selected)
                    return Color.Black;
                else
                    return Color.Blue
            }
        }

Ici est purement de la croix-plate-forme et de façon soignée:

1) Définir un déclencheur d'action

namespace CustomTriggers {
   public class DeselectListViewItemAction:TriggerAction<ListView> {
       protected override void Invoke(ListView sender) {
                sender.SelectedItem = null;
       }
   }
}

2) s'Appliquent à la classe ci-dessus instance comme un EventTrigger action dans le code XAML comme ci-dessous

 <ListView x:Name="YourListView" ItemsSource="{Binding ViewModelItems}">
    <ListView.Triggers>
        <EventTrigger Event="ItemSelected">
            <customTriggers:DeselectListViewItemAction></customTriggers:DeselectListViewItemAction>
        </EventTrigger>
    </ListView.Triggers>
</ListView>

N'oubliez pas d'ajouter xmlns:customTriggers="clr-namespace:CustomTriggers;assembly=ProjectAssembly"

Remarque: Parce qu'aucun de vos articles sont dans le mode sélectionné, la sélection de style ne sera pas appliquée sur l'une des plates-formes.

Trouvé cette belle option à l'aide des effets ici.

iOS:

[assembly: ResolutionGroupName("MyEffects")]
[assembly: ExportEffect(typeof(ListViewHighlightEffect), nameof(ListViewHighlightEffect))]
namespace Effects.iOS.Effects
{
    public class ListViewHighlightEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            var listView = (UIKit.UITableView)Control;

            listView.AllowsSelection = false;
        }

        protected override void OnDetached()
        {
        }
    }
}

Android:

[assembly: ResolutionGroupName("MyEffects")]
[assembly: ExportEffect(typeof(ListViewHighlightEffect), nameof(ListViewHighlightEffect))]
namespace Effects.Droid.Effects
{
    public class ListViewHighlightEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            var listView = (Android.Widget.ListView)Control;

            listView.ChoiceMode = ChoiceMode.None;
        }

        protected override void OnDetached()
        {
        }
    }
}

Formes:

ListView_Demo.Effects.Add(Effect.Resolve($"MyEffects.ListViewHighlightEffect"));

J'ai & utiliser une solution similaire à @adam-pedley.
Aucun moteurs de rendu, dans le code xaml je la lie de fond ViewCell Propriété

                <ListView x:Name="placesListView" Grid.Row="2" Grid.ColumnSpan="3" ItemsSource="{Binding PlacesCollection}" SelectedItem="{Binding PlaceItemSelected}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid BackgroundColor="{Binding IsSelected,Converter={StaticResource boolToColor}}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <Label Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding DisplayName}" Style="{StaticResource blubeLabelBlackItalic}" FontSize="Default" HorizontalOptions="Start" />
                                <Label Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding DisplayDetail}"  Style="{StaticResource blubeLabelGrayItalic}" FontSize="Small" HorizontalOptions="Start"/>
                                <!--
                                <Label Grid.RowSpan="2" Grid.ColumnSpan="2" Text="{Binding KmDistance}"  Style="{StaticResource blubeLabelGrayItalic}" FontSize="Default" HorizontalOptions="End" VerticalOptions="Center"/>
                                -->
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>                    
            </ListView>

Dans le code (MVVM) j'ai enregistrer le lastitemselected par un boolToColor Convertisseur-je mettre à jour couleur d'arrière-plan

    public class BoolToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool)value ? Color.Yellow : Color.White;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (Color)value == Color.Yellow ? true : false;
        }
    }

    PlaceItem LastItemSelected;

    PlaceItem placeItemSelected;
    public PlaceItem PlaceItemSelected
    {
        get
        {
            return placeItemSelected;
        }

        set
        {
            if (LastItemSelected != null)
                LastItemSelected.IsSelected = false;

            placeItemSelected = value;
            if (placeItemSelected != null)
            {
                placeItemSelected.IsSelected = true;
                LastItemSelected = placeItemSelected;
            }
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(PlaceItemSelected)));
        }
    }

Mon exemple est extrait par une liste de lieux qui sont dans un Xamarin Forms Cartes (même contentpage).
J'espère que cette solution sera utile pour quelqu'un

Pour changer la couleur de certains ViewCell, il est un processus simple, sans l'aide personnalisée de rendu. Faire Tapped événement de votre ViewCell comme ci-dessous

<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell Tapped="ViewCell_Tapped">            
        <Label Text="{Binding StudentName}" TextColor="Black" />
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

Dans votre ContentPage ou .cs de fichier, de mettre en œuvre l'événement

private void ViewCell_Tapped(object sender, System.EventArgs e)
{
    if(lastCell!=null)
    lastCell.View.BackgroundColor = Color.Transparent;
    var viewCell = (ViewCell)sender;
    if (viewCell.View != null)
    {
        viewCell.View.BackgroundColor = Color.Red;
        lastCell = viewCell;
    }
} 

Déclarer lastCell en haut de votre ContentPage comme ce ViewCell lastCell;

Les réponses précédentes, soit suggèrent personnalisé convertisseurs ou vous obliger à garder une trace de l'élément sélectionné dans vos objets de données ou autre. Ce n'est pas vraiment nécessaire, il existe un moyen de lien pour le fonctionnement de l' ListView dans une plate-forme de façon agnostique. Cela peut ensuite être utilisé pour modifier l'élément sélectionné en quelque sorte nécessaire. Les couleurs peuvent être modifiés, les différentes parties de la cellule affichée ou masquée en fonction de l'état sélectionné.

Ajoutons une IsSelected propriété à notre ViewCell. Il n'est pas nécessaire de l'ajouter à l'objet de données; la liste sélectionne la cellule, et non pas les données liées.

public partial class SelectableCell : ViewCell {

  public static readonly BindableProperty IsSelectedProperty = BindableProperty.Create(nameof(IsSelected), typeof(bool), typeof(SelectableCell), false, propertyChanged: OnIsSelectedPropertyChanged);
  public bool IsSelected {
    get => (bool)GetValue(IsSelectedProperty);
    set => SetValue(IsSelectedProperty, value);
  }

  //You can omit this if you only want to use IsSelected via binding in XAML
  private static void OnIsSelectedPropertyChanged(BindableObject bindable, object oldValue, object newValue) {
    var cell = ((SelectableCell)bindable);
    //change color, visibility, whatever depending on (bool)newValue
  }

  //...
}

Pour créer le chaînon manquant entre les cellules et la sélection dans la vue liste, nous avons besoin d'un convertisseur (l'idée originale est venue de la Xamarin Forum):

public class IsSelectedConverter : IValueConverter {
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture) =>
    value != null && value == ((ViewCell)parameter).View.BindingContext;

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

Nous connecter les deux à l'aide de ce convertisseur:

<ListView x:Name="ListViewName">
  <ListView.ItemTemplate>
    <DataTemplate>
      <local:SelectableCell x:Name="ListViewCell"
        IsSelected="{Binding SelectedItem, Source={x:Reference ListViewName}, Converter={StaticResource IsSelectedConverter}, ConverterParameter={x:Reference ListViewCell}}" />
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Cette relativement complexe de liaison sert à vérifier réelle de l'élément actuellement sélectionné. Il compare les SelectedItem propriété de la vue de liste à la BindingContext de la vue dans la cellule. Que contexte de liaison est l'objet de données nous fait lier. En d'autres termes, il vérifie si les données de l'objet pointé par SelectedItem est effectivement l'objet de données dans la cellule. Si elles sont les mêmes, nous avons la cellule sélectionnée. Nous lier ce dans le IsSelected propriété qui peut ensuite être utilisé dans le code XAML ou code derrière pour voir si le point de vue de la cellule est dans l'état sélectionné.

Il y a juste une mise en garde: si vous souhaitez définir une valeur par défaut élément sélectionné lorsque votre page s'affiche, vous devez être un peu habile. Malheureusement, Xamarin Forms a pas de page d'Affiche de l'événement, nous avons seulement à Apparaître et c'est trop tôt pour le réglage de la valeur par défaut: la liaison ne sera pas exécuté ensuite. Donc, utiliser un peu de retard:

protected override async void OnAppearing() {
  base.OnAppearing();

  Device.BeginInvokeOnMainThread(async () => {
    await Task.Delay(100);
    ListViewName.SelectedItem = ...;
  });
}