gpt4 book ai didi

xaml - 自定义按钮的 ImageButton GestureRecognizers

转载 作者:行者123 更新时间:2023-12-04 09:09:29 25 4
gpt4 key购买 nike

我有一个带有自定义按钮的 Collection View 。并且有一个可以更改图像及其背景颜色的功能。我的问题:如果我单击它,它适用于每个按钮,我想创建一个可以更改我的 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,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)无效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 实现它.
这是布局代码。

 <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。
enter image description here
====== 更新 =======

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


想要达到 GIF 之后的效果吗?
enter image description here
如果是,请更改 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;
});
=======更新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));
}
}
}

这里正在运行 GIF。
enter image description here
=========更新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。
enter image description here
这是演示。
https://github.com/851265601/Xamarin.Android_ListviewSelect/blob/master/CollectionViewDemo.zip

关于xaml - 自定义按钮的 ImageButton GestureRecognizers,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63384024/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com