Xamarin - CollectionView绑定ObservableCollection问题

6ie5vjzr  于 2023-04-18  发布在  其他
关注(0)|答案(1)|浏览(169)

我遇到了一个非常奇怪的问题,试图在CollectionView中打印一个observableCollection对象。我想有一个42块的网格,在每个块中打印一个从1到42的数字。当我点击一个块时,我希望它的背景变成绿色。
下面是我的代码(非常简单):
型号:

public class Case
    {
        public int Id { get; set; }
        public string ColorToPrint { get; set; }

        public Case(int id, string color)
        {
            Id = id;
            ColorToPrint = color;
        }
    }

视图模型:

public ICommand SelectionChangedCommand { get; set; }
        public GridViewModel() 
        {
            Cases = new ObservableCollection<Case>();
            for (int i=1; i<=42; i++)
            {
                Case c = new Case(i, "Grey");
                Cases.Add(c);
            }

            SelectionChangedCommand = new Command(OnSelectionChanged);

        }

        private void OnSelectionChanged()
        {
            Case c = new Case(SelectedCase.Id, "Green");
            Cases[SelectedCase.Id - 1] = c;
        }

        private ObservableCollection<Case> cases;
        public ObservableCollection<Case> Cases
        {
            get => cases;
            set
            {
                cases = value;
                OnPropertyChanged(nameof(Cases));
            }
        }

        private Case selectedCase;
        public Case SelectedCase
        {
            get => selectedCase;
            set
            {
                selectedCase = value;
                OnPropertyChanged(nameof(SelectedCase));
            }
        }
    }

和我的页面:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <CollectionView ItemsSource="{Binding Cases}"
                            SelectionMode="Single"
                            SelectedItem="{Binding SelectedCase}"
                            SelectionChangedCommand="{Binding SelectionChangedCommand}"
                            Grid.Column="0"
                            Grid.Row="0"
                            ItemsLayout="VerticalGrid, 6"
                            Margin="20">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    
                    <Frame Padding="2"
                           BackgroundColor="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="CommonStates">
                                <VisualState Name="Normal" />
                                <VisualState Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Property="BackgroundColor" Value="Transparent"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Frame BorderColor="Black"
                                MinimumHeightRequest="20"
                                CornerRadius="5"
                                BackgroundColor="{Binding ColorToPrint}">
                            <Label Text="{Binding Id}"
                                   TextColor="Black"
                                   FontAttributes="Bold"
                                   FontSize="15"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   />
                        </Frame>
                        
                    </Frame>
                </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
    </Grid>

当然,在我的page.cs中,视图模型被定义为bindingContext。
所以这段代码运行得很好,但我得到了一个奇怪的行为,如果我点击它(颜色变化很好),擦除块中的数字,如果我点击另一个块,则重新开始。似乎这种行为也是随机发生的,而不是所有的时间。
我整个下午都在寻找解决方案,如果你能给我一些帮助,我将不胜感激。
谢谢大家,原谅我的英语不好。
尝试了不同的方法来更新我的Observablecollection,也尝试了很多关于propertychange事件的事情

pod7payv

pod7payv1#

这个问题可以在我这边复制。要解决这个问题,您可以将CollectionView中的项目的外部Frame替换为GridStackLayout,如下所示:

<CollectionView ItemsSource="{Binding Cases}" 
                            SelectionMode="Single"
                            SelectedItem="{Binding SelectedCase}"
                            SelectionChangedCommand="{Binding SelectionChangedCommand}"
                            Grid.Column="0"
                            Grid.Row="0"
                                                       
                            ItemsLayout="VerticalGrid, 6"
                            Margin="20">
                <CollectionView.ItemTemplate>
                    <DataTemplate>

                        <Grid Padding="2"
                           >
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="Transparent"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            
                            <Frame BorderColor="Black"
                                MinimumHeightRequest="40"
                                CornerRadius="5"
                                BackgroundColor="{Binding ColorToPrint}">
                                <Label Text="{Binding Id}"
                                   TextColor="Black"
                                   FontAttributes="Bold"
                                   FontSize="15"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   />
                            </Frame>
                         
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

相关问题