问题描述
我有一个带有自定义按钮的集合视图。并且有一个可以更改图像及其背景颜色的函数。我的问题：单击该按钮可以对每个按钮起作用，我想制作一个可以更改图像的颜色和背景颜色的函数。我的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"));
}
解决方法
我注意到您使用了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