用于自定义按钮的 ImageButton GestureRecognizers

Question

我有一个自定义的集合视图 buttons.And 有一个功能可以改变图像的颜色及其 background.My 问题：如果我点击它，它适用于每个按钮，我想制作一个功能会改变我选择的 button.I 的颜色和背景颜色，我想可能会 controls:CustomRoundButton.GestureRecognizers 但我不明白如何写这个 function.Or 可能是其他功能

            <CollectionView  ItemsSource="{Binding Cars}"      

                   SelectionMode="None">

                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical"
                Span="3" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="90" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                            </Grid.ColumnDefinitions>
                            <Frame CornerRadius="10" BorderColor="Black" Margin="5,5,5,5" Padding="0"
                       >
                              <controls:CustomRoundButton TintColor="#616161" HeightRequest="90"
                             WidthRequest="90" CornerRadius="10" HorizontalOptions="Center"
                          BackgroundColor="White" ImageSource="heart" Clicked="Button_OnClicked"/>                             
                        </Frame>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

private void Button_OnClicked(object sender, EventArgs e)

{

    ((CustomRoundButton)sender).BackgroundColor = ((Button)sender).BackgroundColor == Color.White
        ? Color.FromHex("#2979FF")
        : Color.White;
    CustomRoundButton.SetTintColor((CustomRoundButton)sender, CustomRoundButton.GetTintColor((CustomRoundButton)sender) == Color.FromHex("#616161")
        ? Color.White
        : Color.FromHex("#616161"));

}

enter image description here

Answer 1

我注意到你使用了 MVVM，你可以为你的 controls:CustomRoundButton .

实现我的命令

这是布局代码。

 <StackLayout>
        <!-- Place new controls here -->
        <CollectionView  x:Name="BillView" ItemsSource="{Binding Cars}"      

                   SelectionMode="None">

            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical"
                Span="3" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="90" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                        </Grid.ColumnDefinitions>
                        <Frame CornerRadius="10" BorderColor="Black" Margin="5,5,5,5" Padding="0" >
                            <controls:CustomRoundButton  HeightRequest="90"
                             WidthRequest="90" CornerRadius="10" HorizontalOptions="Center"
                          BackgroundColor="{Binding CustButtonColor}" ImageSource="{Binding Image}" Command="{ Binding BindingContext.ChangeCommand, Source={x:Reference Name=BillView} }"  CommandParameter="{Binding .}"/>
                        </Frame>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

这里是布局背景代码。

  public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            this.BindingContext = new MyModelView();
        }

       
    }

这是关于 MyModelView.cs

的代码

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Text;
using System.Windows.Input;
using Xamarin.Forms;

namespace CollectionViewDemo
{
     public class MyModelView
    {
        public ObservableCollection<Car> Cars { get; set; }
        public ICommand ChangeCommand { protected set; get; }
        public MyModelView()
        {
            Cars = new ObservableCollection<Car>();
            Cars.Add(new Car() { Image = "unheart.png",CustButtonColor=Color.Default });
            Cars.Add(new Car() { Image = "unheart.png", CustButtonColor = Color.Default });
            Cars.Add(new Car() { Image = "unheart.png", CustButtonColor = Color.Default });
            Cars.Add(new Car() { Image = "unheart.png", CustButtonColor = Color.Default });
            Cars.Add(new Car() { Image = "unheart.png", CustButtonColor = Color.Default });
            Cars.Add(new Car() { Image = "unheart.png", CustButtonColor = Color.Default });
            Cars.Add(new Car() { Image = "unheart.png", CustButtonColor = Color.Default });
            Cars.Add(new Car() { Image = "unheart.png", CustButtonColor = Color.Default });
            Cars.Add(new Car() { Image = "unheart.png", CustButtonColor = Color.Default });

            ChangeCommand = new Command<Car>((key) =>
            {
               
                var car = key as Car;
                if (car.Image == "heart.png")
                {
                    car.Image = "unheart.png"; car.CustButtonColor = Color.Default;
                }
                else
                {


                    car.Image = "heart.png";
                    car.CustButtonColor = Color.Red;
                }
               

            });
        }
    }
    public class Car: INotifyPropertyChanged
    {
        string image;
        public string Image
        {
            set
            {
                if (image != value)
                {
                    image = value;
                    OnPropertyChanged("Image");

                }
            }
            get
            {
                return image;
            }
        }

        Color _custButtonColor;
        public Color CustButtonColor
        {
            set
            {
                if (_custButtonColor != value)
                {
                    _custButtonColor = value;
                    OnPropertyChanged("CustButtonColor");

                }
            }
            get
            {
                return _custButtonColor;
            }
        }
      

