MAUI CollectionView SelectedItem not updating

huangapple
go评论184阅读模式
英文:

MAUI CollectionView SelectedItem not updating

问题

根据文档（https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/selection），SelectedItem是双向绑定的，但当我点击CollectionView中的项目时似乎没有任何反应。

出于调试目的，我已经添加了一个按钮来随机选择一个项目，这是有效的，所以我认为我在集合绑定方面可能有问题，或者需要进行更多的连接。

View

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4.              x:Class="Maui.Views.WorldPage"
  5.              xmlns:viewmodels="clr-namespace:Maui.ViewModels"
  6.              x:DataType="viewmodels:WorldViewModel"
  7.              xmlns:models="clr-namespace:Maui.Models"
  8.              Title="WorldPage"
  9.              xmlns:controls="clr-namespace:Maui.Controls">
  10.     <StackLayout>
  11.         <controls:AreaDetailsView Area="{Binding SelectedArea}"/>
  12.         <CollectionView ItemsSource="{Binding Areas}"
  13.                         ItemsLayout="VerticalGrid, 7"
  14.                         SelectionMode="Single"
  15.                         SelectedItem="{Binding SelectedArea}">
  16.             <CollectionView.ItemTemplate>
  17.                 <DataTemplate x:DataType="models:Area">
  18.                     <controls:AreaView Area="{Binding .}"/>
  19.                 </DataTemplate>
  20.             </CollectionView.ItemTemplate>
  21.         </CollectionView>
  22.         <Button Text="Select Random"
  23.                 Command="{Binding SelectRandomCommand}"/>
  24.     </StackLayout>
  25. </ContentPage>

ViewModel

  1. public partial class WorldViewModel : ObservableObject
  2. {
  3.     public ObservableCollection<Area> Areas { get; set; }
  4.     [ObservableProperty]
  5.     public Area selectedArea;
  7.     private readonly WorldService _worldService;
  8.     private readonly World _world;
  10.     public WorldViewModel(WorldService worldService)
  11.     {
  12.         _worldService = worldService;
  13.         _world = _worldService.Get(0);
  14.         Areas = new ObservableCollection<Area>(_world.Areas);
  15.         SelectedArea = _world.Areas.Single(x => x.X == 1 && x.Y == 1);
  16.     }
  17.     [RelayCommand]
  18.     void SelectRandom()
  19.     {
  20.         var random = new Random().Next(Areas.Count);
  21.         SelectedArea = Areas[random];
  22.     }
  23. }

上面的自定义控件在CollectionView上方显示所选区域的更多详细信息。它与SelectedArea属性绑定。

我希望当我点击一个区域时，显示视图会更新为我点击的区域。

应用程序的屏幕截图以帮助理解。

MAUI CollectionView SelectedItem not updating

英文:

According to the documentation (https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/selection) SelectedItem is two way binding but when I click on a item in the CollectionView it seems that nothing happen.

For debugging purposes I have added a button to randomly selecting an item and this is working, so I believe I have a problem in the collection binding or I need to do more wiring.

View

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4.              x:Class="Maui.Views.WorldPage"
  5.              xmlns:viewmodels="clr-namespace:Maui.ViewModels"
  6.              x:DataType="viewmodels:WorldViewModel"
  7.              xmlns:models="clr-namespace:Maui.Models"
  8.              Title="WorldPage"
  9.              xmlns:controls="clr-namespace:Maui.Controls">
  10.     <StackLayout>
  11.         <controls:AreaDetailsView Area="{Binding SelectedArea}"/>
  12.         <CollectionView ItemsSource="{Binding Areas}"
  13.                         ItemsLayout="VerticalGrid, 7"
  14.                         SelectionMode="Single"
  15.                         SelectedItem="{Binding SelectedArea}">
  16.             <CollectionView.ItemTemplate>
  17.                 <DataTemplate x:DataType="models:Area">
  18.                     <controls:AreaView Area="{Binding .}"/>
  19.                 </DataTemplate>
  20.             </CollectionView.ItemTemplate>
  21.         </CollectionView>
  22.         <Button Text="Select Random"
  23.                 Command="{Binding SelectRandomCommand}"/>
  24.     </StackLayout>
  25. </ContentPage>

