ListView Tapped 删除数据模板 Xamarin.Forms 上的 StackLayout 背景颜色答案

【问题标题】：ListView Tapped removes StackLayout background color on data template Xamarin.FormsListView Tapped 删除数据模板 Xamarin.Forms 上的 StackLayout 背景颜色
【发布时间】：2019-07-22 05:05:12
【问题描述】：

我不知道为什么，但是当我点击任何 ListView 项目时，它的模板内的 StackLayout 会失去背景颜色。

我在 ListView 中使用默认的 ViewCell。这是 Xamarin.Forms 错误吗？

我只在 Android 上遇到这个问题。

    <StackLayout>             
            <ListView x:Name="Llist"
            ItemTapped="Lista_ItemTapped" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout BackgroundColor="{Binding color}">
                                <Label Text="{Binding name}"/>
                                <Label Text="{Binding age}"/>
                                <Label Text="{Binding sex}"/>

                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>      
            <!--<Button x:Name="excutar" Text="Executar"/>-->
        </StackLayout>
    </ContentPage>

【问题讨论】：

它的颜色会变成橙色还是灰色？
不会改变，当我定义触摸事件时不会改变，但如果我删除列表顶部的 ItemTapped = "ListItemTapped" 它会变为橙色 @G.hakim
所以在单击您的 ListViews 项时，颜色会变为橙色，您不希望这样吗？
它发生了变化，但是在列表中设置 Tapped 事件时，此事件会移除背景颜色
好的，等我知道解决方案在 5 分钟左右添加它

标签： xaml xamarin xamarin.forms xamarin.android

【解决方案1】：

您必须添加一个自定义视图单元格，您可以在其中设置点击颜色：

在您的 PCL 中：

添加一个像这样的自定义 ViewCell：

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

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

在您的 Android 项目中添加以下内容：

public class ExtendedViewCellRenderer : ViewCellRenderer
{

    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)
    {
        try
        {
            _cellCore = base.GetCellCore(item, convertView, parent, context);

            // Save original background to roll-back to it when not selected,
            // we're assuming that no cells will be selected on creation.
            _selected = false;
            _unselectedBackground = _cellCore.Background;

            return _cellCore;
        }
        catch(Exception ex)
        {
            AppLogger.LogException(ex);
            return null;
        }
    }

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

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

                if (_selected)
                {
                    var extendedViewCell = sender as ExtendedViewCell;
                    _cellCore.SetBackgroundColor(extendedViewCell.SelectedBackgroundColor.ToAndroid());
                }
                else
                {
                    _cellCore.SetBackground(_unselectedBackground);
                }
            }
        }
        catch(Exception ex)
        {
            AppLogger.LogException(ex);
        }
    }
}

iOS 类似如下：

public class ExtendedViewCellRenderer : ViewCellRenderer
{
    public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
    {
        try
        {
            var cell = base.GetCell(item, reusableCell, tv);
            var view = item as ExtendedViewCell;
            cell.SelectedBackgroundView = new UIView
            {
                BackgroundColor = view.SelectedBackgroundColor.ToUIColor(),
            };
            cell.SelectionStyle = UITableViewCellSelectionStyle.None;
            return cell;
        }
        catch(Exception ex)
        {
            AppLogger.LogException(ex);
            return null;
        }
    }

}

现在不要忘记在命名空间上方的本机类上添加自定义渲染器标题

[assembly: ExportRenderer(typeof(ExtendedViewCell), typeof(ExtendedViewCellRenderer))]

现在你要做的就是用这个控件视图单元替换上面的 ViewCell 并传递 SelectedBackgroundProperty。

在你的情况下，它看起来像这样：

<ListView x:Name="Llist"
        ItemTapped="Lista_ItemTapped" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <nameSpace:ExtendedViewCell SelectedBackgroundColor="White">
                        <StackLayout BackgroundColor="{Binding color}">
                            <Label Text="{Binding name}"/>
                            <Label Text="{Binding age}"/>
                            <Label Text="{Binding sex}"/>

                        </StackLayout>
                    </nameSpace:ExtendedViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

【讨论】：