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

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

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


的数据
下面是XAML代码。

<ListView ItemsSource="{Binding Menus}">
     <ListView.ItemTemplate>
         <DataTemplate>
             <ViewCell >
                 <Grid>
                     <Grid.GestureRecognizers>
                         <TapGestureRecognizer Command="{Binding GestureCommand}" CommandParameter="{Binding .}" />
                     </Grid.GestureRecognizers>
                     <Grid.ColumnDefinitions >
                         <ColumnDefinition Width="Auto"  />
                         <ColumnDefinition Width="*" />
                     </Grid.ColumnDefinitions>

                     <Image x:Name="SheetImage" Grid.Column="0" Source="arrow_downward.png" Margin="10" IsVisible="{Binding IconVisible}"/>
                     <Image x:Name="SheetImage1" Grid.Column="0" Source="arrow_upward.png" Margin="10" IsVisible="{Binding IconSortVisible}">
                         <Image.Triggers>
                             <DataTrigger TargetType="Image" Binding="{Binding Source={x:Reference SheetImage}, Path=IsVisible}" Value="True">
                                 <Setter Property="IsVisible" Value="False"/>
                             </DataTrigger>
                         </Image.Triggers>
                     </Image>

                     <mdc:Label Text="{Binding MenuTitle}" Grid.Column="1" HorizontalOptions="Start" HeightRequest="30" >
                         <mdc:Label.Triggers>
                             <DataTrigger TargetType="mdc:Label" Binding="{Binding Source={x:Reference SheetImage}, Path=IsVisible}" Value="False">
                                 <Setter Property="Margin" Value="44" />
                             </DataTrigger>
                             <!--<DataTrigger TargetType="mdc:Label" Binding="{Binding Source={x:Reference SheetImage1}, Path=IsVisible}" Value="False">
                                 <Setter Property="Margin" Value="44" />
                             </DataTrigger>-->
                         </mdc:Label.Triggers>
                     </mdc:Label>
                 </Grid>
             </ViewCell>
         </DataTemplate>
     </ListView.ItemTemplate>
 </ListView>

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

sqxo8psd

sqxo8psd1#

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

public class ItemViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;

    // You can set here your images as constants or 
    // create properties to provide image source during object initialization
    private const string DotNetBotImage = "dotnet_bot.png";
    private const string MapFillImage = "map_fill.svg";

    public ItemViewModel()
    {
        ItemTapCommand = new Command(ItemTap);
    }

    private string _itemImage = DotNetBotImage;

    public string ItemImage
    {
        get => _itemImage;
        set
        {
            _itemImage = value;
            OnPropertyChanged();
        }
    }

    private string _itemLabel = string.Empty;

    public string ItemLabel
    {
        get => _itemLabel;
        set
        {
            _itemLabel = value;
            OnPropertyChanged();
        }
    }

    public ICommand ItemTapCommand { get; private set; }

    // Update image on tap
    private void ItemTap()
    {
        if (ItemImage == DotNetBotImage)
        {
            ItemImage = MapFillImage;
        }
        else
        {
            ItemImage = DotNetBotImage;
        }
    }

    protected void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

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

public ObservableCollection<ItemViewModel> Items { get; } = new ObservableCollection<ItemViewModel>
{
    new ItemViewModel
    {
        ItemLabel = "Test1"
    },
    new ItemViewModel
    {
        ItemLabel = "Test2"
    },
    new ItemViewModel
    {
        ItemLabel = "Test3"
    }
};


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

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="vm:ItemViewModel">
            <ViewCell>
                <Grid>
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding ItemTapCommand}"/>
                    </Grid.GestureRecognizers>
                    <Grid.ColumnDefinitions >
                        <ColumnDefinition Width="Auto"  />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Image Grid.Column="0" Source="{Binding ItemImage}" Margin="10"/>
                    <Label Text="{Binding ItemLabel}" Grid.Column="1" HorizontalOptions="Start" HeightRequest="30"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

相关问题