So,

I have a CollectionView that loads a SelectedItem when the page loads.

I use VisualStateManager to manage the properties of selected and non-selected items, and also to manage the background color of the cell itself.

My problem is that sometimes (randomly) on page load VisualStateManager doesn't set any of the properties correctly on the SelectedItem. This only happens on iOS, it works fine on Android.

My CollectionView code:

<CollectionView
                        x:Name="DaysList"
                        ItemsLayout="HorizontalList"
                        SelectionMode="Single"
                        VerticalOptions="Start"
                        HorizontalScrollBarVisibility="Never"
                        HorizontalOptions="FillAndExpand"
                        ItemsSource="{Binding DaysList}"
                        SelectedItem="{Binding DaysListSelectedItem, Mode=TwoWay}">

                        <CollectionView.Margin>
                            <OnPlatform x:TypeArguments="Thickness">
                                <On Platform="iOS" Value="-3,0,-3,40"/>
                                <On Platform="Android" Value="-3,-40,-3,0"/>
                            </OnPlatform>
                        </CollectionView.Margin>

                        <CollectionView.HeightRequest>
                            <OnPlatform x:TypeArguments="x:Double">
                                <On Platform="iOS" Value="74"/>
                                <On Platform="Android" Value="150"/>
                            </OnPlatform>
                        </CollectionView.HeightRequest>

                        <CollectionView.ItemTemplate>
                            <DataTemplate>

                                <Grid
                                    Padding="3,0,3,0">

                                    <VisualStateManager.VisualStateGroups>

                                        <VisualStateGroup Name="CommonStates">

                                            <VisualState Name="Normal"/>
                                            <VisualState Name="Selected">

                                                <VisualState.Setters>
                                                    <Setter Property="Background" Value="#2F2F2F"/>
                                                    <Setter TargetName="SelectedFrame" Property="Frame.BackgroundColor" Value="#F0CF4E"/>
                                                    <Setter TargetName="SelectedFrame" Property="Frame.WidthRequest" Value="104"/>
                                                    <Setter TargetName="SelectedFrame" Property="Frame.HeightRequest" Value="70"/>
                                                    <Setter TargetName="SelectedDate1" Property="Label.TextColor" Value="#080808"/>
                                                    <Setter TargetName="SelectedDate2" Property="Label.TextColor" Value="#080808"/>
                                                </VisualState.Setters>

                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>

                                    <Frame
                                        x:Name="SelectedFrame"
                                        CornerRadius="5"
                                        HasShadow="False"
                                        Padding="0"
                                        BackgroundColor="{AppThemeBinding Light=Gray, Dark=Gray}"
                                        Margin="0"
                                        VerticalOptions="CenterAndExpand"
                                        WidthRequest="92"
                                        HeightRequest="62">

                                        <StackLayout
                                            HorizontalOptions="FillAndExpand"
                                            VerticalOptions="CenterAndExpand"
                                            Spacing="0">

                                            <Label
                                                x:Name="SelectedDate1"
                                                Text="{Binding Day}"
                                                FontSize="16"
                                                Style="{StaticResource LightWhite}"
                                                Margin="0,0,0,-2"
                                                HorizontalOptions="CenterAndExpand"
                                                VerticalOptions="CenterAndExpand"/>

                                            <Label
                                                x:Name="SelectedDate2"
                                                Text="{Binding DayName}"
                                                FontSize="20"
                                                Style="{StaticResource BoldWhite}"
                                                Margin="0,-2,0,0"
                                                HorizontalOptions="CenterAndExpand"
                                                VerticalOptions="CenterAndExpand"/>

                                        </StackLayout>

                                    </Frame>

                                </Grid>

                            </DataTemplate>
                        </CollectionView.ItemTemplate>

                    </CollectionView>

Any help would be appreciated, thanks in advance.

CodePudding user response：

This is a known bug with a PR open here. I'm hoping to merge this before the next release :)

You can already test this fix on your code and would love to ask you to do that so we can verify another scenario that is fixed. Let me know if you need the instructions for that.