xamarin - 如何阻止单击 ViewCell 来短暂更改背景颜色？

Question

我有这个 XAML 代码:

<TableView x:Name="tableView" Intent="Settings" HasUnevenRows="True">
   <TableSection>
      <TableSection.Title>
         Card Selection
      </TableSection.Title>
      <ViewCell Height="50">
         <Grid>
            <Grid x:Name="deselectGridLink" VerticalOptions="CenterAndExpand" Padding="20, 0">
               <Label TextColor="Blue" Style="{DynamicResource ListItemTextStyle}" x:Name="deselectLink" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Text="Deselect All" />
            </Grid>
            <Grid x:Name="deselectGridLabel" VerticalOptions="CenterAndExpand" Padding="20, 0">
               <Label TextColor="Silver" Style="{DynamicResource ListItemTextStyle}" x:Name="deselectLabel" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Text="Deselect All" />
            </Grid>
         </Grid>
       </ViewCell>
       <ViewCell Height="50">
          <Grid x:Name="selectGridLink" VerticalOptions="CenterAndExpand" Padding="20, 0">
             <Label TextColor="Blue" Style="{DynamicResource ListItemTextStyle}" x:Name="selectLink" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Text="Select All" />
           </Grid>
        </ViewCell>
   </TableSection>
</TableView>

当我的代码的其他部分调用:SetPageDetails() 时，网格中的标签将更改为链接，或者链接将更改为标签。因此，对于这个标签，我希望没有背景闪光事件，也没有调用任何操作。

我附加了一个像这样的点击手势识别器。请注意，它全部在一行上，但涵盖了两行，因此在 SO 问题中更明显:

deselectGridLink.GestureRecognizers
      .Add(NewTapGestureForUpdateCategories(false));

    private TapGestureRecognizer NewTapGestureForUpdateCategories(bool val)
    {
        return new TapGestureRecognizer()
        {
            Command = new Command(() =>
            {
                App.DB.UpdateAllCategoryGroups(val);
                App.DB.UpdateAllCategories(val);
                GetPageData();
                RemoveTableViewClickSection();
                tableView.Root.Add(CreateTableSection());
            })
        };
    }

当用户单击该行且 deselectGridLink 网格可见时:

• 取消选择GridLink 可见性设置为 false

• 取消选择GridLabel可见性设置为true

  private void SetPageDetails()
  {
      Title = App.cardCountForSelectedCategories + (App.cardCountForSelectedCategories == 1 ? " Card Selected" : " Cards Selected");
      if (App.cardCountForSelectedCategories == 0)
      {
          deselectGridLink.IsVisible = false;
          deselectGridLabel.IsVisible = true;
      }
      else
      {
          deselectGridLink.IsVisible = true;
          deselectGridLabel.IsVisible = false;
      }
  }
  

这样做的效果是网格链接文本将变为银色，并且链接变为标签。

但是，即使单击标签时它是灰色标签，单击标签时仍然会有短暂的背景行颜色从白色变为深色。我认为这就是 View 单元的工作方式。

有办法抑制这种情况的发生吗？

Answer 1

编辑 1 - 根据问题更新更新答案。即添加对突出显示启用/禁用模式之间切换的支持。

编辑 2 - 重组答案并添加更多详细信息。

Option-1:通过 IsEnabled 启用/禁用 View 单元

最简单的选择是使用 IsEnabled属性，进而启用/禁用背景闪光行为。这种方法的唯一缺点是，它还会禁用子控件上的点击，即，如果父 View 单元的 IsEnabled 为 false<，则不会触发点击事件/手势识别器。

例如:

XAML

<!-- Add name attribute to view-cell -->
<ViewCell x:Name="deselectCell" ..>
    <Grid>
        <Grid x:Name="deselectGridLink" ..
    ....
</ViewCell>

代码隐藏

private void SetPageDetails()
{
    if (App.cardCountForSelectedCategories == 0)
    {
        deselectCell.IsEnabled = false; //disable background flash
        ...
    }
    else
    {
        deselectCell.IsEnabled = true;
        ...
    }
}

建议 1 - 使用数据绑定(bind)和触发器

您可以使用触发器和数据绑定(bind)，而不是在代码隐藏中控制每个标签的可见性( View 模型将具有 IsDeselectEnabled 属性):

