当在ColectionieView
中按下按钮时,我试图更改按钮颜色,但数据触发器没有触发,并且不应用任何UI更改。
我的XAML:
<CollectionView
ItemsSource="{Binding Categories}"
VerticalScrollBarVisibility="Never"
HorizontalScrollBarVisibility="Never"
VerticalOptions="Center">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="3" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:Category">
<Button Padding="10, 5"
Margin="10, 15, 0, 10"
BorderColor="Transparent" Background="{Binding Source={StaticResource Gray300}, ConverterParameter=0.4, Converter={StaticResource ColorToRGBAColor}}"
VerticalOptions="Center"
Text="{Binding Name}"
Command="{Binding Source={x:Reference TaskListPage},Path=BindingContext.CategorySelectedCommand}"
CommandParameter="{Binding .}">
<Button.Triggers>
<DataTrigger TargetType="Button" Binding="{Binding IsActive}" Value="True">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Button.Triggers>
</Button>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
ViewModel:
public partial class TaskListViewModel : ObservableObject
{
[ObservableProperty]
private ObservableCollection<Category> categories;
public IRelayCommand<Category> CategorySelectedCommand { get; set; }
public TaskListViewModel()
{
categories = new ObservableCollection<Category>();
categories.Add(new Category { Name = "Work", IsActive = true });
categories.Add(new Category { Name = "Personal", IsActive = false });
categories.Add(new Category { Name = "Wishlist", IsActive = false });
CategorySelectedCommand = new RelayCommand<Category>(CategorySelected);
}
private void CategorySelected(Category category)
{
Categories.All(c => { c.IsActive = false; return true; });
var categoryToActivate = Categories.SingleOrDefault(x => x == category);
if (categoryToActivate is null)
{
return;
}
categoryToActivate.IsActive = true;
OnPropertyChanged(nameof(Categories));
}
}
我也尝试过重新填充ObservableCollection,这很有帮助,但我相信还有更清洁的解决方案。请给我一些需要改变的建议。
请确保Category
是ObservableObject,例如:
public class Category : ObservableObject
{
private string name;
private bool isActive;
public string Name
{
get => name;
set => SetProperty(ref name, value);
}
public bool IsActive
{
get => isActive;
set => SetProperty(ref isActive, value);
}
}
有关更多信息,您可以查看官方文件。