XAML .NET MAUI -基于用户点击更改图像控制的数据触发器/行为

tyg4sfes  于 2024-01-04  发布在  .NET
关注(0)|答案(1)|浏览(200)

开发一个bottomsheet,在bottomsheet中我有一个listview,其中listview包含图像和标签控制。只有当用户点击标签以控制图像可见性变化时,图像才应该可见。
预期结果如下:


的数据
下面是XAML代码。

  1. <ListView ItemsSource="{Binding Menus}">
  2. <ListView.ItemTemplate>
  3. <DataTemplate>
  4. <ViewCell >
  5. <Grid>
  6. <Grid.GestureRecognizers>
  7. <TapGestureRecognizer Command="{Binding GestureCommand}" CommandParameter="{Binding .}" />
  8. </Grid.GestureRecognizers>
  9. <Grid.ColumnDefinitions >
  10. <ColumnDefinition Width="Auto" />
  11. <ColumnDefinition Width="*" />
  12. </Grid.ColumnDefinitions>
  13. <Image x:Name="SheetImage" Grid.Column="0" Source="arrow_downward.png" Margin="10" IsVisible="{Binding IconVisible}"/>
  14. <Image x:Name="SheetImage1" Grid.Column="0" Source="arrow_upward.png" Margin="10" IsVisible="{Binding IconSortVisible}">
  15. <Image.Triggers>
  16. <DataTrigger TargetType="Image" Binding="{Binding Source={x:Reference SheetImage}, Path=IsVisible}" Value="True">
  17. <Setter Property="IsVisible" Value="False"/>
  18. </DataTrigger>
  19. </Image.Triggers>
  20. </Image>
  21. <mdc:Label Text="{Binding MenuTitle}" Grid.Column="1" HorizontalOptions="Start" HeightRequest="30" >
  22. <mdc:Label.Triggers>
  23. <DataTrigger TargetType="mdc:Label" Binding="{Binding Source={x:Reference SheetImage}, Path=IsVisible}" Value="False">
  24. <Setter Property="Margin" Value="44" />
  25. </DataTrigger>
  26. <!--<DataTrigger TargetType="mdc:Label" Binding="{Binding Source={x:Reference SheetImage1}, Path=IsVisible}" Value="False">
  27. <Setter Property="Margin" Value="44" />
  28. </DataTrigger>-->
  29. </mdc:Label.Triggers>
  30. </mdc:Label>
  31. </Grid>
  32. </ViewCell>
  33. </DataTemplate>
  34. </ListView.ItemTemplate>
  35. </ListView>

字符串
我需要知道我们如何最好地处理这个问题。我在后端写的代码似乎很混乱,写了很多布尔属性来实现这一点。
任何建议,以最好的方式处理这一点。

sqxo8psd

sqxo8psd1#

我建议每个菜单项都使用ViewModel。你可以在那里设置ImageSource可绑定属性,它可以在点击命令时更新。

  1. public class ItemViewModel : INotifyPropertyChanged
  2. {
  3. public event PropertyChangedEventHandler? PropertyChanged;
  4. // You can set here your images as constants or
  5. // create properties to provide image source during object initialization
  6. private const string DotNetBotImage = "dotnet_bot.png";
  7. private const string MapFillImage = "map_fill.svg";
  8. public ItemViewModel()
  9. {
  10. ItemTapCommand = new Command(ItemTap);
  11. }
  12. private string _itemImage = DotNetBotImage;
  13. public string ItemImage
  14. {
  15. get => _itemImage;
  16. set
  17. {
  18. _itemImage = value;
  19. OnPropertyChanged();
  20. }
  21. }
  22. private string _itemLabel = string.Empty;
  23. public string ItemLabel
  24. {
  25. get => _itemLabel;
  26. set
  27. {
  28. _itemLabel = value;
  29. OnPropertyChanged();
  30. }
  31. }
  32. public ICommand ItemTapCommand { get; private set; }
  33. // Update image on tap
  34. private void ItemTap()
  35. {
  36. if (ItemImage == DotNetBotImage)
  37. {
  38. ItemImage = MapFillImage;
  39. }
  40. else
  41. {
  42. ItemImage = DotNetBotImage;
  43. }
  44. }
  45. protected void OnPropertyChanged([CallerMemberName] string? propertyName = null)
  46. {
  47. PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  48. }
  49. }

字符串
在此之后,请随意为ListView创建ObservableCollection:

  1. public ObservableCollection<ItemViewModel> Items { get; } = new ObservableCollection<ItemViewModel>
  2. {
  3. new ItemViewModel
  4. {
  5. ItemLabel = "Test1"
  6. },
  7. new ItemViewModel
  8. {
  9. ItemLabel = "Test2"
  10. },
  11. new ItemViewModel
  12. {
  13. ItemLabel = "Test3"
  14. }
  15. };


下面是ListView的标记(不要忘记设置BindingContext以访问ObservableCollection)。

  1. <ListView ItemsSource="{Binding Items}">
  2. <ListView.ItemTemplate>
  3. <DataTemplate x:DataType="vm:ItemViewModel">
  4. <ViewCell>
  5. <Grid>
  6. <Grid.GestureRecognizers>
  7. <TapGestureRecognizer Command="{Binding ItemTapCommand}"/>
  8. </Grid.GestureRecognizers>
  9. <Grid.ColumnDefinitions >
  10. <ColumnDefinition Width="Auto" />
  11. <ColumnDefinition Width="*" />
  12. </Grid.ColumnDefinitions>
  13. <Image Grid.Column="0" Source="{Binding ItemImage}" Margin="10"/>
  14. <Label Text="{Binding ItemLabel}" Grid.Column="1" HorizontalOptions="Start" HeightRequest="30"/>
  15. </Grid>
  16. </ViewCell>
  17. </DataTemplate>
  18. </ListView.ItemTemplate>
  19. </ListView>

展开查看全部

相关问题