        public event PropertyChangedEventHandler PropertyChanged;

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

这是运行 GIF。

======更新=======

but can you help me that only ONE selected button change background color and color of the icon on the image?

你想实现下面GIF的效果吗？

如果是，请修改ChangeCommand的代码。

  ChangeCommand = new Command<Car>((key) =>
            {
                foreach (var item in Cars)
                {
                    item.Image = "unheart.png";
                    item.CustButtonColor = Color.Default;
                }
                    var car = key as Car;
                    car.Image = "heart.png";
                    car.CustButtonColor = Color.Red;
            });

=======Update2=========

如果您有不同的图片，您可以添加一个属性名称。我们可以在单击按钮时按名称重置 ObservableCollection。

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Text;
using System.Windows.Input;
using Xamarin.Forms;

namespace CollectionViewDemo
{
     public class MyModelView
    {
        public ObservableCollection<Car> Cars { get; set; }
        public ICommand ChangeCommand { protected set; get; }
        public MyModelView()
        {
            Cars = new ObservableCollection<Car>();
            Cars.Add(new Car() {Name="Audio", Image = "unheart.png",CustButtonColor=Color.Default });
            Cars.Add(new Car() {Name="BMW", Image = "faded_div.jpg", CustButtonColor = Color.Default });
            Cars.Add(new Car() {Name="BENZ", Image = "myIcon.png", CustButtonColor = Color.Default });
            Cars.Add(new Car() {Name="LEUX", Image = "wind.jpg", CustButtonColor = Color.Default });

           var DefaultCars= new ObservableCollection<Car>();
            DefaultCars = Cars;

            ChangeCommand = new Command<Car>((key) =>
            {
                //Rest the `ObservableCollection` by name.
                foreach (var item in Cars)
                {
                    if (item.Name.Equals("Audio"))
                    {
                        item.Image = "unheart.png";
                        item.CustButtonColor = Color.Default;
                    }else if (item.Name.Equals("BMW"))
                    {
                        item.Image = "faded_div.jpg";
                        item.CustButtonColor = Color.Default;
                    }
                    else if (item.Name.Equals("BENZ"))
                    {
                        item.Image = "myIcon.png";
                        item.CustButtonColor = Color.Default;
                    }
                    else if (item.Name.Equals("LEUX"))
                    {
                        item.Image = "wind.jpg";
                        item.CustButtonColor = Color.Default;
                    }
                   
                }
                var car = key as Car;
                


                    car.Image = "heart.png";
                    car.CustButtonColor = Color.Red;
              
               

            });
        }
    }
    public class Car: INotifyPropertyChanged
    {
        public string Name  { get; set; }
        string image;
        public string Image
        {
            set
            {
                if (image != value)
                {
                    image = value;
                    OnPropertyChanged("Image");

                }
            }
            get
            {
                return image;
            }
        }

        Color _custButtonColor;
        public Color CustButtonColor
        {
            set
            {
                if (_custButtonColor != value)
                {
                    _custButtonColor = value;
                    OnPropertyChanged("CustButtonColor");

                }
            }
            get
            {
                return _custButtonColor;
            }
        }
       

        public event PropertyChangedEventHandler PropertyChanged;

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

这是运行 GIF。

=========更新3==============

点击不同的按钮可以设置不同的图标（按名称设置不同的图片）。

   ChangeCommand = new Command<Car>((key) =>
            {
                //reset the item to default image and background.
                foreach (var item in Cars)
                {
                    if (item.Name.Equals("Audio"))
                    {
                        item.Image = "unheart.png";
                        item.CustButtonColor = Color.Default;
                    }else if (item.Name.Equals("BMW"))
                    {
                        item.Image = "faded_div.jpg";
                        item.CustButtonColor = Color.Default;
                    }
                    else if (item.Name.Equals("BENZ"))
                    {
                        item.Image = "myIcon.png";
                        item.CustButtonColor = Color.Default;
                    }
                    else if (item.Name.Equals("LEUX"))
                    {
                        item.Image = "wind.jpg";
                        item.CustButtonColor = Color.Default;
                    }
                   
                }

                //set the different image by Name
                var car = key as Car;

                if (car.Name.Equals("BENZ"))
                {
                    car.Image = "sandwich.png";
                    
                }else if (car.Name.Equals("BMW"))
                {
                    car.Image = "rose.png";
                }
                else
                {
                    car.Image = "heart.png";

                }
                car.CustButtonColor = Color.Red;
              
               

            });
        }
    }

这是运行 GIF。

这是演示。

https://github.com/851265601/Xamarin.Android_ListviewSelect/blob/master/CollectionViewDemo.zip

用于自定义按钮的 ImageButton GestureRecognizers

ImageButtonGestureRecognizers for custom button

xaml

imagebutton

xamarin.android

xamarin

xamarin.forms