Xaml ImageButton自定义按钮的识别器_Xaml_Xamarin_Xamarin.forms_Xamarin.android_Imagebutton

Xaml ImageButton自定义按钮的识别器

xaml xamarin xamarin.forms xamarin.android

Xaml ImageButton自定义按钮的识别器,xaml,xamarin,xamarin.forms,xamarin.android,imagebutton,Xaml,Xamarin,Xamarin.forms,Xamarin.android,Imagebutton,我有一个带有自定义按钮的集合视图。还有一个功能可以更改图像及其背景的颜色。我的问题是：如果我单击每个按钮，我想做一个函数来改变我所选按钮的颜色和背景色。我想做一些控件：CustomRoundButton.GestureRecograiners，但我不知道如何编写这个函数。或者其他函数 <CollectionView ItemsSource="{Binding Cars}" SelectionM

我有一个带有自定义按钮的集合视图。还有一个功能可以更改图像及其背景的颜色。我的问题是：如果我单击每个按钮，我想做一个函数来改变我所选按钮的颜色和背景色。我想做一些控件：CustomRoundButton.GestureRecograiners，但我不知道如何编写这个函数。或者其他函数

            <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>

我注意到您使用了MVVM，您可以通过我对

控件的命令实现它：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>

下面是关于

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));
        }
    }
}

=======更新2=========

如果有不同的图片，可以添加名为Name的属性。单击按钮时，我们可以按名称重置

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));
        }
    }
}

使用系统；
使用System.Collections.Generic；
使用System.Collections.ObjectModel；
使用系统组件模型；
使用系统文本；
使用System.Windows.Input；
使用Xamarin.Forms；
命名空间集合视图演示
{
公共类MyModelView
{
公共可观测收集车{get；set；}
公共ICommand ChangeCommand{protected set；get；}
公共MyModelView（）
{
Cars=新的可观测集合（）；
添加（新车（）{Name=“Audio”，Image=“unheart.png”，CustButtonColor=Color.Default}）；
添加（newcar（）{Name=“BMW”，Image=“laded\u div.jpg”，CustButtonColor=Color.Default}）；
添加（新车（）{Name=“BENZ”，Image=“myIcon.png”，CustButtonColor=Color.Default}）；
添加（newcar（）{Name=“LEUX”，Image=“wind.jpg”，CustButtonColor=Color.Default}）；
var DefaultCars=新的ObservableCollection（）；
默认汽车=汽车；
ChangeCommand=新命令（（键）=>
{
//按名称将“ObservableCollection”剩余。
foreach（车辆中的var项目）
{
if（item.Name.Equals（“音频”））
{
item.Image=“unheart.png”；
item.CustButtonColor=Color.Default；
}如果（项目名称等于（“BMW”））
{
item.Image=“褪色的_div.jpg”；
item.CustButtonColor=Color.Default；
}
else如果（项目名称等于（“奔驰”））
{
item.Image=“myIcon.png”；
item.CustButtonColor=Color.Default；
}
else if（item.Name.Equals（“LEUX”））
{
item.Image=“wind.jpg”；
item.CustButtonColor=Color.Default；
}
}
var car=钥匙作为汽车；
car.Image=“heart.png”；
car.CustButtonColor=Color.Red；
});
}
}
公共级汽车：InotifyProperty已更改
{
公共字符串名称{get；set；}
字符串图像；
公共字符串图像
{
设置
{
如果（图像！=值）
{
形象=价值；
OnPropertyChanged（“图像”）；
}
}
得到
{
返回图像；
}
}
颜色custButtonColor；
公共颜色CustButtonColor
{
设置
{
如果（_custButtonColor！=值）
{
_custButtonColor=值；
关于财产变更（“CustButtonColor”）；
}
}
得到
{
返回_custButtonColor；
}
}
公共事件属性更改事件处理程序属性更改；
受保护的虚拟void OnPropertyChanged（字符串propertyName）
{
PropertyChanged？.Invoke（这是新的PropertyChangedEventArgs（propertyName））；
}
}
}

这里是运行GIF

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

单击按钮时，可以为不同的按钮设置不同的图标（按名称设置不同的图像）

ChangeCommand=新命令（（键）=>
{
//将项目重置为默认图像和背景。
foreach（车辆中的var项目）
{
if（item.Name.Equals（“音频”））
{
item.Image=“unheart.png”；
item.CustButtonColor=Color.Default；
}如果（项目名称等于（“BMW”））
{
item.Image=“褪色的_div.jpg”；
item.CustButtonColor=Color.Default；
}
else如果（项目名称等于（“奔驰”））
{
item.Image=“myIcon.png”；
item.CustButtonColor=Color.Default；
}
else if（item.Name.Equals（“LEUX”））
{
item.Image=“wind.jpg”；
item.CustButtonColor=Color.Default；
}
}
//按名称设置不同的图像
var car=钥匙作为汽车；
如果（车名等于（“奔驰”））
{
car.Image=“sandwich.png”；
}如果（车名等于（“宝马”））
{
car.Image=“rose.png”；
}
其他的
{
car.Image=“heart.png”；
}
car.CustButtonColor=Color.Red；
});
}
}

这里是运行GIF。

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));
        }
    }
}

  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;
            });

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));
        }
    }
}

   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;
              
               

            });
        }
    }