ViewModel

  1. public partial class WorldViewModel : ObservableObject
  2. {
  3.     public ObservableCollection<Area> Areas { get; set; }
  4.     [ObservableProperty]
  5.     public Area selectedArea;
  7.     private readonly WorldService _worldService;
  8.     private readonly World _world;
  10.     public WorldViewModel(WorldService worldService)
  11.     {
  12.         _worldService = worldService;
  13.         _world = _worldService.Get(0);
  14.         Areas = new ObservableCollection<Area>(_world.Areas);
  15.         SelectedArea = _world.Areas.Single(x => x.X == 1 && x.Y == 1);
  16.     }
  17.     [RelayCommand]
  18.     void SelectRandom()
  19.     {
  20.         var random = new Random().Next(Areas.Count);
  21.         SelectedArea = Areas[random];
  22.     }
  23. }

The custom control above the collection view, display more details of the selected area. It's binded to SelectedArea property.

I would like that when I click on an area, the display view is updated with the one I clicked on.

Sceenshot of the app to help understanding.

MAUI CollectionView SelectedItem not updating

答案1

得分: 1

So I finally found an open bug In the MAUI repo that says CollectionView's SelectionChanged method cannot be triggered when tapping the item directly see https://github.com/dotnet/maui/issues/9567

这里终于找到一个在 MAUI 存储库中的开放性错误，它表示 在直接点击项目时无法触发 CollectionView 的 SelectionChanged 方法，请参见 https://github.com/dotnet/maui/issues/9567

It's on open bug that is affecting Android and will be fix later (it's in the backlog as of Aug 2023).

这是一个正在影响 Android 的未解决错误，将来会修复（截至 2023 年 8 月仍在待办事项中）。

The workaround is to not use Frame. So I change the data Template in my collection view

解决方法是不使用 Frame。 所以我更改了我的集合视图中的数据模板

  1.             <CollectionView.ItemTemplate>
  2.                 <DataTemplate x:DataType="models:Area">
  3.                     <controls:AreaView Area="{Binding .}"/>
  4.                 </DataTemplate>
  5.             </CollectionView.ItemTemplate>

To not use Frame...I just used a StackLayout

为了不使用 Frame... 我只是使用了一个 StackLayout

  1. <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  2.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  3.              x:Class="Maui.Controls.AreaView"
  4.              xmlns:converters="clr-namespace:Maui.Converters"
  5.              x:Name="this">
  6.     <ContentView.Resources>
  7.         <converters:AreaTypeConverter x:Key="AreaTypeConverter" />
  8.     </ContentView.Resources>
  9.     <StackLayout BindingContext="{x:Reference this}" BackgroundColor="{Binding Area.Type, Converter={StaticResource AreaTypeConverter}}">
  10.         <Label>
  11.             <Label.FormattedText>
  12.                 <FormattedString>
  13.                     <Span Text="("/>
  14.                     <Span Text="{Binding Area.X}"/>
  15.                     <Span Text=","/>
  16.                     <Span Text="{Binding Area.Y}"/>
  17.                     <Span Text=")"/>
  18.                 </FormattedString>
  19.             </Label.FormattedText>
  20.         </Label>
  21.     </StackLayout>
  22. </ContentView>
英文:

So I finally found an open bug In the MAUI repo that says CollectionView's SelectionChanged method cannot be triggered when tapping the item directly see https://github.com/dotnet/maui/issues/9567

It's on open bug that is affecting Android and will be fix later (it's in the backlog asof Aug 2023).

The workaround is to not use Frame. So I change the data Template in my collection view

  1.             <CollectionView.ItemTemplate>
  2.                 <DataTemplate x:DataType="models:Area">
  3.                     <controls:AreaView Area="{Binding .}"/>
  4.                 </DataTemplate>
  5.             </CollectionView.ItemTemplate>

To not use Frame...I just used a StackLayout

  1. <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  2.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  3.              x:Class="Maui.Controls.AreaView"
  4.              xmlns:converters="clr-namespace:Maui.Converters"
  5.              x:Name="this">
  6.     <ContentView.Resources>
  7.         <converters:AreaTypeConverter x:Key="AreaTypeConverter" />
  8.     </ContentView.Resources>
  9.     <StackLayout BindingContext="{x:Reference this}" BackgroundColor="{Binding Area.Type, Converter={StaticResource AreaTypeConverter}}">
  10.         <Label>
  11.             <Label.FormattedText>
  12.                 <FormattedString>
  13.                     <Span Text="("/>
  14.                     <Span Text="{Binding Area.X}"/>
  15.                     <Span Text=","/>
  16.                     <Span Text="{Binding Area.Y}"/>
  17.                     <Span Text=")"/>
  18.                 </FormattedString>
  19.             </Label.FormattedText>
  20.         </Label>
  21.     </StackLayout>
  22. </ContentView>

huangapple
  • 本文由 发表于 2023年8月5日 01:32:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/76838073.html
  • maui
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定