What is "behind" a Xamarin.Forms CollectionView's Item from DataTemplate (concerning background color)?

501 Views Asked by At

I have a Frame with rounded corners as the outter-most container of my DataTemplate... but my selected items are still highlighting the background "behind" the frame... see: Example of selected item background color

I assume I should be adding a setter to the VisualStatemanager, but what element should I be targeting to alter that?

Here's a summary of the View:

public class MyView : ContentPage
{
    public MyView()
    {
        var mainStackLayout = new StackLayout();
        Content = mainStackLayout;
        
        var cv = new CollectionView
        {
            ItemSizingStrategy = ItemSizingStrategy.MeasureFirstItem,
            VerticalOptions = LayoutOptions.FillAndExpand,
            SelectionMode = SelectionMode.Multiple,
            ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical) { ItemSpacing = 8 }
            
        };
        cv.SetBinding(CollectionView.ItemsSourceProperty, "MyList"); 
        cv.SetBinding(CollectionView.SelectedItemsProperty, "MySelectedItems"); 
        cv.SetBinding(CollectionView.SelectionChangedCommandProperty, "MySelectionChangedCommand"); 

        cv.ItemTemplate = new DataTemplate(() =>
        {
            BackgroundColor = Color.HotPink; //Does nothing...?

            var outterFrame = new Frame() 
            { 
                IsClippedToBounds = true,
                CornerRadius = 25,
                Padding = 0,
                Margin = new Thickness(3),
                BorderColor = Color.Gray
            };
            
            
            var vsg = new VisualStateGroup() { Name = "vsg" };
            var vsNormal = new VisualState { Name = "Normal" };
            var vsSelected = new VisualState { Name = "Selected" };
            vsNormal.Setters.Add(new Setter
            {
                Property = Frame.BackgroundColorProperty,
                Value = Color.White
            });
            vsSelected.Setters.Add(new Setter
            {
                Property = Frame.BackgroundColorProperty,
                Value = Color.LightBlue
            });
            
            ////////////////////////////////////////////////////////////////////////
            ////////////////////////////////////////////////////////////////////////
            // I assume I need to add another setter here.... but what's the target?    
            //  
            //vsSelected.Setters.Add(new Setter
            //{
            //    Property = _________.BackgroundColorProperty,
            //    Value = Color.Transparent
            //});               
            //
            ////////////////////////////////////////////////////////////////////////
            ////////////////////////////////////////////////////////////////////////
            
            vsg.States.Add(vsNormal);
            vsg.States.Add(vsSelected);
            VisualStateManager.GetVisualStateGroups(fOutter).Add(vsg);

            var grid = new Grid
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                Margin = new Thickness(0),
                RowSpacing = 0
            };

            grid.RowDefinitions.Add(new RowDefinition { blah, blah, blah...  });
            grid.RowDefinitions.Add(new RowDefinition { blah, blah, blah...  });
            grid.ColumnDefinitions.Add(new ColumnDefinition { blah, blah, blah...   });
            grid.ColumnDefinitions.Add(new ColumnDefinition { blah, blah, blah...   });
            grid.ColumnDefinitions.Add(new ColumnDefinition { blah, blah, blah...   });

            var icon = new Image{ blah, blah, blah... };
            var moreStuffForTheItem = blah, blah, blah...
            
            outterFrame.Content = grid;             
            return outterFrame;

        });  //end cv.ItemTemplate 

        mainStackLayout.Children.Add(cv);
    }
}
1

There are 1 best solutions below

8
Leo Zhu On

You could try to set the default selection hightlight color to transparent.

For Android, in the android project, add below codes in your theme style (Resources/values/styles)

<item name="android:colorActivatedHighlight">@android:color/transparent</item>

For ios,you need to create a custom viewcell renderer.

using System;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer (typeof(ViewCell),typeof(MyAPP.iOS.CustomAllViewCellRendereriOS))]
namespace MyAPP.iOS
{
  public class CustomAllViewCellRendereriOS : ViewCellRenderer
  {
    public override UIKit.UITableViewCell GetCell (Cell item, UIKit.UITableViewCell reusableCell, UIKit.UITableView tv)
    {
        var cell =  base.GetCell (item, reusableCell, tv);
        if (cell != null)
            cell.SelectionStyle = UIKit.UITableViewCellSelectionStyle.None;
        return cell;
    }
  }  
}