自定义按钮的ImageButtonGestureRecognizers

问题描述

我有一个带有自定义按钮的集合视图。并且有一个可以更改图像及其背景颜色的函数。我的问题：单击该按钮可以对每个按钮起作用，我想制作一个可以更改图像的颜色和背景颜色的函数。我的SELECTED按钮。我想也许可以创建控件：CustomroundButton.GestureRecognizers，但是我不知道如何编写此函数。或者其他函数

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

私有无效Button_OnClicked（对象发送者，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

解决方法

我注意到您使用了MVVM，可以通过controls:CustomRoundButton 的Command来实现。

这里是布局代码。

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

            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。

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

但是您能帮我只选择一个按钮更改背景颜色和图像上图标的颜色吗？

您要获得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 ========

如果您有其他图片，则可以添加一个名为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));
        }
    }
}

此处正在运行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 imagebutton imagebutton xamarin xamarin xamarin xamarin.android xamarin.android xamarin.forms xamarin.forms xaml xaml xaml

自定义按钮的ImageButtonGestureRecognizers

问题描述

解决方法

相关问答