Xamarin.Forms ListView: Legen Sie die Hervorhebungsfarbe eines angetippten Objekts fest

Sieht es so aus, eigentlich ein cross-Plattform-Weg, dies zu tun, das funktioniert auf iOS und Android (nicht sicher über Windows). Es nutzt nur verbindlich, und braucht keine custom-Renderern (das scheint selten). Dies ist ein mash-up von viel googeln, also danke an alle, die ich haben kann, entlehnt aus...

Ich gehe davon aus, dass ViewCells, aber diese Arbeit sollte für Text-oder Image-Zellen als auch. Ich bin nur mit den relevanten code hier jenseits der typischen text, Bild, etc.

Auf Ihrer Seite, die so etwas tun:

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

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

Ihr eigenes Modell könnte wie folgt Aussehen:

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

Dann für Ihre ItemTemplate müssen Sie eine benutzerdefinierte Zelle-Klasse so etwas wie dieses:

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

        View = layout;
    }
}

Dann in Ihre ItemSelected event-handler, tun die folgende. Beachten Sie, dass 'ausgewählt' ist eine Instanz von MyModel verwendet, um zu verfolgen das derzeit ausgewählte Element. Ich bin nur zu zeigen, Hintergrundfarbe hier, aber ich habe auch diese Technik verwenden, um reverse-markieren Sie den text und detail-text-Farben.

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

Habe ich screenshots von beiden iOS und Android-wenn jemand will, zu stoßen, mich auf 10 Punkte, so dass ich eigentlich posten 🙂

InformationsquelleAutor der Antwort Barry Sohl

iOS

Lösung:

Innerhalb einer benutzerdefinierten ViewCellRenderer können Sie die SelectedBackgroundView. Erstellen Sie einfach eine neue UIView mit einer Hintergrundfarbe Ihrer Wahl, und Sie sind gesetzt.

public override UITableViewCell GetCell(Cell item, UITableView tv)
{
    var cell = base.GetCell(item, tv);

    cell.SelectedBackgroundView = new UIView {
        BackgroundColor = UIColor.DarkGray,
    };

    return cell;
}

Ergebnis:

Hinweis:

Mit Xamarin.Formen scheint es wichtig zu sein, erstellen Sie eine neue UIView anstatt nur die Einstellung der Hintergrundfarbe der aktuellen Zeile.

Android

Lösung:

Die Lösung fand ich auf Android ist ein bisschen komplizierter:

1. Erstellen Sie ein neues drawable ViewCellBackground.xml innerhalb der Resources>drawable Ordner:

   <?xml version="1.0" encoding="UTF-8" ?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:state_pressed="true" >
           <shape android:shape="rectangle">
               <solid android:color="#333333" />
           </shape>
       </item>
       <item>
           <shape android:shape="rectangle">
               <solid android:color="#000000" />
           </shape>
       </item>
   </selector>

   Definiert solide Formen mit verschiedenen Farben für die Standard-Staat und der "gedrückten" Zustand des UI-Elements.

2. Nutzung einer geerbten Klasse für die View Ihrer ViewCellz.B.:

   public class TouchableStackLayout: StackLayout
   {
   }

3. Implementieren einer benutzerdefinierten renderer für diese Klasse Einstellung hintergrund-Ressource:

   public class ElementRenderer: VisualElementRenderer<Xamarin.Forms.View>
   {
       protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.View> e)
       {
           SetBackgroundResource(Resource.Drawable.ViewCellBackground);
   
           base.OnElementChanged(e);
       }
   }

Ergebnis:

InformationsquelleAutor der Antwort Falko

Ich hatte das gleiche Problem und habe es gelöst, sowie durch die Erstellung einer benutzerdefinierten renderer für iOS-wie Falko schon sagt, allerdings vermied ich es, die Stile, die änderungen für Android, ich habe einen Weg herausgefunden, um eine benutzerdefinierte renderer für Android als gut.

