.NET Maui：如何实现点击切换Checkbox与ImageButton的状态？

点击ImageButton时需要同步切换Checkbox的选中状态，点击Checkbox时也要同步改变ImageButton的样式状态。尝试通过绑定x:Name="{Binding nameFrmoCollection}"来引用控件，但sender对象无法获取该名称，导致交互逻辑无法实现。

相关代码如下：

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

方式一：MVVM双向绑定（推荐） #

通过数据模型属性同步状态，无需引用控件名称/ID，符合Xamarin.Forms设计理念。

1. 更新数据模型ConvenioProfissional
   添加IsSelected布尔属性并实现INotifyPropertyChanged接口：

public class ConvenioProfissional : INotifyPropertyChanged
{
    private bool _isSelected;
    public string Convenio_Img { get; set; }

    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            if (_isSelected != value)
            {
                _isSelected = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 修改XAML绑定状态与样式
   通过DataTrigger实现样式联动，同时设置双向绑定：

<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}" 
                             WidthRequest="100" HeightRequest="100" 
                             BackgroundColor="transparent" 
                             BorderColor="transparent" 
                             BorderWidth="2" 
                             CornerRadius="10">
                    <ImageButton.Triggers>
                        <DataTrigger TargetType="ImageButton" Binding="{Binding IsSelected}" Value="True">
                            <Setter Property="BorderWidth" Value="4"/>
                            <Setter Property="BorderColor" Value="{StaticResource ButtonUpTextColor}"/>
                        </DataTrigger>
                    </ImageButton.Triggers>
                    <ImageButton.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type local:YourViewModelType}}, Path=ToggleSelectionCommand}" 
                                              CommandParameter="{Binding .}"/>
                    </ImageButton.GestureRecognizers>
                </ImageButton>
                <CheckBox Margin="0,-35,0,0" 
                          Color="#66AEBA" 
                          HeightRequest="30"
                          IsChecked="{Binding IsSelected, Mode=TwoWay}"/>                              
            </StackLayout>
        </Frame>
    </DataTemplate>
</BindableLayout.ItemTemplate>       

3. 在ViewModel中添加状态切换命令

public ICommand ToggleSelectionCommand => new Command<ConvenioProfissional>(item =>
{
    item.IsSelected = !item.IsSelected;
});

点击ImageButton或Checkbox时，IsSelected属性会同步变化，进而自动同步两者的状态与样式。

方式二：通过VisualTreeHelper查找关联控件（代码后台方式） #

适合简单场景，通过遍历可视化树找到同一容器内的对应控件：

1. 修改XAML，给StackLayout命名

<BindableLayout.ItemTemplate >
    <DataTemplate x:DataType="model:ConvenioProfissional">
        <Frame HeightRequest="100" WidthRequest="100" Margin="7,2,0,6" Padding="0" BorderColor="#F0F0F0">
            <StackLayout x:Name="ItemStack">
                <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" CheckedChanged="OnCheckBoxCheckedChanged"/>                              
            </StackLayout>
        </Frame>
    </DataTemplate>
</BindableLayout.ItemTemplate>       

2. 编写控件查找辅助方法

private T FindChild<T>(VisualElement parent) where T : VisualElement
{
    if (parent == null) return null;
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i) as VisualElement;
        if (child is T target)
            return target;
        var result = FindChild<T>(child);
        if (result != null)
            return result;
    }
    return null;
}

3. 实现事件同步逻辑

public void OnImageButtonClicked(object sender, EventArgs e)
{
    var button = (ImageButton)sender;
    var stackLayout = (StackLayout)button.Parent;
    var checkBox = FindChild<CheckBox>(stackLayout);

    checkBox.IsChecked = !checkBox.IsChecked;
    button.BorderWidth = checkBox.IsChecked ? 4 : 2;
    button.BorderColor = checkBox.IsChecked ? ButtonUpTextColor : Color.Transparent;
}

public void OnCheckBoxCheckedChanged(object sender, CheckedChangedEventArgs e)
{
    var checkBox = (CheckBox)sender;
    var stackLayout = (StackLayout)checkBox.Parent;
    var imageButton = FindChild<ImageButton>(stackLayout);

    imageButton.BorderWidth = e.Value ? 4 : 2;
    imageButton.BorderColor = e.Value ? ButtonUpTextColor : Color.Transparent;
}

内容的提问来源于stack exchange，提问作者Fernando