<ViewCell IsEnabled="{Binding IsDeselectEnabled}" Height="50">
    <Label Margin="20,0,20,0" Style="{DynamicResource ListItemTextStyle}" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Text="Deselect All">
        <Label.Triggers>
            <DataTrigger TargetType="Label" Binding="{Binding IsDeselectEnabled}" Value="true">
                <Setter Property="TextColor" Value="Blue" />
            </DataTrigger>
            <DataTrigger TargetType="Label" Binding="{Binding IsDeselectEnabled}" Value="false">
                <Setter Property="TextColor" Value="Silver" />
            </DataTrigger>
        </Label.Triggers>
    </Label>
</ViewCell>

建议 2 - 使用以 View 为源的触发器

<ViewCell x:Name="deselectCell" Height="50">
    <Label Margin="20,0,20,0" Style="{DynamicResource ListItemTextStyle}" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Text="Deselect All">
        <Label.Triggers>
            <DataTrigger TargetType="Label" Binding="{Binding IsEnabled, Source={x:Reference deselectCell}}" Value="true">
                <Setter Property="TextColor" Value="Blue" />
            </DataTrigger>
            <DataTrigger TargetType="Label" Binding="{Binding IsEnabled, Source={x:Reference deselectCell}}" Value="false">
                <Setter Property="TextColor" Value="Silver" />
            </DataTrigger>
        </Label.Triggers>
    </Label>
</ViewCell>

<小时/>

选项2:启用/禁用突出显示，但允许点击

为了允许在切换 ViewCell 的背景突出显示行为时进行点击，我们需要实现平台渲染器。

对于 iOS，我们可以使用 SelectionStyle要切换此行为，而对于 Android，我们可以使用 Clickable属性。

共享控制:

public class CustomViewCell : ViewCell
{
    public static readonly BindableProperty AllowHighlightProperty =
        BindableProperty.Create(
            "AllowHighlight", typeof(bool), typeof(CustomViewCell),
            defaultValue: true);

    public bool AllowHighlight
    {
        get { return (bool)GetValue(AllowHighlightProperty); }
        set { SetValue(AllowHighlightProperty, value); }
    }
}

iOS 渲染器:

[assembly: ExportRenderer(typeof(CustomViewCell), typeof(CustomViewCellRenderer))]
namespace SampleApp.iOS
{
    public class CustomViewCellRenderer : ViewCellRenderer
    {
        UITableViewCell _nativeCell;

        //get access to the associated forms-element and subscribe to property-changed
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            _nativeCell = base.GetCell(item, reusableCell, tv);

            var formsCell = item as CustomViewCell;

            if (formsCell != null)
            {
                formsCell.PropertyChanged -= OnPropertyChanged;
                formsCell.PropertyChanged += OnPropertyChanged;
            }

            //and, update the style 
            SetStyle(formsCell);

            return _nativeCell;
        }

        void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            var formsCell = sender as CustomViewCell;
            if (formsCell == null)
                return;
            //TODO: Trying to find a nicer and more robust way to dispose and unsubscribe :(
            if (_nativeCell == null)
                formsCell.PropertyChanged -= OnPropertyChanged;

            if (e.PropertyName == CustomViewCell.AllowHighlightProperty.PropertyName)
            {
                SetStyle(formsCell);
            }
        }

        private void SetStyle(CustomViewCell formsCell)
        {
            //added this code as sometimes on tap, the separator disappears, if style is updated before tap animation finishes 
            //https://stackoverflow.com/questions/25613117/how-do-you-prevent-uitableviewcellselectionstylenone-from-removing-cell-separato
            Device.StartTimer(TimeSpan.FromMilliseconds(50), () => {
                Device.BeginInvokeOnMainThread(() =>
                {
                    if (formsCell.AllowHighlight)
                        _nativeCell.SelectionStyle = UITableViewCellSelectionStyle.Default;
                    else
                        _nativeCell.SelectionStyle = UITableViewCellSelectionStyle.None;
                });
                return false;
            });
        }
    }
}

Android 渲染器:

[assembly: ExportRenderer(typeof(CustomViewCell), typeof(CustomViewCellRenderer))]
namespace SampleApp.Droid
{
    public class CustomViewCellRenderer : ViewCellRenderer
    {
        Android.Views.View _nativeCell;

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

