xamlxamarin.formscustom-renderer

CollectionView custom renderer: selected item background color not works


I'm using Xamarin.Forms and I created a CollectionView custom renderer control because I need to disable scroll in some situations, however this control doesn't seem to change the background color of the selected item automatically. Coloring a selected item works fine if I use a CollectionView, but it doesn't in my custom control.

I set the global style in platform specific resource file:

  <style name="MainTheme" parent="MainTheme.Base">
<item name="colorAccent">@color/colorAccent</item>
<item name="android:colorPrimaryDark">#00FF00</item>
<item name="android:colorPressedHighlight">@color/ListViewSelected</item>
<item name="android:colorLongPressedHighlight">@color/ListViewHighlighted</item>
<item name="android:colorFocusedHighlight">@color/ListViewSelected</item>
<item name="android:colorActivatedHighlight">@color/ListViewSelected</item>
<item name="android:activatedBackgroundIndicator">@color/ListViewSelected</item>
<item name="android:datePickerDialogTheme">@style/CustomDatePickerDialog</item>

Here is the custom renderer:

[assembly: ExportRenderer(typeof(CollectionViewExt), typeof(CollectionViewCustomRenderer))]
namespace Vendo.Android.Renderers
{
 internal class CollectionViewCustomRenderer: CollectionViewRenderer
 {
     public CollectionViewCustomRenderer(Context context) : base(context)
     {
     }

     public override bool OnInterceptTouchEvent(MotionEvent ev)
     {
         if (Element is CollectionViewExt collectionView && collectionView.IsScrollEnabled)
             return base.OnInterceptTouchEvent(ev);
         else
             return false;
     }

     public override bool OnTouchEvent(MotionEvent ev)
     {
         if (Element is CollectionViewExt collectionView && collectionView.IsScrollEnabled)
             return base.OnTouchEvent(ev);
         else
             return false;
     }
 }
}

Follow the xaml page code:

            <controls:CollectionViewExt x:Name="cvArticoli" 
                        VerticalScrollBarVisibility="Always"   
                        VerticalOptions="FillAndExpand"
                        IsScrollEnabled="{Binding IsScrollEnabled}"
                        Style="{StaticResource CollExtStyle}"
                        ItemsSource="{Binding ListaArticoli}" 
                        SelectedItem="{Binding ArticoloModelCorrente, Mode=TwoWay}"
                        IsVisible="{Binding VisualizzaArticoli}"
                        ClassId="{Binding CatalogoVisualizzato}"
                        ItemTemplate="{StaticResource ArticoliTemplateSelector}"
                        RemainingItemsThreshold="2" 
                        RemainingItemsThresholdReachedCommand="{Binding LoadMoreArticoliCommand}">

            <controls:CollectionViewExt.EmptyView>
                <StackLayout>
                    <Label 
                        Margin="0,10"                            
                        HorizontalOptions="Center"
                        Text="Nessun articolo in lista."
                        TextColor="Gray"/>
                </StackLayout>
            </controls:CollectionViewExt.EmptyView>

            <controls:CollectionViewExt.ItemsLayout>
                <MultiBinding>
                    <Binding Path="CatalogoVisualizzato"/>
                    <Binding Path="ColonneCatalogo"/>

                    <MultiBinding.Converter>
                        <converters:BoolToItemsLayoutConverter/>
                    </MultiBinding.Converter>
                </MultiBinding>
            </controls:CollectionViewExt.ItemsLayout>
        </controls:CollectionViewExt>

Here is the app.xaml for collectionView Visual State Manager:

            <Style x:Key="CollExtStyle" TargetType="controls:CollectionViewExt">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="White" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="{StaticResource Highlight}" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="{StaticResource Disabled}"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>

Solution

  • The solution is very simple. Just set SelectionMode property of the CollectionView, like so:

            <controls:CollectionViewExt x:Name="cvArticoli" 
                VerticalOptions="FillAndExpand"
                SelectionMode="Single"
                Style="{StaticResource CollExtStyle}"
                IsScrollEnabled="{Binding IsScrollEnabled}"
                ItemsSource="{Binding ListaArticoli}" 
                SelectedItem="{Binding ArticoloModelCorrente, Mode=TwoWay}"
                IsVisible="{Binding VisualizzaArticoli}"
                ClassId="{Binding CatalogoVisualizzato}"
                ItemTemplate="{StaticResource ArticoliTemplateSelector}"                                                                                
                RemainingItemsThreshold="2" 
                RemainingItemsThresholdReachedCommand="{Binding LoadMoreArticoliCommand}">