Issue with VisualStateManager for CollectionView in Xamarin Forms

Question

I have issue with CollectionView and VisualStateManager. This is my CollectionView. I've also trying to use Compiled Bindings.

    <CollectionView Grid.Row="1"
                        ItemSizingStrategy="MeasureAllItems"
                        ItemsSource="{Binding SizeOptions}"
                        Margin="0"
                        SelectionChangedCommand="{Binding SelectionChangedCommand}"
                        SelectedItem="{Binding SelectedSizeOption}"
                        SelectionMode="Single">
            <CollectionView.Header>
                <BoxView VerticalOptions="Start"
                         HeightRequest="1"
                         Color="{StaticResource DividerColor}"/>
            </CollectionView.Header>
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="tpViewModels:SizeOption">
                    <StackLayout IsEnabled="{Binding IsEnabled}">
                        <StackLayout AutomationId="{Binding Text}"
                                     AutomationProperties.IsInAccessibleTree="True"
                                     HeightRequest="64"
                                     IsEnabled="{Binding IsEnabled}"
                                     Margin="10, 0, 0, 0"
                                     MinimumHeightRequest="64"
                                     Orientation="Horizontal"
                                     Padding="0"
                                     x:Name="Holder">
                            <Image HeightRequest="20"
                                   IsEnabled="{Binding IsEnabled}"
                                   WidthRequest="20"
                                   x:Name="RadioButtonImage">
                            </Image>
                            <Label FontSize="14"
                                   HorizontalOptions="StartAndExpand"
                                   IsEnabled="{Binding IsEnabled}"
                                   Padding="10, 0"
                                   Text="{Binding Text}"
                                   Style="{StaticResource MediumFontFamily}"
                                   VerticalTextAlignment="Center"
                                   x:Name="RadioButtonLabel">
                            </Label>
                        </StackLayout>
                        <BoxView VerticalOptions="Start"
                                 HeightRequest="1"
                                 Color="{StaticResource DividerColor}"/>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

When I don't use DataType in DataTemplate, then IsEnabled = false woks perfect, we cannot select item in list. But when I use DataType, then I can select diabled item. Also I want to change TextColor, FontAttributes and Image.Source when item should be disabled.

It sets for me only VisualStates = Normal or Selected, VisualStateManager doesn't works with State = Disabled. I've added VisualStateManager in first StackLayout with TargetName setted to x:Name of Label and Image.

DataTrigger for Label and Image works, but I can selected disabled item :(

Anyone knows why?

Answer 1

You could try to set the Visual State Manager to the ContentPage.Resources.

Like:

<ContentPage.Resources>
    <Style TargetType="Label">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" >
                        <VisualState.Setters>
                            <Setter Property="TextColor"
                                    Value="LightSkyBlue" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="TextColor"
                                    Value="LightSkyBlue" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="TextColor"
                                    Value="Green" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
    <Style TargetType="Image">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" >
                        <VisualState.Setters>
                            <Setter Property="Source"
                                    Value="normalicon.png" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="Source"
                                    Value="normalicon.png" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="Source"
                                    Value="disableicon.png" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</ContentPage.Resources>