            SetStyle();

            return _nativeCell;
        }

        // this one is simpler as the base class has a nice override-able method for our purpose - so we don't need to subscribe 
        protected override void OnCellPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnCellPropertyChanged(sender, e);

            if(e.PropertyName == CustomViewCell.AllowHighlightProperty.PropertyName)
            {
                SetStyle();
            }
        }

        private void SetStyle()
        {
            var formsCell = Cell as CustomViewCell;
            if (formsCell == null)
                return;

            _nativeCell.Clickable = !formsCell.AllowHighlight;
        }
    }
}

示例用法 1 - 通过数据绑定(bind)

<local:CustomViewCell  AllowHighlight="{Binding IsHighlightEnabled}" ..>
    <Grid>
        <Grid x:Name="deselectGridLink" ..
    ...
</local:CustomViewCell>

示例用法 2 - 通过代码隐藏

XAML

<!-- Add name attribute to view-cell -->
<local:CustomViewCell x:Name="deselectCell" ..>
    <Grid>
        <Grid x:Name="deselectGridLink" ..
    ...
</local:CustomViewCell>

代码隐藏

private void SetPageDetails()
{
    if (App.cardCountForSelectedCategories == 0)
    {
        deselectCell.AllowHighlight= false; //disable background flash
        ...
    }
    else
    {
        deselectCell.AllowHighlight= true;
        ...
    }
}

<小时/>

选项 3:禁用突出显示、选择所有项目

这尤其适用于ListView。 更新后的问题现在指定单元格是 TableView 的一部分，因此此选项在当前问题上下文中不再有效。

您将需要实现平台渲染器以禁用突出显示颜色，并将 ItemTapped 处理程序添加到 ListView 以通过将 SelectedItem 设置为 null 来禁用选择总是。使用的引用文献:

1. Disable highlight item
2. Disable selection

代码

首先，创建一个自定义 View 单元:

public class NoSelectViewCell : ViewCell { }

将 iOS 渲染器实现为:

[assembly: ExportRenderer(typeof(NoSelectViewCell), typeof(NoSelectViewCellRenderer))]
namespace SampleApp.iOS
{
    public class NoSelectViewCellRenderer : ViewCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var nativeCell = base.GetCell(item, reusableCell, tv);
            nativeCell.SelectionStyle = UITableViewCellSelectionStyle.None;
            return nativeCell;
        }
    }
}

将 android 渲染器实现为:

[assembly: ExportRenderer(typeof(NoSelectViewCell), typeof(NoSelectViewCellRenderer))]
namespace SampleApp.Droid
{
    public class NoSelectViewCellRenderer : ViewCellRenderer
    {
        protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, Android.Views.ViewGroup parent, Android.Content.Context context)
        {
            var cell = base.GetCellCore(item, convertView, parent, context);

            cell.Focusable = false;
            cell.FocusableInTouchMode = false;

            var listView = parent as Android.Widget.ListView;
            if (listView != null)
            {
                listView.SetSelector(Android.Resource.Color.Transparent);
                listView.CacheColorHint = Xamarin.Forms.Color.Transparent.ToAndroid();
            }
            return cell;
        }
    }
}

示例用法:

XAML

<ListView ItemTapped="Handle_ItemTapped">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:NoSelectViewCell Height="50">
               <Grid>
                  <Grid x:Name="deselectGridLink" VerticalOptions="CenterAndExpand" Padding="20, 0">
                     <Label TextColor="Blue" Style="{DynamicResource ListItemTextStyle}" x:Name="deselectLink" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Text="Deselect All" />
                  </Grid>
                  <Grid x:Name="deselectGridLabel" VerticalOptions="CenterAndExpand" Padding="20, 0">
                     <Label TextColor="Silver" Style="{DynamicResource ListItemTextStyle}" x:Name="deselectLabel" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Text="Deselect All" />
                  </Grid>
               </Grid>
            </local:NoSelectViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

代码隐藏

void Handle_ItemTapped(object sender, Xamarin.Forms.ItemTappedEventArgs e)
{
    // don't do anything if we just de-selected the row
    if (e.Item == null) return;
    // do something with e.SelectedItem
    ((ListView)sender).SelectedItem = null; // de-select the row
}