Es ist irgendwie funky wie die ausgewählten flag immer false für die android-Ansicht Zelle, die ist, warum ich hatte zum erstellen einer neuen privaten Eigentums zu verfolgen. aber außer, dass ich denke, dies ergibt eine geeignetere Muster, wenn Sie möchten, verwenden Sie den benutzerdefinierten Renderer für beide Plattformen, In meinem Fall habe ich es für TextCell aber ich glaube, es gilt genauso für andere CellViews.

Xamarin Forms

public class CustomTextCell : TextCell
    {
        ///<summary>
        ///The SelectedBackgroundColor property.
        ///</summary>
        public static readonly BindableProperty SelectedBackgroundColorProperty =
            BindableProperty.Create("SelectedBackgroundColor", typeof(Color), typeof(CustomTextCell), Color.Default);

        ///<summary>
        ///Gets or sets the SelectedBackgroundColor.
        ///</summary>
        public Color SelectedBackgroundColor
        {
            get { return (Color)GetValue(SelectedBackgroundColorProperty); }
            set { SetValue(SelectedBackgroundColorProperty, value); }
        }
    }

iOS

public class CustomTextCellRenderer : TextCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var cell = base.GetCell(item, reusableCell, tv);
            var view = item as CustomTextCell;
            cell.SelectedBackgroundView = new UIView
            {
                BackgroundColor = view.SelectedBackgroundColor.ToUIColor(),
            };

            return cell;
        }
    }

Android

public class CustomTextCellRenderer : TextCellRenderer
{
    private Android.Views.View cellCore;
    private Drawable unselectedBackground;
    private bool selected;

    protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, ViewGroup parent, Context context)
    {
        cellCore = base.GetCellCore(item, convertView, parent, context);

        //Save original background to rollback to it when not selected,
        //We assume that no cells will be selected on creation.
        selected = false;
        unselectedBackground = cellCore.Background;

        return cellCore;
    }

    protected override void OnCellPropertyChanged(object sender, PropertyChangedEventArgs args)
    {
        base.OnCellPropertyChanged(sender, args);

        if (args.PropertyName == "IsSelected")
        {
            //I had to create a property to track the selection because cellCore.Selected is always false.
            //Toggle selection
            selected = !selected;

            if (selected)
            {
                var customTextCell = sender as CustomTextCell;
                cellCore.SetBackgroundColor(customTextCell.SelectedBackgroundColor.ToAndroid());
            }
            else
            {
                cellCore.SetBackground(unselectedBackground);
            }
        }
    }
}

InformationsquelleAutor der Antwort alexcons

In Ordnung, um die Farbe des markierten Element, das Sie brauchen, um die Farbe des cell.SelectionStyle im iOS.

Diesem Beispiel ist, um die Farbe des angezapft Element transparent.

Wenn Sie wollen, ändern können Sie es mit anderen Farben aus UITableViewCellSelectionStyle. Dies ist schriftlich in der Plattform-Projekt von iOS, indem Sie eine neue Benutzerdefinierte ListView-renderer in Ihre Forms-Projekt.

public class CustomListViewRenderer : ListViewRenderer
    {
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (Control == null)
            {
                return;
            }

            if (e.PropertyName == "ItemsSource")
            {
                foreach (var cell in Control.VisibleCells)
                {
                    cell.SelectionStyle = UITableViewCellSelectionStyle.None;
                }
            }
        }
    }

Für android können Sie dieses Format in Ihre values/styles.xml

<style name="ListViewStyle.Light" parent="android:style/Widget.ListView">
    <item name="android:listSelector">@android:color/transparent</item>
    <item name="android:cacheColorHint">@android:color/transparent</item>
  </style>

InformationsquelleAutor der Antwort Sawan Kumar Bundelkhandi

Habe ich & verwenden Sie eine Lösung ähnlich wie @adam-pedley.
Keine custom Renderer in der xaml-ich Binde hintergrund ViewCell Eigenschaft

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

Im code (MVVM) - ich Speichere die lastitemselected durch eine boolToColor Converter update ich die hintergrund Farbe

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

Mein Beispiel ist extrahiert von einem listview-von Orten, die in einem Xamarin Forms Karten (gleiche contentpage).
Ich hoffe, diese Lösung wird nützlich sein für jemanden, der

InformationsquelleAutor der Antwort Luigino De Togni