Incluí um botão "anexar imagens" em um aplicativo .NET MAUI que funciona perfeitamente. Ao lado disso, incluí um botão de exclusão e um seletor representando os nomes dos arquivos das imagens escolhidas anteriormente:
<!-- Attach Image Button -->
<Button MaximumWidthRequest="150"
Text="Attach images"
TextColor="{StaticResource SnowWhite}"
BackgroundColor="{StaticResource AlpineBlue}"
CornerRadius="25"
Command="{Binding AttachImagesCommand}">
<Button.ImageSource>
<FontImageSource FontFamily="MSO"
Glyph="{x:Static helpers:IconFont.Attach_file_add}"
Size="20"
Color="{StaticResource NightBlue}" />
</Button.ImageSource>
</Button>
<!-- Delete Attached Image Button -->
<Button BackgroundColor="{StaticResource SnowWhite}"
Command="{Binding RemoveImageCommand}"
IsVisible="{Binding Images, Converter={StaticResource IsListNotNullOrEmptyConverter}}">
<Button.ImageSource>
<FontImageSource FontFamily="MSO"
Glyph="{x:Static helpers:IconFont.Delete}"
Size="20"
Color="{StaticResource NightBlue}" />
</Button.ImageSource>
</Button>
<!-- Images Picker -->
<Picker
ItemsSource="{Binding Images}"
ItemDisplayBinding="{Binding FileName}"
SelectedItem="{Binding CurrentImage, Mode=TwoWay}"
SelectedIndex="{Binding CurrentImageIndex, Mode=TwoWay}"
IsVisible="{Binding Images, Converter={StaticResource IsListNotNullOrEmptyConverter}}"
/>
O botão delete também parece funcionar bem, pois está removendo o FileResult no ViewModel do ObservableCollection anexado a ele:
[ObservableProperty]
private FileResult _currentImage = null;
[ObservableProperty]
private int _currentImageIndex = 0;
[ObservableProperty]
private ObservableCollection<FileResult> _images = new();
// ...
[RelayCommand]
private async Task OnAttachImagesAsync()
{
var results = await FilePicker.PickMultipleAsync(new PickOptions
{
PickerTitle = "Pick Image(s) Please",
FileTypes = FilePickerFileType.Images
});
if (results == null)
return;
Images = new ObservableCollection<FileResult>(results);
CurrentImage = Images.First();
}
// ...
[RelayCommand]
private void OnRemoveImage()
{
Images.RemoveAt(CurrentImageIndex);
}
No entanto, se todos os itens do ObservableCollection tiverem sido removidos, os dois componentes ainda estarão visíveis:
Por que o conversor "IsListNullOrEmptyConverter" do .NET MAUI Community Toolkit está funcionando bem no início da visualização, mas não é atualizado adequadamente? Sinto falta de uma diretiva, como Mode=TwoWay
no XAML ou NotifyCanExecuteChanged
no C#?
como Julian sugere, você precisa ligar manualmente
OnPropertyChanged()
ao remover o último item: