在CollectionView中无法单击按钮

问题描述

我有一个CollectionView和我的自定义按钮。我想用按钮制作一个网格。当我点击按钮时,它会改变背景色。我想在void OnCollectionViewSelectionChanged(object sender,SelectionChangedEventArgs e)中写一些东西,并且标签的文本是SELECTED按钮的Name(class field)当我在collectionview中单击按钮时,它会更改颜色,但是按钮不可单击,它看不到,如果我写图像可以读取数据。请帮助我使按钮可单击

<StackLayout>
                <Label  x:Name="meow1"></Label>
                <CollectionView  ItemsSource="{Binding Cars}" x:Name="phonesList" 
                         HeightRequest="90"
                         ItemsLayout="horizontallist"
                        
                         BackgroundColor="Transparent"
                         SelectionMode="Single"
                         SelectionChanged="OnCollectionViewSelectionChanged">

                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                        <Frame x:Name="frame" CornerRadius="10"  BackgroundColor="Black" Padding="0"    HeightRequest="90"
                       WidthRequest="95">
                                <Grid Padding="0" x:Name="meow">
                                    <Grid.RowDeFinitions>
                                        <RowDeFinition Height="Auto" />
                                        <RowDeFinition Height="Auto" />
                                    </Grid.RowDeFinitions>
                                    <Grid.ColumnDeFinitions>
                                        <ColumnDeFinition Width="Auto" />
                                        <ColumnDeFinition Width="Auto" />
                                    </Grid.ColumnDeFinitions>
                                <controls:CustomButton TintColor="#725762" HeightRequest="90"
                                                         WidthRequest="90" CornerRadius="10" HorizontalOptions="Center" 
                                                         BackgroundColor="White" ImageSource="{Binding ImagePath}" Clicked="Button_OnClicked"/>
                            </Grid>
                            </Frame>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

            </StackLayout>

     void OnCollectionViewSelectionChanged(object sender,SelectionChangedEventArgs e)
            {
               meow1.Text = (e.CurrentSelection.FirstOrDefault() as Car).NameImage;
        

}

解决方法

尽管对问题的了解不是很多,但是对于getBalance1.consent.type_ := type1; getBalance1.consent.target := Edit5.Text; getBalance1.consent.id := Edit6.Text; 中的Button单击事件有一些建议。绑定模型时,我们将使用Command and CommandParameter of Button。这就是 MVVM 的设计思想。

例如, Xaml 代码的修改如下:

CollectionView

然后需要修改 Car 模型,添加<StackLayout> <Label x:Name="meow1" Text="{Binding SelectedCarItem.NameImage}" FontSize="Large" VerticalOptions="Start" HorizontalOptions="CenterAndExpand" /> <CollectionView ItemsSource="{Binding Cars}" x:Name="phonesList" HeightRequest="90" ItemsLayout="HorizontalList" BackgroundColor="Transparent" SelectionMode="Single" SelectedItem="{Binding SelectedCarItem}"> <CollectionView.ItemTemplate> <DataTemplate> <Frame x:Name="frame" CornerRadius="10" BackgroundColor="{Binding BgFrameColor}" Padding="0" HeightRequest="90" WidthRequest="95"> <Grid Padding="0" x:Name="meow"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Button HeightRequest="90" WidthRequest="90" CornerRadius="10" HorizontalOptions="Center" BackgroundColor="{Binding BgButtonColor}" ImageSource="{Binding ImagePath}" Command="{Binding TapCommand}" CommandParameter="{Binding Source={x:Reference frame},Path=BindingContext}" /> </Grid> </Frame> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </StackLayout> BgColorIsSelected属性:

TapCommand

添加 CarModel 类以加载数据:

public class Car : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

    public string NameImage { get; set; } 
    public string ImagePath { get; set; }

    private Color bgFrameColor;

    public Color BgFrameColor
    {
        set
        {
            if (bgFrameColor != value)
            {
                bgFrameColor = value;
                OnPropertyChanged("BgFrameColor");
            }
        }
        get
        {
            return bgFrameColor;
        }
    }

    private Color bgButtonColor;

    public Color BgButtonColor
    {
        set
        {
            if (bgButtonColor != value)
            {
                bgButtonColor = value;
                OnPropertyChanged("BgButtonColor");
            }
        }
        get
        {
            return bgButtonColor;
        }
    }

    private bool isSelected;

    public bool IsSelected
    {
        set
        {
            if (isSelected != value)
            {
                isSelected = value;
                OnPropertyChanged("IsSelected");
            }
        }
        get
        {
            return isSelected;
        }
    }

    public ICommand TapCommand
    {
        get
        {
            return new Command((e) =>
            {
                var item = (e as Car);
                // logic on item
                if (item.isSelected)
                {
                    item.isSelected = false;
                    item.BgButtonColor = Color.White;
                    item.BgFrameColor = Color.Black;
                    PageCollectionView.SelectedCar.Remove(item);
                    MessagingCenter.Send<object,Car>(this,"Hi",new Car() {NameImage ="Welcome to the car home!" });
                }
                else
                {
                    item.isSelected = true;
                    item.BgButtonColor = Color.Blue;
                    item.BgFrameColor = Color.Yellow;
                    if (PageCollectionView.SelectedCar.Count == 0)
                    {
                        PageCollectionView.SelectedCar.Add(item);
                    }
                    else
                    {
                        PageCollectionView.SelectedCar[0].isSelected = false;
                        PageCollectionView.SelectedCar[0].BgButtonColor = Color.White;
                        PageCollectionView.SelectedCar[0].BgFrameColor = Color.Black;
                        PageCollectionView.SelectedCar.Remove(PageCollectionView.SelectedCar[0]);
                        PageCollectionView.SelectedCar.Add(item);
                    }
                    MessagingCenter.Send<object,item);
                }

            });
        }
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this,new PropertyChangedEventArgs(propertyName));
    }
}

现在在 ContentPage 中,声明一个public class CarModel: INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; public List<Car> Cars { get; set; } //public static Car SelectedCarItem { set; get; } public CarModel() { Cars = new List<Car>(); Cars.Add(new Car() { NameImage = "Lexus",ImagePath = "Lexus.png",BgButtonColor = Color.White,BgFrameColor = Color.Black,IsSelected = false }); ; Cars.Add(new Car { NameImage = "Audi",ImagePath = "Audi.png",IsSelected = false }); // set default text of label selectedCarItem = new Car() { NameImage = "Welcome to the car home!" }; } private Car selectedCarItem; public Car SelectedCarItem { get { return selectedCarItem; } set { if (selectedCarItem != value) { selectedCarItem = value; OnPropertyChanged("SelectedCarItem"); } } } protected virtual void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this,new PropertyChangedEventArgs(propertyName)); } } 仅存储一项,以保持选中此收藏夹视图。并使用 MessagingCenter 在此处更新List<Car>

carModel.SelectedCarItem

效果如下:

enter image description here

注意:从示例中,您将看到使用绑定修改public partial class PageCollectionView : ContentPage { public static List<Car> SelectedCar { get; set; } public PageCollectionView() { InitializeComponent(); CarModel carModel = new CarModel(); BindingContext = carModel; SelectedCar = new List<Car>(); MessagingCenter.Subscribe<object,(sender,arg) => { // Do something whenever the "Hi" message is received carModel.SelectedCarItem = arg; }); } } 和模型数据。因此,不建议使用BackgroundColor来修改OnCollectionViewSelectionChanged的文本。