我需要单击图像按钮并更改复选框的状态,反之亦然。我如何获取名称或 ID 以供参考?
我在两者上都包含了 x:Name="{Binding nameFrmoCollection}" ,但它不起作用,因为对象发送者没有带来它。
这是我的代码:
我的Xaml:
<BindableLayout.ItemTemplate >
<DataTemplate x:DataType="model:ConvenioProfissional">
<Frame HeightRequest="100" WidthRequest="100" Margin="7,2,0,6" Padding="0" BorderColor="#F0F0F0">
<StackLayout>
<ImageButton Source="{Binding Convenio_Img}" Clicked="OnImageButtonClicked" WidthRequest="100" HeightRequest="100" BackgroundColor="transparent" BorderColor="transparent" BorderWidth="2" CornerRadius="10"/>
<CheckBox Margin="0,-35,0,0" Color="#66AEBA" HeightRequest="30"/>
</StackLayout>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
我的代码隐藏(到目前为止为 ImageButton 工作)。
public void OnImageButtonClicked(object sender, EventArgs e)
{
ImageButton button = (ImageButton)sender;
((ImageButton)sender).BorderWidth = 4;
((ImageButton)sender).BorderColor = ButtonUpTextColor;
((ImageButton)sender).CornerRadius = 10;
}
谢谢
我们无法从后台代码中获取DataTemplate中的控件。相反,我们可以使用数据绑定
例如,我们要在单击 ImageButton 时更改
CheckBox
IsChecked
属性。
这是xaml 文件。为了实现 MVVM,我们使用 Command 而不是 clicked 事件。 对于命令,我使用 相对绑定。
<BindableLayout.ItemTemplate >
<DataTemplate x:DataType="model:ConvenioProfissional">
<Frame HeightRequest="100" WidthRequest="100" Margin="7,2,0,6" Padding="0" BorderColor="#F0F0F0">
<StackLayout>
<ImageButton Source="{Binding Convenio_Img}"
Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=ClickedCommand}"
CommandParameter="{Binding .}"
WidthRequest="100" HeightRequest="100" BackgroundColor="transparent"
BorderColor="transparent" BorderWidth="2" CornerRadius="10"/>
<CheckBox IsChecked="{Binding IsChecked}" Margin="0,-35,0,0" Color="#66AEBA" HeightRequest="30" />
</StackLayout>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
然后是我们的模型,即ConvenioProfissional。在这个模型中,我们必须实现INotifyPropertyChanged,它定义了一个名为PropertyChanged的事件。当我们修改
IsChecked
值时,UI 也会更新。
public class ConvenioProfissional : INotifyPropertyChanged
{
public string Convenio_Img { get; set; }
public bool isChecked;
public bool IsChecked
{
get
{
return isChecked;
}
set
{
isChecked = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsChecked)));
}
}
public event PropertyChangedEventHandler? PropertyChanged;
}
最后,这是 ViewModel。我们必须为 ImageButton 实现 ClickedCommand。通过CommandParameter,我们得到了我们点击的ConvenioProfissional实例,然后我们只需修改它的IsChecked属性即可。
public class MainPageViewModel
{
public ObservableCollection<ConvenioProfissional> ItemCollection { get; set; } = new ObservableCollection<ConvenioProfissional>();
public MainPageViewModel()
{
// add some test data, just ignore it
ItemCollection.Add(new ConvenioProfissional() { Convenio_Img = "help.png", IsChecked = false });
}
public Command ClickedCommand
{
get
{
return new Command((e) =>
{
var obj = e as ConvenioProfissional;
foreach(var item in ItemCollection)
{
if(obj == item)
{
obj.IsChecked = true;
}
}
});
}
}
}
如果您有任何疑问,请随时询问!
希望有帮助!